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>

Christian Studer · Accepted Answer · 2010-04-23 06:52:50Z

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, 2010 at 6:52

Christian Studer

25.6k6 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

learning Over a year ago

I have changed the code as in the edited part above. Still, I cant figuire out why its not working.

Christian Studer Over a year ago

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.

Gene Bo Over a year ago

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

BlueMystic · Accepted Answer · 2019-09-18 20:07:39Z

18

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, 2019 at 20:07

answered Jul 25, 2014 at 17:34

BlueMystic

2,33229 silver badges25 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:01:52Z

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, 2017 at 12:01

CommunityBot

11 silver badge

answered Apr 23, 2010 at 6:46

AaronThomson

7638 silver badges19 bronze badges

Comments

learning · Accepted Answer · 2010-04-23 11:45:21Z

1

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

answered Apr 23, 2010 at 11:45

learning

11.8k36 gold badges91 silver badges158 bronze badges

Comments

SharpC · Accepted Answer · 2016-01-18 17:19:53Z

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, 2016 at 17:19

SharpC

7,5744 gold badges53 silver badges45 bronze badges

answered Jun 27, 2011 at 21:53

Ustes Greenridge

112 bronze badges

Comments

nickf · Accepted Answer · 2010-04-23 06:51:10Z

0

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

answered Apr 23, 2010 at 6:51

nickf

548k199 gold badges660 silver badges727 bronze badges

1 Comment

learning Over a year ago

I have tried to add alerts...as in the edited code above. But though bothalerts showing the right title, the title isnt being displayed.

rahul · Accepted Answer · 2010-04-23 06:51:17Z

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, 2010 at 6:51

rahul

188k50 gold badges240 silver badges266 bronze badges

1 Comment

learning Over a year ago

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.

Reigel Gallarde · Accepted Answer · 2010-04-23 06:59:15Z

0

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.

answered Apr 23, 2010 at 6:59

Reigel Gallarde

65.5k21 gold badges126 silver badges142 bronze badges

Comments

Michel · Accepted Answer · 2010-04-23 12:02:22Z

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, 2010 at 12:02

Michel

23.7k50 gold badges161 silver badges257 bronze badges

Collectives™ on Stack Overflow

How to change div title using jquery

9 Answers 9

3 Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related