Not able to open the Jquery Modal Dialog Again and again

Question

I have a hyper link at the footer of the page which open a form in the jquery Dialog we call it as M1.Than i enter all the information and click on "create " which creates a user. while creating a new user i show small modal( "we call it as M2") saying " Please wait ..some message"

Now my problem is iam not able to display the ("M2")modal saying " Please wait ..some message" while i keeep on creating a new user everytime when i stay on("M1"). first time it is coming ("M1") and next time it doesnot display again .How ever when closing iam destroying and removing the dialog. (It is due to other issue)

here is Code.

<div id="m2" style="visibility:hidden">
    <img src="spinningwheel" border="0" align="middle" hspace="20" vspace="5"/> Creating USER...
</div>

$(document).ready(function() {  
    displaydialog();    
});

function displaydialog(){   
    $('#m2').dialog({
        autoOpen: false,
        height: 100,
        width: 250,
        modal: true,
        close: function() {
              $(this).dialog('destroy');
              $(this).remove();           
            }
    }); 
}

 $("#btncreate").click(function (){
    $("#m2").removeAttr('style');          
     displaydialog();
    $("#m2").dialog('open');
    //get a json request based on data if suceess 
    if(success){
         $("#m2").dialog('close');
    }else{
         $("#m2").dialog('close');
    }   

 });

Answer 1

@Derby,

    $(document).ready(function() {  
        displaydialog();    
    });

    function displaydialog(){   
        $('#m2').dialog({
            autoOpen: false,
            height: 100,
            width: 250,
            modal: true,
/*            close: function() { // No need to Destroy the dialog
                  $(this).dialog('destroy');
                  $(this).remove();           
                }*/
        }); 
    }

     $("#btncreate").click(function (){
       // $("#m2").removeAttr('style');          
        // displaydialog();
        $("#m2").dialog('open');
        //get a json request based on data if suceess
        // if you are using ajax post, try to close this box as part of response handler ( success/error).
jQuery.ajax({
            data : {somekey : somevalue},
            datatype: 'json',
            error : function(jqXHR, textStatus, errorThrown) {
                $("#m2").dialog('close');
            },
            success : function(data, textStatus, jqXHR) {
                $("#m2").dialog('close');
            },
            type : 'GET',
            url : 'dummyURL'
        });
    /*    if(success){
             $("#m2").dialog('close');
        }else{
             $("#m2").dialog('close');
        }   */

     });

You don't have to destroy and create M2 dialog everytime. just call displaydialog() once on document ready, and then just use open and close on the dialog. You are not seeing the dialog because, dialog(close) would be called just after calling your ajax get request ( in case you are using async : true). So, close M2 dialog on success/error from the ajax request.

Answer 2

If you re using ajax to retrieve the new data, the browser will renderize the web again (not loading, renderize it) so you wont have anymore the dom ready. Try to call displaydialog and then open it. It will work. Anyway, there's a better way to do that, i think your problem is logic. But that solution will work.