Prev: What browser doesn't support ajax ?
Next: Mutex
From: nameless on 11 Jan 2010 20:06
On Jan 11, 11:44 pm, jeff <jeff_th...(a)att.net> 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[i].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[i].name + "';\" >" + data.books
> >> [i].name + "</a></li> ";
>
> > You can either replace ' with \' in data.books[i].name
>
>   My mistake, wrong escape.
>
>   replace ' with &#39;
>
>    Jeff

I have resolved with this:

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


^___^
From: slebetman on 11 Jan 2010 21:18
On Jan 12, 5:42 am, nameless <xsatelli...(a)gmail.com> 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[i].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[i].name + "';\" >" + data.books
> [i].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[s] = style[s];
}
}
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[i]);
}
}
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[i].name
})
]
})
);
From: Thomas 'PointedEars' Lahn on 12 Jan 2010 04:57
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[s] = style[s];
> }
> }

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

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[i].name
> })
> ]
> })
> );

Better:

e.appendChild(make({
tagName: "li",
childNodes: [
{
tagName: "input",
attributes: [
{name: "value", value: data.books[i].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
From: Paul Hovnanian P.E. on 12 Jan 2010 14:21


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[i].name) + "';\" >" +
data.books
[i].name + "</a></li> ";

}

--
Paul Hovnanian paul(a)hovnanian.com
----------------------------------------------------------------------
Have gnu, will travel.
From: Thomas 'PointedEars' Lahn on 12 Jan 2010 15:02
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[i].name) + "';\" >" +
> data.books
> [i].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$8300dec7(a)news.demon.co.uk> (2004)
First  |  Prev  |  Next  |  Last
Pages: 1 2 3
Prev: What browser doesn't support ajax ?
Next: Mutex