jQuery UI对话框 - 只要我将第二个对话框添加到应用程序，它会打破？

我添加一个jQuery用户界面对话框，以我的Rails 3 web应用程序如下：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。如果我删除第二个，第一个可以正常工作。但是，当两者都在页面上时，当我点击加载，对话框仍然保持默认的加载文本“正在加载...”

以前有人看过这个吗？谢谢

来源

2010-11-01 AnApprentice

我在代码中注意到的一件事是对话框都有一个外部div，其ID为dialog-content。你可能想让它们不同，看看会发生什么，因为浏览器/ jQuery可能不会那样。

来源

2010-11-01 00:22:11 amarsuperstar

谢谢，这似乎是一个问题。但拥有不同的ID似乎不太干？有没有办法使它使用相同的ID，所以事情不会变得疯狂混乱，因为我的应用程序可能会有多个对话框？...还有很多对话框设置是相同的，有没有办法将它设置为所有的对话框，只需添加自定义对话框的属性，如每个对话框的帖子URL？ – AnApprentice 2010-11-01 00:24:00

关于DRY，ID是为了在页面中独一无二的，所以浏览器和jQuery会利用它来获得性能和其他原因。也许使ID反映对话框的目的将有所帮助？至于全局设置，我敢说这是可能的一个小封装函数，但是最好作为一个单独的问题提出，因为我的Javascript仍然是新手:) – amarsuperstar 2010-11-01 00:30:55

DRY主体最好通过创建包装器方法，构建器或工厂在JavaScript中处理作为@ a，arsuperstar提到。我在下面用一些说明这个想法的方法回答。 – Gabriel 2010-11-01 00:59:41

这是一个很好的旧的经典软件工程与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');

写，但未经测试。

来源

2010-11-01 00:55:03 Gabriel

jQuery UI对话框 - 只要我将第二个对话框添加到应用程序，它会打破？

回答

相关问题