SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery - escaping quotes ?

    Hi all

    I have a problem with single and double quotes I think.

    I have this simple gallery with a jQuery functions that slides to the appropriate div
    when the buttons are clicked

    http://www.ttmt.org.uk/forum/4_Gallery/#

    This page here uses the same slide function but the images are loaded from an xml file using jQuery.

    http://www.ttmt.org.uk/forum/5_xml_Gallery/#

    The slide function here isn't working. I think the problem is with the onclick call to the function here, where I already
    have double quotes inside single quotes already.

    Code:
    ('<a href="#" onclick="slideContent(divName)">' +secName+ '</a>')


    Code:
    function slideContent(div){
      alert(div);
      var $content = $('#content');
      var divPos = $('#content ' + div).position();
      var scrollPosition = $content.scrollTop()+divPos.top;
      $('#content').animate({scrollTop: scrollPosition}, 500);
    }
        
    $.ajax({
      type: 'GET',
      url: 'images.xml',
      dataType: 'xml',
      success: function(xml){
        $(xml).find('section').each(function(){
          var id = $(this).attr('id');
          var secName = $(this).attr('secName');
          var divName = '#'+secName;
          $('<li></li>').html('<a href="#" onclick="slideContent(divName)">' +secName+ '</a>').appendTo('#header ul');
          $('<div id="'+secName+'" class="section"><ul></ul></div>').appendTo('#content');         
            $(this).find('img').each(function(){
              var imgName = $(this).attr('imgName');        
              $('<li><img src='+imgName+' /></li>').appendTo('#'+secName+' ul');
            })
            
        });
      }
    })
    the xml
    Code:
    <gallery>
      <section secName="planes" id="1">
        <img imgName="images/planes/01_th.jpg"></img>
        <img imgName="images/planes/02_th.jpg"></img>
        <img imgName="images/planes/03_th.jpg"></img>
        <img imgName="images/planes/04_th.jpg"></img>
        <img imgName="images/planes/05_th.jpg"></img>
        <img imgName="images/planes/06_th.jpg"></img>
        <img imgName="images/planes/07_th.jpg"></img>
        <img imgName="images/planes/08_th.jpg"></img>
        <img imgName="images/planes/09_th.jpg"></img>
        <img imgName="images/planes/10_th.jpg"></img>
        <img imgName="images/planes/11_th.jpg"></img>
        <img imgName="images/planes/12_th.jpg"></img>
        <img imgName="images/planes/13_th.jpg"></img>
        <img imgName="images/planes/14_th.jpg"></img>
        <img imgName="images/planes/15_th.jpg"></img>
      </section>
      <section secName="cars" id="1">
        <img imgName="images/cars/01_th.jpg"></img>
        <img imgName="images/cars/02_th.jpg"></img>
        <img imgName="images/cars/03_th.jpg"></img>
        <img imgName="images/cars/04_th.jpg"></img>
        <img imgName="images/cars/05_th.jpg"></img>
        <img imgName="images/cars/06_th.jpg"></img>
        <img imgName="images/cars/07_th.jpg"></img>
        <img imgName="images/cars/08_th.jpg"></img>
        <img imgName="images/cars/09_th.jpg"></img>
        <img imgName="images/cars/10_th.jpg"></img>
      </section>
      <section secName="boats" id="1">
        <img imgName="images/boats/01_th.jpg"></img>
        <img imgName="images/boats/02_th.jpg"></img>
        <img imgName="images/boats/03_th.jpg"></img>
        <img imgName="images/boats/04_th.jpg"></img>
        <img imgName="images/boats/05_th.jpg"></img>
        <img imgName="images/boats/06_th.jpg"></img>
        <img imgName="images/boats/07_th.jpg"></img>
        <img imgName="images/boats/08_th.jpg"></img>
        <img imgName="images/boats/09_th.jpg"></img>
        <img imgName="images/boats/10_th.jpg"></img>
      </section>
    </gallery>

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,087
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Try removing the backslashes in red:

    Code:
    <a href="#" onclick="slideContent(\"divName\")">' +secName+ '</a>'
    You're in a string defined by single quotes so you don't have to escape double quotes. Take a close at the string
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ScallioXTX, thanks for your reply

    I tired your suggestion but it's till not working.

    http://www.ttmt.org.uk/forum/5_xml_Gallery/#

    It looks like I'm passing the string "divName"

    but I want to pass the variable divName.

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,087
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    remove the " in red:

    Code:
    '<a href="#" onclick="slideContent("divName")">' +secName+ '</a>'
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for replying again, still not working.

    http://www.ttmt.org.uk/forum/5_xml_Gallery/#

  6. #6
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,087
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Alright, let's try it from a different angle:

    Code:
    "<a href=\"#\" onclick=\"slideContent('divName')\">" +secName+ "</a>"
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  7. #7
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try
    Code JavaScript:
    ('<a href="#" onclick="slideContent('+divName+')">' +secName+ '</a>')

  8. #8
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your help

    I go it working with

    Code:
    $('<li></li>').html('<a href="#" onclick="slideContent(\'' + divName + '\')">' +secName+ '</a>').appendTo('#header ul');

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt View Post
    thanks for your help

    I go it working with

    Code:
    $('<li></li>').html('<a href="#" onclick="slideContent(\'' + divName + '\')">' +secName+ '</a>').appendTo('#header ul');
    The horror!

    Simpler, much much simpler is to gradually build up the string.

    Code javascript:
    var onclick = "slideContent('" + divName + "')";
    var link = '<a href="#" onclick="' + onclick + '">' +secName+ '</a>';
    $('<li></li>').html(link).appendTo('#header ul');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks pmw57, your way looks a million times better than mine.

  11. #11
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var secName = $(this).attr('secName');
    var divName = '#'+secName;
    var onclick = "slideContent('" + divName + "')";
    var link = '<a href="#" onclick="' + onclick + '">' +secName+ '</a>';
    $('<li></li>').html(link).appendTo('#header ul');
    This code works fine but I was just doing some tinkering and changed this line

    Code:
    var onclick = "slideContent('" + divName + "')";
    to this

    Code:
    var onclick = 'slideContent("' + divName + '")';
    so it has single quotes on the outside and double inside - I was just trying it to match the rest of the code.

    This code with single quotes on the outside doesn't work, can anyone explain why?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    When that onclick variable is used in the link string.

    Code:
    var onclick = 'slideContent("' + divName + '")';
    will result in:

    Code:
    onclick="slideContent("...")"
    which won't work.

    Attention must be paid to the resulting HTML code that will come from your script.

    The working attribute for your HTML element will be:

    Code:
    onclick="slideContent('...')"
    which is why this scripting code ends up working:

    Code javascript:
    var onclick = "slideContent('" + divName + "')";

    If you want to ensure that your javascript strings are all delimited by single quotes, you will need to escape the ones inside it that are destined for the HTML page.

    Code javascript:
    var onclick = 'slideContent(\'' + divName + '\')';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't need to use single quotes, I'm just trying to work out whats happening.

    Attention must be paid to the resulting HTML code that will come from your script.
    How would I check the resulting HTML from the code - I'm using Mac OS X10.6, TextMate as a test editor and Safari Firefox to test the pages.

    If I load the page and check the source code it just shows the same as the text editor.

    Sorry for all the questions and thanks for any help.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ttmt View Post
    How would I check the resulting HTML from the code - I'm using Mac OS X10.6, TextMate as a test editor and Safari Firefox to test the pages.
    With Firefox there's an extension called Firebug, and with Google Chrome you can just right-click on the page and choose Inspect element, which takes you to the live DOM for the whole page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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