Changing the title of jQuery-UI dialog-box with in another dialog-box's function

Question

Why doesn't doesn't the second jQuery-UI dialog box title change when popped. The first dialog box I change the title of the box with using the following .attr("title", "Confirm") -- it change the title of the first box to 'Confirm', like it should have. Now when the second box pops up it should change the title to 'Message' since did the same thing for the second box -- .attr("title", "Message"). Right? But it doesnt. It keep the title from before. However, the message change like it should have. I have tested in IE8, Chrome, and FF3.6.

<div id="dialog-confirm" title=""></div> <-- This is the html before jQuery functions.

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

Thank you for you assistant, if you choose to help.

Answer 1

jQuery UI Dialog also provides a method "option" that allows you to change an option on the dialog without re-configuring the whole thing. So if you just want to show the same dialog again with a new title you can use the following:

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

See the jQuery documentation on Dialog "option".

Answer 2

Without going through all your code. I guess $('#dialog-confirm').attr("title", "Message"); doesn't work the second time because jQuery UI Dialog already made changes to the actual DOM. So changing the title attribute of the div doesn't do anything. As the actual title is probably some div/p or similar generated by jQuery UI Dialog.

Your second call to you $('#dialog-confirm').dialog({..}) simply updates an existing dialog with new options.

Checking the jQuery UI Dialog documentation you should have noted that you could simply pass in an title option. So the second time instead of

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

just use

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

Answer 3

This worked for me (I used firebug to get the element name)..

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