Question

This code works but the element with class “genbutton-delete” needs to be clicked twice to work. Can somebody help me please?

$(document).ready(function(){                                                                                                                               
$(".genbutton-delete").click(function(){                                                                                                                
    var id = $(this).attr("id");                                                                                                                        
    $("#del-"+id+"").dialog("open");                                                                                                                    
    var dialogOpts = {                                                                                                                                  
        modal: true,                                                                                                                                    
        bgiframe: true,                                                                                                                                 
        autoOpen: false,                                                                                                                                
        width: 400,                                                                                                                                     
        buttons: {                                                                                                                                      
            "Delete": function() {                                                                                                                      
                $.ajax({                                                                                                                                
                    type: "post",                                                                                                                       
                    url: ""+siteURL+"/a/delete?media="+id+"",                                                                                           
                    data: "delete=1",                                                                                                                   
                    success: function(data) {location.href="?delete=1";}                                                                                
                });                                                                                                                                     
            },                                                                                                                                          
            "Cancel": function() {$(this).dialog("close");}                                                                                             
        },                                                                                                                                              
        open: function() {                                                                                                                              
            $("#del-"+id+"").load(""+siteURL+"/a/delete?media="+id+"");                                                                                 
            $("#loader-"+id+"").show();                                                                                                                 
        }                                                                                                                                               
    };                                                                                                                                                  
    $("#del-"+id+"").dialog(dialogOpts);                                                                                                                
    return false;                                                                                                                                       
});                                                                                                                                                     

});

Answer 1

You try to open the dialog before initializing it !

First click, you dialog gets initialized.

$("#del-"+id+"").dialog("open"); // does nothing
// init the dialog but does not open because autoOpen: false
$("#del-"+id+"").dialog(dialogOpts);  

Second click it is finally opened.

---

Either, move the call to method “open” after the init and before the return false;

$("#del-"+id+"").dialog(dialogOpts);
$("#del-"+id+"").dialog("open");
return false;

Or change the option autoOpen to true and remove the “open” method call

//$("#del-"+id+"").dialog("open");                                                                                                                    
var dialogOpts = {                                                                                                                                  
    ...                                                                                                                               
    autoOpen: true,                                                                                                                                
    ...                                                                                                                                               
};                                                                                                                                                  
$("#del-"+id+"").dialog(dialogOpts);