string with apostrophes

Discussion in 'Javascript' started by nameless, Jan 11, 2010.

  1. nameless

    nameless Guest

    Hi at all. With this code ( below ), I insert in the tag with
    "results" as identifier, the data that I retrieve from ajax function
    ( json structure "data" in below" ). But when "data.books.name" is
    a string with apostrophes, the function onclick doesn't work !! How
    can I resolve this issue ?
    Thanks :)


    e = document.getElementById('results');
    for(i=0; i<data.books.length; i++) {

    e.innerHTML += "<li><a href=\"#\" onclick=\"document.getElementById
    (\'search-q\').value='" + data.books.name + "';\" >" + data.books
    .name + "</a></li> ";


    }
     
    nameless, Jan 11, 2010
    #1
    1. Advertising

  2. nameless

    Evertjan. Guest

    nameless wrote on 11 jan 2010 in comp.lang.javascript:

    > Hi at all. With this code ( below ), I insert in the tag with
    > "results" as identifier, the data that I retrieve from ajax function
    > ( json structure "data" in below" ). But when "data.books.name" is
    > a string with apostrophes, the function onclick doesn't work !! How
    > can I resolve this issue ?
    > Thanks :)
    >
    >
    > e = document.getElementById('results');
    > for(i=0; i<data.books.length; i++) {
    >
    > e.innerHTML += "<li><a href=\"#\" onclick=\"document.getElementById
    > (\'search-q\').value='" + data.books.name + "';\" >" + data.books
    > .name + "</a></li> ";
    >
    >
    >}
    >


    var e = document.getElementById('results');
    for(var i=0; i<data.books.length; i++) {
    e.innerHTML += '<li><a href="#" onclick="setSearchQ(this)">'
    + data.books.name + '</a></li>';
    };

    function setSearchQ(that) {
    document.getElementById('search-q').value = that.innerHTML;
    };

    [not tested]


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Jan 11, 2010
    #2
    1. Advertising

  3. nameless

    jeff Guest

    nameless wrote:
    > Hi at all. With this code ( below ), I insert in the tag with
    > "results" as identifier, the data that I retrieve from ajax function
    > ( json structure "data" in below" ). But when "data.books.name" is
    > a string with apostrophes, the function onclick doesn't work !! How
    > can I resolve this issue ?
    > Thanks :)
    >
    >
    > e = document.getElementById('results');
    > for(i=0; i<data.books.length; i++) {
    >
    > e.innerHTML += "<li><a href=\"#\" onclick=\"document.getElementById
    > (\'search-q\').value='" + data.books.name + "';\" >" + data.books
    > .name + "</a></li> ";
    >
    >


    You can either replace ' with \' in data.books.name

    or

    e.innerHTML += '<li><a href="#" onclick="document.getElementById
    > (\'search-q\').value="' + data.books.name...


    but then you have to escape ". If you look at the html again, you'll
    see why you can't have this: ='''

    Jeff



    > }
     
    jeff, Jan 11, 2010
    #3
  4. nameless

    nameless Guest

    On Jan 11, 11:18 pm, "Evertjan." <>
    wrote:
    > nameless wrote on 11 jan 2010 in comp.lang.javascript:
    >
    >
    >
    > > Hi at all. With this code ( below ), I insert in the tag with
    > > "results" as identifier, the data that I retrieve from ajax function
    > > ( json structure "data" in below" ). But when "data.books.name" is
    > > a string with apostrophes, the function onclick doesn't work !! How
    > > can I resolve this issue ?
    > > Thanks :)

    >
    > > e = document.getElementById('results');
    > > for(i=0; i<data.books.length; i++) {

    >
    > > e.innerHTML += "<li><a href=\"#\" onclick=\"document.getElementById
    > > (\'search-q\').value='" + data.books.name + "';\" >" + data.books
    > > .name + "</a></li> ";

    >
    > >}

    >
    > var e = document.getElementById('results');
    > for(var i=0; i<data.books.length; i++) {
    >    e.innerHTML += '<li><a href="#" onclick="setSearchQ(this)">'
    >    + data.books.name + '</a></li>';
    >
    > };
    >
    > function setSearchQ(that) {
    >    document.getElementById('search-q').value = that.innerHTML;
    >
    > };
    >
    > [not tested]
    >
    > --
    > Evertjan.
    > The Netherlands.
    > (Please change the x'es to dots in my emailaddress)


    now it does works :)
     
    nameless, Jan 11, 2010
    #4
  5. nameless

    jeff Guest

    jeff wrote:
    > nameless wrote:
    >> Hi at all. With this code ( below ), I insert in the tag with
    >> "results" as identifier, the data that I retrieve from ajax function
    >> ( json structure "data" in below" ). But when "data.books.name" is
    >> a string with apostrophes, the function onclick doesn't work !! How
    >> can I resolve this issue ?
    >> Thanks :)
    >>
    >>
    >> e = document.getElementById('results');
    >> for(i=0; i<data.books.length; i++) {
    >>
    >> e.innerHTML += "<li><a href=\"#\" onclick=\"document.getElementById
    >> (\'search-q\').value='" + data.books.name + "';\" >" + data.books
    >> .name + "</a></li> ";
    >>
    >>

    >
    > You can either replace ' with \' in data.books.name


    My mistake, wrong escape.

    replace ' with '

    Jeff
     
    jeff, Jan 11, 2010
    #5
  6. nameless

    nameless Guest

    On Jan 11, 11:44 pm, jeff <> wrote:
    > jeff wrote:
    > > nameless wrote:
    > >> Hi at all. With this code ( below ), I insert in the tag with
    > >> "results" as identifier, the data that I retrieve from ajax function
    > >> ( json structure "data" in below" ). But when "data.books.name" is
    > >> a string with apostrophes, the function onclick doesn't work !! How
    > >> can I resolve this issue ?
    > >> Thanks :)

    >
    > >> e = document.getElementById('results');
    > >> for(i=0; i<data.books.length; i++) {

    >
    > >> e.innerHTML += "<li><a href=\"#\" onclick=\"document.getElementById
    > >> (\'search-q\').value='" + data.books.name + "';\" >" + data.books
    > >> .name + "</a></li> ";

    >
    > > You can either replace ' with \' in data.books.name

    >
    >   My mistake, wrong escape.
    >
    >   replace ' with '
    >
    >    Jeff


    I have resolved with this:

    name_quote = dati.books.name.replace(/[']/g,"\\'");


    ^___^
     
    nameless, Jan 12, 2010
    #6
  7. nameless

    slebetman Guest

    On Jan 12, 5:42 am, nameless <> wrote:
    > Hi at all. With this code ( below ), I insert in the tag with
    > "results" as identifier, the data that I retrieve from ajax function
    > ( json structure "data" in below" ). But when "data.books.name" is
    > a string with apostrophes, the function onclick doesn't work !! How
    > can I resolve this issue ?
    > Thanks :)
    >
    > e = document.getElementById('results');
    > for(i=0; i<data.books.length; i++) {
    >
    > e.innerHTML += "<li><a href=\"#\" onclick=\"document.getElementById
    > (\'search-q\').value='" + data.books.name + "';\" >" + data.books
    > .name + "</a></li> ";
    >
    > }
    >


    Even though you've found a solution to this problem, I'd strongly
    recommend using DOM methods to do this. Perhaps with some helper
    functions if you find DOM methods too verbose. The code will be a bit
    more verbose but will end up much more maintainable because it gets
    you out of quoting hell:

    function make(type,spec) {
    var el = document.createElement(type);
    for (var n in spec) {
    if (n == 'style') {
    var style = spec[n];
    for (var s in style) {
    el.style = style;
    }
    }
    else if (n == 'text') {
    el.innerHTML = spec[n];
    }
    else if (n == 'children') {
    for (var i=0,l=children.length;i<l;i++) {
    el.appendChild(children);
    }
    }
    else {
    el[n] = spec[n];
    }
    }
    }

    // with the helper function above we can rewrite your code as:

    e.appendChild(
    make('li',{
    children : [
    make('a',{
    href : '#',
    onclick : (function(index){
    return function () {
    document.getElementById('search-q').value =
    data.books[index].name
    }
    })(i),
    text : data.books.name
    })
    ]
    })
    );
     
    slebetman, Jan 12, 2010
    #7
  8. slebetman wrote:

    > Even though you've found a solution to this problem, I'd strongly
    > recommend using DOM methods to do this. Perhaps with some helper
    > functions if you find DOM methods too verbose. The code will be a bit
    > more verbose but will end up much more maintainable because it gets
    > you out of quoting hell:
    >
    > function make(type,spec) {
    > var el = document.createElement(type);
    > for (var n in spec) {


    You did not consider enumerable properties that are not user-defined.
    It is better not to for-in iterate here but to access distinct properties,
    (like `attributes') that encapsule the element's attributes and content in
    arrays where necessary.

    > if (n == 'style') {
    > var style = spec[n];
    > for (var s in style) {
    > el.style = style;
    > }
    > }


    You did not consider mapping style properties to scripted style properties.
    And again you did not consider enumerable properties that are not user-
    defined.

    > else if (n == 'text') {
    > el.innerHTML = spec[n];
    > }


    Do not use `innerHTML' where text nodes are expected.

    > else if (n == 'children') {
    > for (var i=0,l=children.length;i<l;i++) {
    > el.appendChild(children);
    > }
    > }


    This does not consider elements that contain both elements and text.
    To do that, you need to use an Array because for-in iteration order is
    implementation-dependent.

    > else {
    > el[n] = spec[n];
    > }


    You did not consider mapping attribute names to attribute property names.

    > }
    > }
    >
    > // with the helper function above we can rewrite your code as:
    >
    > e.appendChild(
    > make('li',{
    > children : [
    > make('a',{
    > href : '#',


    Avoid that.

    Preferably an INPUT element should be generated here instead. It would
    also allow to make use of its object's `form' property to refer to the
    element with ID (then better: name) "search-q".

    > onclick : (function(index){
    > return function () {
    > document.getElementById('search-q').value =
    > data.books[index].name
    > }
    > })(i),


    As you are using an A element, you need to cancel the event in order to
    prevent navigation here. Therefore, you should name the first argument of
    the returned function as it refers to the event object in standards-
    compliant implementations.

    > text : data.books.name
    > })
    > ]
    > })
    > );


    Better:

    e.appendChild(make({
    tagName: "li",
    childNodes: [
    {
    tagName: "input",
    attributes: [
    {name: "value", value: data.books.name},
    {
    name: "onclick",
    value: (function(index) {
    return function(e) {
    this.form.elements['search-q'].value =
    data.books[index].name;
    };
    })(i),
    }
    ]
    }
    ]
    }));


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
     
    Thomas 'PointedEars' Lahn, Jan 12, 2010
    #8
  9. Paul Hovnanian P.E. wrote:

    > e = document.getElementById('results');
    > for(i=0; i<data.books.length; i++) {
    >
    > e.innerHTML += "<li><a href=\"#\" onclick=\"document.getElementById
    > (\'search-q\').value='" + encodeURI(data.books.name) + "';\" >" +
    > data.books
    > .name + "</a></li> ";
    >
    > }


    Nonsense. If this even works, the server (or client) will receive gibberish
    as the escaped string is escaped again on submit of the form (resulting e.g.
    in "%25" for the "%" of "%22" for <">).


    PointedEars
    --
    Danny Goodman's books are out of date and teach practices that are
    positively harmful for cross-browser scripting.
    -- Richard Cornford, cljs, <cife6q$253$1$> (2004)
     
    Thomas 'PointedEars' Lahn, Jan 12, 2010
    #9
  10. nameless

    David Mark Guest

    Paul Hovnanian P.E. wrote:
    > Thomas 'PointedEars' Lahn wrote:
    >
    >> Paul Hovnanian P.E. wrote:
    >>
    >>> e = document.getElementById('results');
    >>> for(i=0; i<data.books.length; i++) {
    >>>
    >>> e.innerHTML += "<li><a href=\"#\" onclick=\"document.getElementById
    >>> (\'search-q\').value='" + encodeURI(data.books.name) + "';\" >" +
    >>> data.books
    >>> .name + "</a></li> ";
    >>>
    >>> }

    >> Nonsense. If this even works, the server (or client) will receive
    >> gibberish as the escaped string is escaped again on submit of the form
    >> (resulting e.g. in "%25" for the "%" of "%22" for <">).
    >>

    > This might work:
    >
    > data.books.name.replace( /'/g, "%27" )
    >
    > or this, for HTML content:
    >
    > data.books.name.replace( /'/g, "'" )
    >
    > The above should only replace the single quote/apostrophe rather than
    > escaping the whole string.
    >


    Just use double quotes around the attribute values and a standard text
    to HTML escape function (e.g. ">" becomes "&gt;", "<" becomes "&lt;" and
    double quote becomes "&quot;"). Just make sure you do them in the right
    order. ;)
     
    David Mark, Jan 14, 2010
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Chris Huddle

    SQL and apostrophes

    Chris Huddle, Dec 10, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    750
    Steve C. Orr [MVP, MCSD]
    Dec 10, 2003
  2. Andy Fish

    HtmlEncode with apostrophes

    Andy Fish, Apr 6, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    8,704
    Nicole Calinoiu
    Apr 6, 2005
  3. darrel

    URLEncode doesn't like apostrophes?

    darrel, Jul 8, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    510
    darrel
    Jul 8, 2005
  4. MS
    Replies:
    3
    Views:
    16,191
    Marcin Grunwald
    Feb 22, 2005
  5. =?Utf-8?B?Unlhbg==?=

    traping curly apostrophes

    =?Utf-8?B?Unlhbg==?=, Jun 14, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    448
    Steven Cheng[MSFT]
    Jun 16, 2006
Loading...

Share This Page