string with apostrophes

[nameless]

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


}

 

[Evertjan.]

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]

 

[jeff]

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

(\'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

 

[nameless]

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]

now it does works

 

[jeff]

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

 

[nameless]

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,"\\'");


^___^

 

[slebetman]

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

 

[Thomas 'PointedEars' Lahn]

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

 

[Thomas 'PointedEars' Lahn]

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

 

[David Mark]

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.