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:(
2 Answers 2
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');
});
answered Dec 8, 2013 at 5:49
j08691
209k33 gold badges269 silver badges281 bronze badges
Sign up to request clarification or add additional context in comments.
1 Comment
Joachim Isaksson
+1, although going up to
$('#result') may be enough in this case.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>
answered Dec 8, 2013 at 6:09
Ashish Jain
7701 gold badge8 silver badges24 bronze badges
Comments
default