www.webdeveloper.com
Results 1 to 4 of 4

Thread: Storing text in title attribute

  1. #1
    Join Date
    Dec 2005
    Posts
    268

    Storing text in title attribute

    I was having difficulties storing text in the title attribute when it contained special characters. My workaround was to use escape/unescape. Is this the best way to resolve this? Why is it okay to include special characters in the alert function (i.e. Doesn't work), but not in the title attribute? Thanks

    Code:
    var t='This works because it does not have special characters';
    $('body').append('<br /><a id="a1" href="#" title="'+t+'">test</a>');
    alert($('#a1').attr('title'));
    
    var t='This does not works because it "has" special characters"';
    $('body').append('<br /><a id="a2" href="#" title="'+t+'">test</a>');
    alert($('#a2').attr('title'));
    
    var t=escape('This works because the "special characters" are escaped');
    $('body').append('<br /><a id="a3" href="#" title="'+t+'">test</a>');
    alert("Doesn't work: "+$('#a3').attr('title'));
    alert("Does work: "+unescape($('#a3').attr('title')));

  2. #2
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    var t='This does not works because it "has" special characters"';

    because you broke the string at this point var t='This does not works because it " and from this point on has" special characters"'; invokes an error.

    You ALWAYS have to escape quotes if you want to use same quotes within a string, they need escaping.

    Code:
    var x= "You can have \"this\" in a string";
    var y= "You can have 'this' in a string";
    var z= "you can't have "this" in a string"; // breaks at "you can't have "
    // and...
    var a= 'You can have \'this\' in a string';
    var b= 'You can have "this" in a string';
    var c= 'you can't have "this" in a string'; // breaks at 'you can'
    Strings present problems when mixing case and can present problems where you have to use \' escaped single quotes in situations where you need the character but a previous use of a single quote can result in a broken script of not careful. This will depend on the opener quote, double or single and how you alternate or escape them.

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    I do not know what happens with jQuery but there is no problem, with a valid DOCTYPE and a charset, to display a valid string as title.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>Undefined</title>
    </head>
    <body>
    Good luck !
    <script type="text/javascript">
    var t='It works although it "has" special characters characters like : " or @, # ans so on ...';
    document.title=t;
    </script>
    </body>
    </html>

  4. #4
    Join Date
    Dec 2005
    Posts
    268
    Looks like the title attribute should be set later. All of the following examples work. Slightly off topic, which of the native JavaScript approaches is best to set an attribute?

    Code:
    var t='This works because the title with "special characters" were added later.';
    var e = document.createElement('a');
    e.title=t;
    e.id='a4'
    e.href='#'
    e.appendChild(document.createTextNode("test")); 
    document.body.appendChild(e);
    alert(document.getElementById('a4').title);
    
    var e = document.createElement('a');
    e.setAttribute('title', t);
    e.setAttribute('id', 'a5');
    e.setAttribute('href', '#');
    e.appendChild(document.createTextNode("test")); 
    document.body.appendChild(e);
    alert(document.getElementById('a5').title);
    
    
    //Using jQuery
    $('body').append('<a id="a4" href="#" title="">test</a>');
    $("#a6").attr("title",t);
    alert($('#a6').attr('title'));

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles