在另一个对话框的功能中更改 jQuery-UI 对话框的标题答案

【问题标题】：Changing the title of jQuery-UI dialog-box with in another dialog-box's function在另一个对话框的功能中更改 jQuery-UI 对话框的标题
【发布时间】：2011-01-27 11:43:03
【问题描述】：

为什么第二个 jQuery-UI 对话框的标题在弹出时没有改变。第一个对话框我使用以下.attr("title", "Confirm") 更改了框的标题——它将第一个框的标题更改为“确认”，就像它应该有的那样。现在，当第二个框弹出时，它应该将标题更改为“消息”，因为对第二个框做了同样的事情——.attr("title", "Message")。正确的？但它没有。它保留了以前的标题。但是，消息会发生应有的变化。我已经在 IE8、Chrome 和 FF3.6 中测试过。

<div id="dialog-confirm" title=""></div>

Javascript / jQuery

$('#userDelete').click(function() {
$(function() {
var dialogIcon = "<span class=\"ui-icon ui-icon-alert\"></span>";
var dialogMessage = dialogIcon + "Are you sure you want to delete?";
$("#dialog-confirm").attr("title", "Confirm").html(dialogMessage).dialog({
    resizable: false,
    height:    125,
    width:     300,
    modal:     true,
    buttons:  {
    'Delete': function() {
        $(this).dialog('close');
        $.post('user_ajax.php', {action: 'delete',
                 aId: $('[name=aId]').val()
        }, function(data) {
            if(data.success){
                var dialogIcon = "<span class=\"ui-icon ui-icon-info\"></span>";
                var dialogMessage = dialogIcon + data.message;
                $('#dialog-confirm').attr("title", "Message");
                $('#dialog-confirm').html(dialogMessage);
                $('#dialog-confirm').dialog({
                    resizable: false,
                    height:    125,
                    width:     300,
                    modal:     true,
                    buttons:  {
                    'Okay': function() {
                        $(this).dialog('close');
                        var url = $_httpaddress + "admin/index.php"
                        $(location).attr('href',url);
                    } // End of Okay Button Function
                    } //--- End of Dialog Button Script
                });//--- End of Dialog Function
            } else {
                $_messageConsole.slideDown();
                $_messageConsole.html(data.message);
            }
        }, 'json');
    }, //--- End of Delete Button Function
    'Cancel': function() {
        $(this).dialog('close');
    } //--- End of Cancel Button Function 
    } //--- End of Dialog Button Script
}); //--- End of Dialog Script
}); //--- End of Dialog Function
return false; 
});

感谢您的助手，如果您选择提供帮助。

【问题讨论】：

标签： jquery html jquery-ui

【解决方案1】：

jQuery UI Dialog 还提供了一种方法“option”，允许您更改对话框上的选项，而无需重新配置整个内容。因此，如果您只想使用新标题再次显示相同的对话框，您可以使用以下内容：

$('#dialog-confirm').dialog("option", "title", "Message");
$('#dialog-confirm').dialog("open");

请参阅jQuery documentation on Dialog "option"。

【讨论】：

简单而完美..就是这样
这应该是公认的答案。它简单、甜美、简洁且有效。

【解决方案2】：

无需检查所有代码。我猜$('#dialog-confirm').attr("title", "Message"); 第二次不起作用，因为 jQuery UI Dialog 已经对实际的 DOM 进行了更改。因此，更改 div 的 title 属性不会做任何事情。因为实际的标题可能是一些 div/p 或由 jQuery UI Dialog 生成的类似名称。

您第二次致电$('#dialog-confirm').dialog({..}) 只是用新选项更新现有对话框。

查看 jQuery UI Dialog 文档，您应该注意到您可以简单地传入一个标题选项。所以第二次而不是

$('#dialog-confirm').attr("title", "Message");
$('#dialog-confirm').html(dialogMessage);
$('#dialog-confirm').dialog({
  resizable: false,
  height:    125,
  width:     300,
  ...
});

随便用

$('#dialog-confirm').html(dialogMessage);
$('#dialog-confirm').dialog({
  resizable: false,
  height:    125,
  width:     300,
  ...
  "title", "Message" //NEW!
});

【讨论】：

你说的有效。谢谢你的帮助。下次在我发布与 jQuery 相关的问题之前，我会先查看文档。再次感谢你，jitter。
"title","message" 似乎对我不起作用，但以下方法对我有用：title: "Message"。

【解决方案3】：

这对我有用（我使用 firebug 来获取元素名称）..

document.getElementById("ui-dialog-title-"+formname).innerHTML = "New title";

【讨论】：

【解决方案4】：

您可以通过 id 设置对话框标题，下面是 100% 工作示例代码

$( "#json_box" ).dialog({minHeight: 433,minWidth:550,"title":"Json to Template"});

【讨论】：