How to change div title using jquery

Question

I have the following code:

<div id="DivPassword" title="test" >

I want to change the div title and I have the following code:

 function ChangeAttribute() {
         $("#DivPassword")
            .attr('title', 'Photo by Kelly Clark');
         $('#DivPassword').dialog('open');
         return false;
     }

When the dialog is opened, the title is still test! if I don't assign any title to the div, the dialog doesn't show any title. How can I correct that?

 function ChangeAttribute() {
         $("#DivPassword")
            .attr('title', 'Photo by Kelly Clark')
            .dialog('open');

         alert($("#DivPassword").attr('title'));
     }

$('#DivPassword').dialog({
             autoOpen: false,
             width: 800,
             buttons: {
                 "Cancel": function() {
                     $(this).dialog("close");
                 },
                 "Accept": function() {
                 alert($(this).attr('title'));
                     $(this).dialog("close");
                 }
             }
         });

 <script type="text/javascript">
     var Dtitle;
     $(function() {
        $('#DivPassword').dialog({

             autoOpen: false,
             width: 800,
             title : Dtitle,
             buttons: {
                 "Cancel": function() {
                     $(this).dialog("close");
                 },
                 "Accept": function() {
                     $(this).dialog("close");
                 }
             }
         });
     });

     function ChangeAttribute(name) {
         $("#DivPassword")
            .attr('title', name)
            .dialog('open');
         Dtitle = $("#DivPassword").attr('title');
         alert(Dtitle);
     }


</script>

score 25 · Answer 1 · answered Apr 23 '10 at 06:52

25

You can change the title of a dialog directly with:

$('#DivPassword').dialog('option', 'title', 'Photo by Kelly Clark');

This will work in your case. In fact, your code to change the title attribute is correct. I guess that the dialog plugin creates the dialog when .dialog is called first. The open method just displays the dialog then, without re-creating it from the div.

answered Apr 23 '10 at 06:52

Christian Studer

24,947
6
46
71

I have changed the code as in the edited part above. Still, I can`t figuire out why it`s not working. – learning Apr 23 '10 at 09:13
You still don't use the dialog-method to set the title. You can add my line right before your alert-statement and it should work. – Christian Studer Apr 23 '10 at 11:49
works perfect - I was trying all these other ways from different posts & articles. This is clearly the most elegant solution .. aka, the best! I have been learning/working with jquery dialogs for a few months now, and only seeing this way of doing things for the first time here. Not sure why the docs, tuts, & posts don't emphasize this type of solution more since it is very useful/powerful in many different code situations .. ? .. Big thanks for sharing a great one-liner – Gene Bo Aug 15 '14 at 19:40

Jhollman · Answer 2 · 2019-09-18T20:07:39.180

17

You can change ANY attribute from any DOM element with jQuery as easy as:

$("#divMessage").attr('title', 'Type here the new Title text');

Cheers!

edited Sep 18 '19 at 20:07

answered Jul 25 '14 at 17:34

Jhollman

2,093
24
19

score 1 · Answer 3 · edited May 23 '17 at 12:01

1

Have you tried any of the suggestions given here: How to change an element’s title attribute using jQuery?

It looks like you are doing what the accepted answer suggests. If this doesn't work, perhaps the others will.

edited May 23 '17 at 12:01

Community

1
1

answered Apr 23 '10 at 06:46

AaronThomson

763
8
19

score 1 · Accepted Answer · answered Apr 23 '10 at 11:45

Thanks for all the answers.

The $('#DivPassword').dialog({ had to be after .dialog('open');

The simplest way was to do as follows:

 $("#DivPassword")
            .dialog('open');
         $('#DivPassword').dialog({
             autoOpen: false,
             title: $('#DivPassword').attr('title') + name,
             width: 400,
             buttons: {
                 "Cancel": function() {
                     $(this).dialog("close");
                 },
                 "Accept": function() {
                     $(this).dialog("close");
                 }
             }
         });

score 1 · Answer 5 · edited Jan 18 '16 at 17:19

1

$("#div1").dialog({ autoOpen: false, modal: true, height: 420, width: 750, resizable: false });
// more code
$("#div1").dialog("option", "title", "joopla, here is a new title");

did the trick for me..

edited Jan 18 '16 at 17:19

SharpC

6,974
4
45
40

answered Jun 27 '11 at 21:53

Ustes Greenridge

11
2

score 0 · Answer 6 · answered Apr 23 '10 at 06:51

It sounds like your plugin is reading the title before it gets to that ChangeAttribute function. The code you've posted will certainly change the title attribute, so there's something else going on behind the scenes.

Also, while I'm here, don't forget to use chaining. Most functions in jQuery return the same object again:

$("#DivPassword").attr('title', 'Photo by Kelly Clark').dialog('open');

// or like this, perhaps easier to read:

$("#DivPassword")
    .attr('title', 'Photo by Kelly Clark')
    .dialog('open')
;

I have tried to add alerts...as in the edited code above. But though bothalerts showing the right title, the title isnt being displayed. — learning, Apr 23 '10 at 07:47

score 0 · Answer 7 · answered Apr 23 '10 at 06:51

0

Try setting the title attribute after the dialog is open. Probably your dialog.open() will be resetting the title attribute.

I think you can supply a callback function for the open event.

See open

answered Apr 23 '10 at 06:51

rahul

184,426
49
232
263

Had it been resetting, then I don`t think the inital title would have been displayed! What do you think about that? The new title that is being assigned isn`t being displayed. – learning Apr 23 '10 at 07:23

score 0 · Answer 8 · answered Apr 23 '10 at 06:59

Specifies the title of the dialog. The title can also be specified by the title attribute on the dialog source element.

Code examples

Initialize a dialog with the title option specified.

$( ".selector" ).dialog( { title: 'Dialog Title' } );

Get or set the title option, after init.

//getter
var title = $( ".selector" ).dialog( "option", "title" );
//setter
$( ".selector" ).dialog( "option", "title", 'Dialog Title' );

source.

to answer your the dialog doesnt show any title.

score 0 · Answer 9 · answered Apr 23 '10 at 12:02

0

i did this:

$("#div1").dialog({ autoOpen: false, modal: true, height: 420, width: 750, resizable: false });
//more code
$("#div1").dialog("option", "title", "joopla, here is a new title");

This works for me

answered Apr 23 '10 at 12:02

Michel

23,085
46
152
242

How to change div title using jquery

9 Answers9