I am currently trying to remove a table row from a dialog box within jQuery, but whenever I try to delete the row, the dialog box closes immediately. Currently the PHP page generates the table and rows for the dialog box. Now to note, this code works perfectly fine without the PHP page call, but by adding the PHP aspect, the dialog box fails to stay open and remove the table row.
I'm not too sure how to tackle this as my experience with jQuery is very limited and I haven't been able to find something on the internet with a similar issue. Any pointers and suggestions are welcome. The ultimate goal is to be able to post from the dialog box form to a database and any help would be appreciated.
The code has been simplified so that the mysql query is not being used, but ultimately I want to be able to pass an unordered list of data into the php page to build a dynamic query and allow the user to submit the form thereafter.
Below is the code separated into two files...
- PHP
<script>
function showTable(str, elementid, page)
{
if (str=="")
{
document.getElementById(elementid).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(elementid).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",page+"?q="+str,true);
xmlhttp.send();
}
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
modal: true,
width: 'auto',
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$('span.delete').on('click', function() {
$(this).closest('tr').find('td').fadeOut(1000,
function(){
// alert($(this).text());
$(this).parents('tr:first').remove();
});
return false;
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<input type=button id="opener" value="PRESS BUTTON!" onclick="showTable('NOTHING', 'dialog', '2pass.php')">
<div id="dialog">
</div>
</body>
- pass.php
<?php
echo "<form method = 'post'>";
echo "<table border='1' name='testTable'>
<thead>
<tr>
<th>Name</th>
<th>Notes</th>
<th>Delete</th>
</tr>
</thead>
";
echo "<tbody>";
echo "<tr>";
echo "<td><input type='text' id='Name' value='Name' disabled></td>";
echo "<td><input type='text' name='notes'></td>";
echo '<td><span class="delete"><a href="">Delete</a></span></td>';
echo "</tr>";
echo "<tr>";
echo "<td><input type='text' id='Name' value='Name' disabled></td>";
echo "<td><input type='text' name='notes'></td>";
echo '<td><span class="delete"><a href="">Delete</a></span></td>';
echo "</tr>";
echo "<tr>";
echo "<td><input type='text' id='Name' value='Name' disabled></td>";
echo "<td><input type='text' name='notes'></td>";
echo '<td><span class="delete"><a href="">Delete</a></span></td>';
echo "</tr>";
echo "</tbody>";
echo "</table>";
echo "</form>";
?>
