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.