jQuery UI dialog - as soon as I add a second dialog to the application, it crashes

advertisements

I have add a jQuery UI Dialog to my Rails 3 web app as follows:

 permissions = $('<div id="dialog-content"></div>')
.html('<div class="notification"><h4>Loading...</h4></div>')
.dialog({
    autoOpen: false,
    dialogClass: 'dialog',
    width: 460,
    minHeight: 80,
    position: ['center',130],
    open: function() {
        $.ajax({url: '/stuff/'})
    },
    close: function() {
        $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
    }
});

$(".teammember-dialog").live("click",function(){
    permissions.dialog('open');
    return false;
});

What's puzzling to me is I just added another dialog to my app as follows:

 dialogstuff2 = $('<div id="dialog-content"></div>')
.html('<div class="notification"><h4>Loading...</h4></div>')
.dialog({
    autoOpen: false,
    dialogClass: 'dialog',
    width: 460,
    minHeight: 80,
    position: ['center',130],
    open: function() {
        $.ajax({url: '/stuff/'})
    },
    close: function() {
        $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
    }
});

$("#addlink").live("click",function(){
    dialogstuff2.dialog('open');
    return false;
});

With the 2nd dialog, it breaks both dialogs. They both open but they don't respond to the JS that is loaded when the dialog calls the webserver. If I remove the 2nd one the first works fine. But when both are on the page, when I click to load either, the dialog stands still with the default loading text "loading..."

Anyone seen this before? thanks


One thing that I notice in your code is both the dialogs have an outer div with an id of dialog-content. You may want to make them different and see what happens as the browser/jQuery may not like that.