jQuery dialog box not opening 2nd time

Question

I found this thread which basically has the same issue I have. But their solution is not working for me.

The dialog appears the first time I click the submit button, but not the 2nd time. I'm opening the dialog box after a form submission.

UPDATE

I finally got it working. Here is the correct code:

   if (jQuery('#registrationforms').length > 0) {
     //instantiate the dialog 
     jQuery("#dialog").dialog({ modal:true, autoOpen:false });

     //Some more code here to call processRegistration function.
   }

  function processRegistration(instanceID, formData)
  {

    jQuery.post("mypath/jquery_bll.php", { instance: 'processRegistration', formData : formData, instanceID : instanceID },
      function(feedback)
      {
        jQuery('#dialog').text(feedback.message);
        jQuery('#dialog').parent().addClass(feedback.type);
        jQuery('#dialog').dialog('open');
      },"json");

  }

Since I'm dynamically applying css class, I have to make sure to add it to the outer DIV which $.dialog creates to wrap my 'dialog' DIV.

Answer 1

I think the highly voted answer by RayLehman in the post that you referenced is the correct solution.

jQuery UI's dialog() function actually creates a dialog out of some content. You aren't actually calling "open" on the dialog anywhere.

Once the dialog is created by calling dialog() the first time, you just need to call dialog("open") or dialog("close"), rather than re-creating the actual dialog object every time.

Answer 2

This sounds like you've wrapped your open event up with the init call. You need to make sure that you initialise your dialog first - typically setting the autoOpen property to false - and then have a separate click event for to open your dialog.

Read this article to explain it in detail.

Answer 3

Don't use dialog() to both initialize the dialog and open it at the same time. I made this mistake too.

First initialize the dialog, then open it in the callback like so:

jQuery('#dialog').dialog({ autoOpen: false });

function processRegistration(instanceID, formData) {
jQuery.post(...,
  function(feedback) {
    var dialog = jQuery('#dialog');
    dialog.text(feedback.message);
    dialog.addClass(feedback.type);
    dialog.dialog('open');
  }, "json");
};

Answer 4

This is what you are exactly looking for: http://praveenbattula.blogspot.com/2009/08/jquery-dialog-open-only-once-solution.html