jQuery UI dialog - As soon as I add a second Dialog to the App, it breaks?

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开发者_StackOverflow中文版,
    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.

This is where good old classic software engineering comes in handy with the JavaScript. Make a dialog builder method that utilizes an internal unique identifier to create the dialog sets you want.

function dialogBuilder(url){
  var uuid = 0;
  var name = 'dialog_' + uuid++;
  var $elem = $('<div id="' + name + '"></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>');
    }       
  });
  return $elem;
}
var permissions = dialogBuilder('/stuff/');
var dialogstuff = dialogBuilder('/stuff/');

You get the idea, the next obvious step would be to establish the names outside so you could do something like this:

var dialogHandler = {};
function dialogBuilder(dname, url, anchor){
  var uuid = 0;
  var name = 'dialog_' + dname;
  if(dialogHandler[name]){
    var $elem = dialogHandler[name].dialog({open:function(){$.ajax(url)}});
    dialogHandler[name] = $elem;
  }else{
    var $elem = $('<div id="' + name + '"></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>');
      }       
    });
    dialogHandler[name] = $elem;
  }
  $(anchor).live('click',function(){
    dialogHandler[name].dialog('open');
    return false;
  })
}

// to call this above code:
dialogBuilder('dialogstuff2','/stuff/','#addlink');
dialogBuilder('permissions','/stuff/','.teammember-dialog');

written but not tested.