115

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?

abatishchev
  • 98,240
  • 88
  • 296
  • 433
Guido Lemmens 2
  • 2,317
  • 5
  • 23
  • 29

5 Answers5

268

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

Trying Tobemyself
  • 3,668
  • 3
  • 28
  • 43
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 10
    Beware that the "hacky" version above will change the title of ALL dialogs on the page (in case you have created more than one). – camainc Aug 02 '13 at 14:07
  • 1
    can I pass multiple options? – themhz Sep 18 '13 at 10:55
  • 3
    @themis in the current version there is an `.option()` method which takes an object as well, see `options(options)` here: http://api.jqueryui.com/dialog/#method-option – Nick Craver Sep 18 '13 at 11:31
  • $("#dialog").dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 }, close: function () {; }, title:"test" }).dialog("open"); – WhiteWolfza Jan 07 '16 at 06:44
  • Since my answer is still getting a lot of attention, I will also post it here..http://stackoverflow.com/a/17745795/1315125 – Igor L. Mar 03 '17 at 11:45
15

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!

workdreamer
  • 2,836
  • 1
  • 35
  • 37
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);
storvas
  • 107
  • 1
  • 5
  • 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: http://stackoverflow.com/questions/14488774/using-html-in-a-dialogs-title-in-jquery-ui-1-10 – cincodenada Jun 21 '13 at 00:09
2

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'});
}
Tim B.
  • 429
  • 4
  • 11
0

Even better!

    jQuery( "#dialog" ).attr('title', 'Error');
    jQuery( "#dialog" ).text('You forgot to enter your first name');
user4629979
  • 11
  • 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`. – Pere Oct 14 '16 at 08:57