I have been writing a script that opens a dialog box and within the dialog box there is a dynamic table with data pulled out of one of my databases. I have put delete buttons next to all the records so that staff can remove unnecessary records.
I was trying to use an click function that triggers an Ajax request which then deletes the record from the database instantly.
But what happens is that when I click the delete button it closes the dialog box and doesn't delete anything at all. I have copied my code bellow if that is of any help.
all help is greatly appreciated :)
//including all jquery library
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
buttons: {
"Add to Log": function() {
$.ajax({
type: 'POST',
url: "check_add.php",
data: $('#checkup').serialize(),
success: function(data) {
if(data == 0){//Failure
alert('Data was NOT saved in db!');
}
}
});
$( this ).dialog( "close" );
},
Exit: function() {
$( this ).dialog( "close" );
}
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
$( "#reminder" ).dialog({
width: 471,
autoOpen: false,
buttons: {
Exit: function() {
$( this ).dialog( "close" );
}
}
});
$( "#remind" ).click(function() {
$( "#reminder" ).dialog( "open" );
return false;
});
$(".Delete").click(function() // here the delete function
{
var $this = $(this);
var rowid = $this.attr('name');
$.ajax({
type: "POST",
url: 'check_del.php',
data: {
'id': rowid
},
success: function(data) {
if(data == 1){//Success
alert('Sucess');
}
if(data == 0){//Failure
alert('Data was NOT saved in db!');
}
}
});
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<button id="opener">Add Damage</button>
<button id="remind">Reminder</button>
<div id="dialog" style="font-size:small;">
<form name="checkup" method="post" id="checkup">
<table>
<tr><td>
<strong>Cases:</strong></td><td><input name="cases" type=text placeholder="Cases ID" maxlength="7" style="width:129px;"></td>
</tr>
<tr>
<td><strong>Comments:</strong></td>
<td> <textarea name="comment" placeholder="Comments Box"></textarea></td>
</tr>
</table>
</form>
</div>
<?php
//database connection stuff
$sql="select * from $tbl_name";
$result=mysql_query($sql);
?>
<div id="reminder" style="font-size:small;">
<form name="remind" method="post" id="remind">
<table bordercolor="#000000" border="1" style="border:thin;">
<th>Class</th>
<th>Cases</th>
<th>First Name</th>
<th>Last Name</th>
<th>Model</th>
<th>Comments</th>
<th> </th>
<?
while($rows=mysql_fetch_array($result)){
$cases=strtoupper($rows['cases']);
?>
<tr>
<td><? echo $rows['hg']; ?></td>
<td><? echo $cases;?></td>
<td><? echo $rows['firstname']; ?></td>
<td><? echo $rows['surname']; ?></td>
<td><? echo $rows['model']; ?></td>
<td><? echo $rows['comments']; ?></td>
<td><button name="<?php echo $rows['id']; ?>" class="Delete">Delete</button></td>
</tr>
</table>
<?
}
?>
</form>
</div>
try this
$(".Delete").live('click',function() {
// your code go here
});
After a lot of testing i changed my code slightly. I have pasted the working section of html for the button and the jquery code
HTML BUTTON
<input name="<? echo $rows['id'];?>" type="button" value="Delete" />
Jquery function
$("input[type='button']").on('click', function() {
var $this = $(this);
var userid = $this.attr('name');
$.ajax({
type: "GET",
url: 'check_del.php',
data: {
'id': userid
},
success: function(data) {
if(data == 1){//Success
alert('Sucess');
}
if(data == 0){//Failure
alert('Data was NOT saved in db!');
}
}
});
});