jQuery ui dialog change title after load-callback

Question

I like to change the title from an UI Dialog after i have submitted a form in this UI Dialog. So in the callback-function after load i should suggest, but i've tried and googled without result.

Has anyone an idea?

Caine

Answer 1

Using dialog methods:

$('.selectorUsedToCreateTheDialog').dialog('option', 'title', 'My New title');

Or directly, hacky though:

$("span.ui-dialog-title").text('My New Title'); 

For future reference, you can skip google with jQuery. The jQuery API will answer your questions most of the time. In this case, the Dialog API page. For the main library: http://api.jquery.com

Lynching

Beware that the "hacky" version above will change the title of ALL dialogs on the page (in case you have created more than one). – Aristotelianism

can I pass multiple options? – Steersman

@themis in the current version there is an .option() method which takes an object as well, see options(options) here: api.jqueryui.com/dialog/#method-option – Lynching

$("#dialog").dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 }, close: function () {; }, title:"test" }).dialog("open"); – Laky

Since my answer is still getting a lot of attention, I will also post it here..https://mcmap.net/q/108544/-how-to-change-an-element-39-s-title-attribute-using-jquery – Hefter

Answer 2

I have found simpler solution:

$('#clickToCreate').live('click', function() {
     $('#yourDialogId')
         .dialog({
              title: "Set the title to Create"
         })
         .dialog('open'); 
});


$('#clickToEdit').live('click', function() {
     $('#yourDialogId')
         .dialog({
              title: "Set the title To Edit"
         })
         .dialog('open'); 
});

Hope that helps!

Endow

Answer 3

An enhancement of the hacky idea by Nick Craver to put custom HTML in a jquery dialog title:

var newtitle= '<b>HTML TITLE</b>';
$(".selectorUsedToCreateTheDialog").parent().find("span.ui-dialog-title").html(newtitle);

Campo

I prefer to not be hacky when I don't have to, and there's already a jquery-endorsed way to set HTML titles: overriding the _title method. It's already covered in this SO answer: #14489274 – Organdy

Answer 4

I tried to implement the result of Nick which is:

$('.selectorUsedToCreateTheDialog').dialog('option', 'title', 'My New title');

But that didn't work for me because i had multiple dialogs on 1 page. In such a situation it will only set the title correct the first time. Trying to staple commands did not work:

    $("#modal_popup").html(data);
    $("#modal_popup").dialog('option', 'title', 'My New Title');
    $("#modal_popup").dialog({ width: 950, height: 550);

I fixed this by adding the title to the javascript function arguments of each dialog on the page:

function show_popup1() {
    $("#modal_popup").html(data);
    $("#modal_popup").dialog({ width: 950, height: 550, title: 'Popup Title of my First Dialog'});
}

function show_popup2() {
    $("#modal_popup").html(data);
    $("#modal_popup").dialog({ width: 950, height: 550, title: 'Popup Title of my Other Dialog'});
}

Dorn

Answer 5

Even better!

    jQuery( "#dialog" ).attr('title', 'Error');
    jQuery( "#dialog" ).text('You forgot to enter your first name');

Microbarograph

The first line won't change the dialog title. There's no such attribute in jQuery UI dialog. The second one will change the content of the dialog itself, but that's not what the user was asking. And that's supposing the id of yoru dialog is #dialog. – Ina