I've got this php page where I do a search which returns data from the database. The data is showed in a html table, and in each one of the items there's an option to delete the item. When I click on this delete button, it is supposed to open a dialog (I'm using jquery ui) in which I have to chose if I want to cancel or confirm the operation. Everything was working fine, then I noticed that the dialog only works in the first item of the table. When I click on the other ones, they just complete the delete operation with no confirmation. Here is the code, I'd be glad if someone could help me on this:
我有这个php页面，我在那里进行搜索，从数据库返回数据。数据显示在html表中，并且在每个项目中都有一个删除项目的选项。当我点击这个删除按钮时，它应该打开一个对话框（我正在使用jquery ui），如果我要取消或确认操作，我必须选择该对话框。一切都很好，然后我注意到对话框只能在表格的第一项中使用。当我点击其他的时，他们只是完成删除操作而没有确认。这是代码，如果有人可以帮助我，我会很高兴：
action.js
action.js
(...)
var buttonClicked = false;
$(function(){
$('#delete').click(function(event){
if(!buttonClicked){
event.preventDefault();
$('#dialogConfirm').dialog('open');
}
});
$('#dialogConfirm').dialog({
autoOpen: false,
modal: true,
width: 250,
height: 225,
buttons: {
"No": function() {
buttonClicked = false;
$(this).dialog('close'); },
"Yes": function() {
buttonClicked = true;
$(this).dialog('close');
document.forms['formdelete'].submit();}
}
});
});
(...)
mypage.php (the relevant part of the function that generates the table)
mypage.php（生成表的函数的相关部分）
(...)
function listResults($query, $num, $type) {
if($tipo == "product") {
if($num > 1) {
echo "<hr>";
echo "<h3>$num occurrences were found:</h3>";
echo "<div id='dialogConfirm' title='Warning!'><p>Are you sure you want to delete it?</p></div>";
echo "<table id='table1'>";
echo "<tr><td><b>Product</b></td> <td><b>Label</b></td></tr>";
while($row = mysql_fetch_assoc($query)) {
echo "<tr id='icons'><td>" . $row['product'] . "</td><td>" . $row['label'] . "</td>
<td><form action='#' method='POST'><button class='ui-state-default ui-corner-all' title='View'><span class='ui-icon ui-icon-image'></span></form></td>
<td><form action='editProduct.php' method='POST'><input type='hidden' name='id' value='".$row['id']."' /><button class='ui-state-default ui-corner-all' title='Edit'><span class='ui-icon ui-icon-pencil'></span></form></td>
<td><form action='delete.php' method='POST' id='formdelete'><input type='hidden' name='produto' value='".$row['id']."' /><button class='ui-state-default ui-corner-all' id='delete' title='Delete'><span class='ui-icon ui-icon-trash'></span></form></td></tr>";
}
echo "</table>";
}
else {
if($num == 0) {
echo "<h1>No occurrence was found.</h1>";
}
else {
echo "<h1>$num occurrence was found:</h1>";
while($array = mysql_fetch_assoc($query)) {
echo "<li>" . $array['product'] . "</li>" . $array['label'] . "<br><br>";
}
}
}
(...)
the generated html:
生成的html：
<div id='dialogConfirm' title='Warning!'><p>Are you sure you want to delete it?</p> </div>
<table id='table1'>
<tr>
<td><b>Product</b></td>
<td><b>Label</b></td>
</tr>
<tr id='icons'><td>IBP</td><td>Dixtal</td>
<td><form action='#' method='POST'>
<button class='ui-state-default ui-corner-all' title='View'><span class='ui-icon ui-icon-image'></span></button>
</form></td>
<td><form action='editProduct.php' method='POST'>
<input type='hidden' name='id' value='7' /><button class='ui-state-default ui-corner-all' title='Edit'><span class='ui-icon ui-icon-pencil'></span></button>
</form></td>
<td><form action='#' method='POST' id='formdelete'>
<input type='hidden' name='product' value='7' /><button class='ui-state-default ui-corner-all' id='delete' title='Delete'><span class='ui-icon ui-icon-trash'></span></button>
</form></td>
</tr>
//and then this line of the table is repeated all over again, with different values on each iteration
</table>
EDIT Problem solved. I changed the id delete to a class and removed the buttonClicked flag from the js.
编辑问题解决了。我将id删除更改为一个类，并从js中删除了buttonClicked标志。
$(function(){
$('.delete').click(function(event){
event.preventDefault();
$('#dialogConfirm').dialog('open');
});
$('#dialogConfirm').dialog({
autoOpen: false,
modal: true,
width: 250,
height: 225,
buttons: {
"Não": function() {
$(this).dialog('close');},
"Sim": function() {
$(this).dialog('close');
document.forms['formdelete'].submit();
}
}
});
});
1 个解决方案
#1
0
Change your code to this:
将您的代码更改为：
$('#delete').click(function(event){
event.preventDefault(); //take event.preventDefault() out of if statement
if(!buttonClicked){
$('#dialogConfirm').dialog('open');
}
});
It is not preventing the default behavior the second time around because it is not running the if statement after the buttonClicked var gets changed to true. The form just submits without the dialog.
它不是第二次阻止默认行为，因为在buttonClicked var变为true后它没有运行if语句。表单只是在没有对话框的情况下提交。
The dialog is not opening again because when buttonClicked flag is true when Yes is clicked in the dialog.
该对话框未再次打开，因为当在对话框中单击“是”时，buttonClicked标志为true。
It's hard to tell from the code what the purpose of the buttonClicked flag is.
很难从代码中看出buttonClicked标志的用途是什么。
#1
0
Change your code to this:
将您的代码更改为：
$('#delete').click(function(event){
event.preventDefault(); //take event.preventDefault() out of if statement
if(!buttonClicked){
$('#dialogConfirm').dialog('open');
}
});
It is not preventing the default behavior the second time around because it is not running the if statement after the buttonClicked var gets changed to true. The form just submits without the dialog.
它不是第二次阻止默认行为，因为在buttonClicked var变为true后它没有运行if语句。表单只是在没有对话框的情况下提交。
The dialog is not opening again because when buttonClicked flag is true when Yes is clicked in the dialog.
该对话框未再次打开，因为当在对话框中单击“是”时，buttonClicked标志为true。
It's hard to tell from the code what the purpose of the buttonClicked flag is.
很难从代码中看出buttonClicked标志的用途是什么。