Question

Need some help on this. I am clicking on a delete image which is present in one of the cell of one of the row. Once I click the delete image there should be a modal confirmation box asking user to confirm the row delete. Well, the functionality is working but the modal confirmation box does not show up on first click on delete image – but shows up on second click. I wrote console.log when image gets clicked – it logs every time that images is clicked – But the confirmation box does not show up first time. Without the confirmation box logic, if I click on delete image the row gets deleted on first click only.

Here is the code:

$('#example.display tbody tr td img#delete').live('click', function(){
  console.log("Delete clicked");

  var oTable = $('#example').dataTable();
  var nRow = $(this).closest("tr").get(0);
  var aData = oTable.fnGetData(nRow);

  ("#DeleteConfirmationModalWindow").html('<h6>'+'Are you sure you wish to delete order:'+'<br />'+aData[0]+'?'+'</h6>');
  $("#DeleteConfirmationModalWindow").dialog('open');

  $("#DeleteConfirmationModalWindow").dialog({
      title: "Delete Confirmation",
      autoOpen: false,
      dialogClass: "DeleteConfirmationModalWindow",
      closeOnEscape: false,
      draggable: false,
      width: 400,
      height: 200,
      modal: true,
      buttons: {
            "Yes, I'm sure": function() {
                $( this ).dialog( "close" );
                console.log("Delete");
                deleteDatabaseRow(oTable, nRow);    
                oTable.fnDeleteRow(nRow);
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                console.log("No delete");
            }
        },
    resizable: false,
    open: function() {
              $('body').css('overflow','hidden');
          },
    close: function() {
              $('body').css('overflow','auto');
          }
    });                     
});

Please help! Thanks!

Answer 1

There is a mistake in your code. Your are calling $("#DeleteConfirmationModalWindow").dialog('open'); before creating your dialog.

First, remove $("#DeleteConfirmationModalWindow").dialog('open'); and your option autoOpen: false and let me know if it works or not.

.live is deprecated if you are using jQuery 1.4+ see Here. Simply use .click instead.