I'm new to php.
I want to use jquery to delete a table row from php echoing code, but it doesn't work.
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<title>test insert</title>
<script src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.del').click(function(){
$(this).parent().parent().fadeOut('slow');
});
$('#show').click(function(){
$.post('data.php',{action: "show"},function(res){
$('#result').hide().html(res).fadeIn('slow');
});
});
});
</script>
</head>
<body>
<h2>Show Data</h2>
<button id="show">Show</button>
<p>Result:</p>
<div id="result"></div><br>
</body>
</html>
and here is my php code:
<?php
//connect to db
$con = mysql_connect('localhost','root');
$db = mysql_select_db('test');
//if show key is pressed show records
if($_POST['action'] == 'show'){
$sql = "select * from customer order by Firstname";
$query = mysql_query($sql);
echo "<table><tr><th>Firstname</th><th>Lastname</th><th>Keynumber</th>
<th>Number2</th><th>Number3</th><th>Option</th><th><button class='del' >delete</button></th></tr>";
while($row = mysql_fetch_array($query)){
echo "<tr><td>$row[firstname]</td><td>$row[lastname]</td><td class='key'>$row[keynumber]</td>
<td>$row[number2]</td><td>$row[number3]</td><td><button class='del' >delete</button></td></tr>";
}
echo "</table>";
}
?>
When I press the 'delete' button, it doesn't work.
I don't know why it doesn't work:(
It looks like your data is loaded dynamically when the show button is clicked. If so, you need to use .on() instead of .click(), and .on()'s delegated event syntax. Change your delete button code to:
$(document).on('click', '.del', function(){
$(this).parent().parent().fadeOut('slow');
});
I have corrected ur code just check it,
<script type="text/javascript">
$(document).ready(function(){
$('.del').click(function(){
$(this).parent().parent().fadeOut('slow');
});
$('#show').click(function(){
$.post(
url:'data.php',
data:{action: "show"},
type:'POST',
function(res){
$('#result').hide().html(res).fadeIn('slow');
});
});
});
</script>
Related
I have 2 divs on my html page. When I press my button I want to fill the div #question1 with the question1 data from my database and the #question2 div with the question2 data from my database. Now the 2 divs are filled with the same data.
This is my html and js code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
"use strict";
$('#button').click(function() {
$.ajax({
url: 'getquestions.php',
success: function(data) {
$('#question1').html(data);
$('#question2').html(data);
}
});
});
});
</script>
<input type="button" id="button" value="Load" />
<div id="question1"></div>
<div id="question2"></div>
</body>
</html>
The php file
<?php
$connection = mysqli_connect("localhost", "root", "" , "mobiledatabase");
$query = "SELECT question1, question2 FROM adult_questions WHERE id=3";
$query_run = mysqli_query($connection,$query);
$query_row = mysqli_num_rows($query_run);
if ($query_row==1) {
foreach ($query_run as $row ) {
echo $question1 = $row['question1'];
echo $question2 = $row['question2'];
}
}
?>
Update your php file.
Create an array like $retArr = array("question1" =>$question1,"question2" =>$question2); in your php file Then convert it in to json using json_encode($retArr) & echo json_encode($retArr) In your ajax response show $('#question1').html(data.question1);
Hope this will help
Try this,
In PHP pass it like,
$question1='';$question2='';
if ($query_row==1) {
foreach ($query_run as $row ) {
$question1 = $row['question1'];
$question2 = $row['question2'];
}
}
echo json_encode(array('question1'=>$question1,'question2'=>$question2));
In Jquery,
$.ajax({
url: 'getquestions.php',dataType:'json',
success: function(data) {
$('#question1').html(data.question1);
$('#question2').html(data.question2);
}
});
This question already has answers here:
JavaScript does not fire after appending [duplicate]
(3 answers)
Closed 7 years ago.
I have searched all over for this and cannot find a solution. I am still a beginner in both PHP and AJAX, so please bear with me.
I have a file fetch.php which generates content for my page index.html.
Fetch.php gets data from a MySQL database and adds it to my index page like this:
while ($res = mysqli_fetch_array($rs)) {
$str .= '<div class="task" id='.$res['tid'].'>
<table>
<tr>
<td>
<button class="btnDelete" data-id="'.$res['tid'].'">x</button>
</td>
<td>'.$res["name"].'</td>
</tr>
<tr>
<td>'. $res["task"].'</td></tr></table></div>';
}
echo $str;
The "tid" being my table index. Now, when I click the button with the data-id of 1, I want to delete the row with the tid of 1.
<script type="text/javascript">
$('.btnDelete').click(function() {
var recordid = $('.btnDelete').data('id');
$.ajax({
type: 'POST',
url: 'remove.php',
data: { 'id': recordid},
});
});
</script>
This sends the (supposed to) data-id to the following PHP.
$con = mysqli_connect(HOST,USERNAME,PASSWORD,DB);
if (!$con) {
die("Can not connect: " .mysql_error());
}
$id = $_POST['recordid'];
$sql = "UPDATE tasks SET visible = 'hide' WHERE tid = $id ";
$query = mysqli_query($con, $sql);
if(mysqli_affected_rows($con)) {
echo "Record deleted successfully";
}
mysqli_close($con);
My PHP files work, but nothing happens when I click the button?
Below is my complete HTML:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script type="text/javascript">
$(function() {
getStatus();
});
function getStatus() {
$('div#data').load('fetch.php');
setTimeout("getStatus()",300000);
}
</script>
</head>
<body>
<div id="data">
</div>
<script type="text/javascript">
$('.btnDelete').click(function() {
var recordid = $('.btnDelete').data('id');
$.ajax({
type: 'POST',
url: 'remove.php',
data: { 'id': recordid},
});
});
</script>
</body>
</html>
How can I get the AJAX to trigger on the buttonclick and send the data-id to remove.php?
This is not a duplicate, it is an AJAX question and not a MySQL question
As your AJAX loads your HTML and injects it in to the page, you'll have to use on event when binding.
$(document).on("click", ".btnDelete", function () {
/** Your code here. **/
});
Reading Material
Event Delegation
I want to call a php function with one param, id of a button, when I press that button.
This is what I tried:
<!DOCTYPE html>
<html>
<body>
<?php
include ("sterge2.html");
<button onclick="writeMsg(this.id)">Click me</button>
function writeMsg($id) {
echo $id."Hello world!";
//add that id in a database...
}
?>
</body>
</html>
But it does nothing...
you can not combine javascript and php. instead of it use ajax.
try below ajax code..
<button class="btnsubmit" id="submit" data-id="5" >Click me</button>
$(".btnsubmit").click(function() {
var id = $(this).attr('data-id');
$.ajax({
url : URL+'writeMsg',
type : 'POST',
data : {'id': id},
success : function(data)
{
}
});
});
and in writeMsg function perform database opertaion.
i hope this code will help you.
Try this:
<!DOCTYPE html>
<html>
<body>
<?php
include ("sterge2.html");
echo '<button onclick="writeMsg(this.id)">Click me</button>';
?>
<script>
function writeMsg(id) {
alert(id + "Hello world!");
// Use AJAX to call PHP file and save id into DB
}
</script>
</body>
</html>
With onclick-event you can call a javascript function. Not php.
Just try this.
<!--html -->
<button onclick="writeMsg(<?php echo $id_val ?>)">Click me</button>
<!--html -->
Function will be included in javascript
<script type="text/javascript>">
var id;
function writeMsg(id) {
alert(id."Hello world!");//give you result
}
</script>
I am trying to run this simple Ajax Post example like:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("test.php",
{
name:"Hello Ajax"
},
function(data){
$("p").html(data);
}
);
});
});
</script>
</head>
<body>
<p></p>
</body>
</html>
and PHP (test.php) as:
<?php
$name = $_POST['name'];
echo '<a>'.$name.'</a>';
?>
No error message but not getting any result back! can you please let me know what I am doing wrong?
Just a simple change, added button element in your markup. Click it and it should work:
<body>
<button>Click Me</button>
<p></p>
</body>
Your javascript is looking for the button element on which when clicked, will trigger the ajaxcall in test.php
$("button").click(function(){
By clicking the button, it will display Hello Ajax, the echo from the test.php and the one that you've send.
$.post("test.php",
{
name:"Hello Ajax"
},
while entering the data in the textfield on the browser, it should fetch the data from the database and display accordingly. (ex: like google).
Here is my php code:
<?php
mysql_connect("localhost","root","MobixMySQL") or die(mysql_error());
mysql_select_db("filter") or die(mysql_error());
$partialStates = $_POST['partialStates'];
$states = mysql_query("SELECT name FROM list1 WHERE name LIKE "%$partialStates%"");
while($state = mysql_fetch_assoc($states)) {
echo "<div>".$state['name']."</div>";
}
?>
And below is my html code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function getStates(value){
$.post("getStates.php",{partialStates:value},function(data){
$("#results").html(data);
});
}
</script>
</head>
<body>
<input type="text" onKeyUp="getStates(this.value)" >
<div id="results"></div>
</body>
</html>
Pls suggest me where am wrong....!!!
Error with your quotes in the SQL...along with injection. Check out PDO for future development
$partialStates = mysql_real_escape_string($_POST['partialStates']);
$states = mysql_query("SELECT `name` FROM list1 WHERE `name` LIKE '%$partialStates%'");
EDIT
Since you're using jQuery trying changing your onkeyup event. If you are still getting errors use something like FireBug or your browsers javascript debugger to check for further errors. Try the following (untested):
<script type="text/javascript">
$(document).ready(function() {
$('input#myFilter').keyup(function(event) {
$.post("getStates.php",{partialStates:$(this).val()},function(data){
$("#results").html(data);
});
}).keydown(function(event) {
if (event.which == 13) {
event.preventDefault();
}
});
});
</script>
</head>
<body>
<input type="text" id="myFilter">
<div id="results"></div>
Try this
$states = mysql_query("SELECT name FROM list1 WHERE name LIKE '%".mysql_real_escape_strings($partialStates)."%'");
Instead of this
$states = mysql_query("SELECT name FROM list1 WHERE name LIKE "%$partialStates%"");