jquery Modal dialog with edit/delete for table rows
Here's my goal: have a table of data with edit/delete buttons. The edit buttons open a modal dialog with the form pre-populated with the details for the appropriate row. I have had trouble getting the ajax to work to actually fill out the form on the fly, so I'm just opening an edit page inside the modal and passing the id. It works great.开发者_如何转开发..for the first edit button. Nothing at all happens on subsequent edit buttons. I'm at a loss. I'm no javascript or jquery expert, but have googled away and haven't found anything to handle my situation (or that I could successfully adapt). I'm pretty sure it involves .each and/or .sibilngs, but I'm not sure how to implement. Here is all code, as it stands, other than styles and some PHP for validating users:
<link type="text/css" href="js/css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<!--<script type="text/javascript" src="js/js/jquery-1.4.4.min.js"></script>-->
<script type="text/javascript" src="js/jquery-1.5.1rc1.js"></script>
<script type="text/javascript" src="js/js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
//table highlights & such
$(document).ready(function() {
$(".striped tr").mouseover(function() {
$(this).addClass("highlight");
});
$(".striped tr").mouseout(function() {
$(this).removeClass("highlight");
});
$(".striped tr").toggle(function() {
$(this).addClass("selected");
}, function () {
$(this).removeClass("selected");
});
$(".striped tr:nth-child(odd)").addClass("odd");
});
$(function(){
$('#edit_number').dialog({ autoOpen: false,width: 400,height: 500, modal:true, open: function() {
var editqs = 'process.php?action=edit_num_form&id=' + $(this).data('num_id') + '&rep_id=<?php echo $rep_id ?>';
$("#edit_number").load(editqs);
}
});
$('.edit_number_link').live('click', function() {
var id = $(this).closest('tr').data('id');
$("#edit_number").data('num_id', id).dialog('open');
return false;
});
});
</script>
</head>
<body>
<table style="border: 1px solid #000;" border=1 cellpadding=0 cellspacing=0 class="striped">
<thead>
<tr style="background-color: #ccc;">
<th align=left width=100>Name</th>
<th align=left width=100>External</th>
<th align=left width=100>Internal</th>
<th align=left width=50>Options</th>
<th align=left width=50>Hours</th>
<th align=left width=150>Notes</th>
<th colspan=2> </th>
</tr>
</thead>
<?php
//db connection stuff
while($row = mysql_fetch_array($result))
{
$name = $row['name'];
$external = $row['external'];
$internal = $row['internal'];
if ($internal == "")
$internal = " ";
$options = $row['options'];
if ($options == "")
$options = " ";
$hours = $row['hours'];
if ($hours == "")
$hours = " ";
$comments = $row['comments'];
if ($comments == "")
$comments = " ";
$id = $row['id'];
echo "<tr data-id=".$id."><td>" . $name . "</td>";
echo "<td>" . build_link($external,$rep_id, "ext", $userfound) . "</td>";
echo "<td>" . $internal . "</td>";
echo "<td>" . $options . "</td>";
echo "<td>" . $hours . "</td>";
echo "<td>" . $comments . "</td>";
//echo "<td><a href='process.php?action=edit_num_form&id=" . $id . "&rep_id=".$rep_id."' title='Edit'><img src='edit.png' alt='Edit' border='0'></a></td>";
echo "<td><a href='#' title='Edit' class='edit_number_link'><img src='edit.png' alt='Edit' border='0'></a></td>";
echo "<td><a href='process.php?action=delete_num&id=" . $id . "&rep_id=".$rep_id."' title='Delete'><img src='delete.png' alt='Delete' border='0'></a></td>";
//echo "<td><a href='?action=delete' class='delete'>Delete</a></td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
<div id="edit_number" title="Edit Number">
</div>
</body>
</html>
So ideally, I can retrieve my data from each edit button to load the form in a real modal (not an external page), but at a minimum, need the additional instances to work.
Any help would be appreciated. Thanks!
Since I can't see the entire code set...Is #edit_number_link inside of #edit_number? If so, you'll need to use jQuery's live() method to bind the event as the DOM is being updated after the initial page load.
Also, you don't need the attr('data-id') as jQuery now will map these attributes to the .data() method. You need .data('id') to retreive this value.
Another thing is that you're using an ID when you should be using a class. IDs are suppose to be unique and only used once. You should change #edit_number_link to a class, .edit_number_link. I'm not sure which container is #edit_number but I am assuming that there is just one.
$('.edit_number_link').bind('click', function() {
var id = $(this).closest('tr').data('id');
$("#edit_number").data('num_id', id).dialog('close').dialog('open');
return false;
});
UPDATE Aftering seeing the code and actually trying it out on jsfiddle, I found that what is happening is that when you click on the other edit links, the dialog window is already open and doesn't fire it's open callback. What you need to do it update the code so that the dialog is closed before you open it. My code above is updated to include .dialog('close'). Also, I've changed live back to bind as it's not needed in this case.
As you got the same ID 'edit_number_link" you should try :
$("#edit_number_link").each(function() {
$(this).click(function(){
var id = $(this).closest('tr').attr('data-id');
$("#edit_number").data('num_id', id).dialog('open');
return false;
});
});
Or something like that.
加载中,请稍侯......
精彩评论