Initiate jQuery UI Dialog from a result of AJAX call

Question

I have Page A which calls Page B using AJAX. Page B will be put in a div container in Page A. Within the result (which is Page B), there's a code that will initiate a jQuery UI Dialog. The div for the dialog is also in Page B. However, it doesn't work. I'd have to put the initiation code in Page A. So, if I want to put the initiation code in Page B, what should I do ?

The initiation code:

$('#dialog').dialog({
    bgiframe: true,
    autoOpen: false,
    width: 300,
    height: 300,
    modal: true,
    resizable: false,        
    buttons: {
        'Create an account': function() { },
         Cancel: function() { }
    },
    close: function() { }
});

I've also tried using $('div.dialog') as the selector (changed the id to class) and it does work, but everytime I request Page B (without reloading Page A), the dialog will multiply. For an example, the first time I requested Page B, one dialog will be opened. The second time I requested Page B, two dialogs will be opened.

Answer 1

Your approach isn't far off, you're just duplicating the dialog on the call when loading each time, so destroy the previous one, so instead of this:

$('div.dialog').dialog({ ...options... });

Call this:

$('div.dialog').dialog('destroy').dialog({ ...options... });

This prevents multiple dialogs from being instantiated for the same element. Alternatively, you can check if the dialog has been created on that element yet, like this:

$('div.dialog').filter(function() {
  return $(this).closest('.ui-dialog').length === 0;
}).dialog({ ...options... });

This creates the dialog only on <div class="dialog"> elements that aren't already wrapped in a dialog.

Answer 2

You could do that using jQuery live function with custom event binding. Everytime you make a call to Page B, you would have to trigger your custom event, so that the new dialog element can be binded in the event handler. The initiation code would have to be still in Page A if you follow this method.