How to change simple javascript confirm into a Jquery dialog box confirm when deleting?

Question

I am tying to create a Jquery conform dialog box for delete confirmation. The problem is it doesn't work when I do the Jquery stuff. I am going to post the javascript confirm box so that I can learn on how to change it into the Jquery dialog box confirm.

    //for delete confirm box
 var del = function($element) {
    $('.remove').dialog({
        title: 'Delete',
        resizable: true,
        modal: true,
        hide: 'fade',
        width: 350,
        height: 275,
        buttons: {
          "Delete item": function() {
            $(this).dialog("close");
            $element.data('allow', true); // Allow the next click to proceed
            $element[0].click(); // Hit the DOM native click event
          },
          Cancel: function() {
            $(this).dialog("close");
          }
        }
      });
    }

    $('.delete').click(function(e) {
      if (!$(this).data('allow')) {
        e.stopImmediatePropagation();
        del($(this));
      }
    });

    $('.delete').click(function() {
        $(this).closest('.delete').hide();
    });

PHP code:

<tr align='center'> 
        <td><font color='black'><?php echo $test['BookID'];?></font></td>
        <td><font color='black'><?php echo $test['Title'];?></font></td>
        <td><font color='black'><?php echo $test['Author'];?></font></td>
        <td><font color='black'><?php echo $test['PublisherName'];?></font></td>
        <td><font color='black'><?php echo $test['CopyrightYear'];?></font></td>    
        <td><a class="edit" href='view.php?BookID=<?php echo $test['BookID'];?>' title="Edit">Edit</a>
        <div id="register" ></div>
        <td><a class="delete" href ='del.php?BookID=<?php echo $test['BookID'];?>' title="Delete"><center>Delete</center></a> <!----for deleleting ---->        
        <div id="remove" ></div>
    </tr>

Answer 1

The (only?) advantage of confirm() is that is happens synchronously and no other code proceeds until you select an answer. This allows you to return the result from a click handler to decide if the click should proceed.

Any custom method of displaying a dialog requires the code to continue, else the dialog will not render. This means all interaction with dialogs has to be asynchronous. You need to respond to the yes/no answer many frames later.

One solution:

• Stop the click event from proceeding (unless a certain property is present)
• Open the dialog
• Get a yes/no answer
• If the answer is yes set a flag on the element to allow the click to proceed normally, then simulate a click event on the original element.

Now jQuery Dialog does not support this out of the box, but it would not be hard to write.

Working Example: https://jsfiddle.net/TrueBlueAussie/f9u500zr/

$('.del').click(function(e) {
  if (!$(this).data('allow')) {
    e.stopImmediatePropagation();
    del($(this));
  }
});

and in the dialog settings I set the flag and click the button again:

buttons: {
  "Delete item": function() {
    $(this).dialog("close");
    $element.data('allow', true); // Allow the next click to proceed
    $element[0].click(); // Hit the DOM native click event
  },

Notes:

• I simply store an allow data flag on the button to let me know the next click should be allowed to proceed.
• As this example uses click handlers for the delete and the prompt, I use stopImmediatePropagation to stop the command processing. For links or forms you would want to use e.preventdefault()
• For stopImmediatePropagation to work in this example, the order that the events are registered is important. If you reverse the order of the tow event handlers at the end of my example, you will see the item deleted then the dialog appears! eg https://jsfiddle.net/TrueBlueAussie/f9u500zr/1/