Question

我在我的Rails 3网络应用程序中添加了一个jQuery UI对话框，如下所示：

 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;
});

让我感到困惑的是，我刚刚在我的应用中添加了另一个对话框，如下所示：

 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;
});

使用第二个对话框，它会中断两个对话框。它们都打开但它们不响应对话框调用Web服务器时加载的JS。如果我删除第二个，第一个工作正常。但当两者都在页面上时，当我点击加载时，对话框仍然显示默认加载文本“loading ...”

之前有人见过吗？感谢

Answer 1

我在代码中注意到的一件事是对话框的外部div的id为dialog-content。你可能想让它们与众不同，看看会发生什么，因为浏览器/ jQuery可能不喜欢它。

Answer 2

这是优秀的老式经典软件工程在JavaScript中派上用场的地方。创建一个对话框构建器方法，该方法使用内部唯一标识符来创建所需的对话框集。

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/');

你明白了，下一个明显的步骤就是在外面建立名字，这样你就可以做到这样的事情：

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');

已写但未经过测试。

jQuery UI对话框 - 只要我向应用程序添加第二个Dialog，它就会中断？

2 个答案: