Question

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:

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)

(...)
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:

<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.

 $(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();
             }
         }            
      });          
   });

Answer 1

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.

The dialog is not opening again because when buttonClicked flag is true when Yes is clicked in the dialog.

It’s hard to tell from the code what the purpose of the buttonClicked flag is.