JQUery - escaping quotes?

JavaScript
1

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.


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



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


<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

Try removing the backslashes in red:


<a href="#" onclick="slideContent([COLOR="Red"]\\[/COLOR]"divName[COLOR="Red"]\\[/COLOR]")">' +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 :slight_smile:

3

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

remove the " in red:

'<a href="#" onclick="slideContent("divName")[COLOR="Red"]"[/COLOR]>' +secName+ '</a>'
5

Thanks for replying again, still not working.

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

6

Alright, let’s try it from a different angle:


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

Try


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

thanks for your help

I go it working with


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

:eek: The horror!

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


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

thanks pmw57, your way looks a million times better than mine.

11 

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


var onclick = "slideContent('" + divName + "')";

to this


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

When that onclick variable is used in the link string.

var onclick = 'slideContent("' + divName + '")';

will result in:


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:


onclick="slideContent('...')"

which is why this scripting code ends up working:


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.


var onclick = 'slideContent(\\'' + divName + '\\')';
13

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

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.