在另一个对话框的函数中更改jQuery-UI对话框的标题

时间:2010-03-14 22:04:23

标签: jquery html jquery-ui

为什么弹出时不会更改第二个jQuery-UI对话框标题。第一个对话框我使用以下.attr("title", "Confirm")更改了框的标题 - 它将第一个框的标题更改为“确认”,就像它应该具有的那样。现在当弹出第二个框时,它应该将标题更改为“消息”,因为对第二个框执行相同的操作 - .attr("title", "Message")。对?但它没有。它保留了之前的标题。但是,消息会像它应该的那样改变。我已经在IE8,Chrome和FF3.6中进行了测试。

<div id="dialog-confirm" title=""></div>&lt; - 这是jQuery函数之前的html。

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

如果您选择帮助,请感谢您的助手。

4 个答案:

答案 0 :(得分:20)

jQuery UI Dialog还提供了一个方法“选项”,允许您在不重新配置整个对象的情况下更改对话框上的选项。因此,如果您只想再次使用新标题显示相同的对话框,则可以使用以下内容:

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

请参阅jQuery documentation on Dialog "option"

答案 1 :(得分:14)

不通过所有代码。我猜$('#dialog-confirm').attr("title", "Message");第二次不起作用,因为jQuery UI Dialog已经对实际DOM进行了更改。因此,更改div的title属性不起作用。由于实际标题可能是由jQuery UI Dialog生成的div / p或类似内容。

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

检查jQuery UI对话文档,你应该注意到你可以简单地传入一个标题选项。所以第二次而不是

$('#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!
});

答案 2 :(得分:1)

这对我有用(我用firebug来获取元素名称)..

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

答案 3 :(得分:0)

您可以按ID设置对话框标题,

下面的100%工作示例代码
$( "#json_box" ).dialog({minHeight: 433,minWidth:550,"title":"Json to Template"});