Javascript variables in Chrome

Question

I have strange errors in my logs, mostly coming from the Chrome in Macintosh, but sometimes Windows also.

In javascript I have on page:

text =+ '<img src="/pictures/' + url + '" alt="Photos" border="0" class="carousel-photo" />';

Then I add text using carousel and it should be and in all browsers it is (I can not debug this in my chrome unfortunately) that the image is generated:

<img src="/pictures/2405.jpg" alt="photos" border="0" class="carousel-photo">

But my logs note this:

http://www.mysite.net:80/pictures/' + url + '

This is of course a 404 error as it doesn't exist so I get log.

But why is the url not converted to my variable content, 2405.jpg in this example???

UPDATE 1: I got another hit now I have tried adding in a separate line (pandavenger advice) from: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

Error 404 in:

/pictures/';text += url;text +='

UPDATE 2 Putting into CDATA didn't help (I have xhtml page), some Apple browsers are interpreting as if this is HTML :-(

UPDATE 3

This is wierd. It seems the only way I could put stop on this is to use:

txt += "<img src='\/pictures\/" + elm.find('url').text()+ "' alt='Photo' border='0' class='carousel-picture'>";

instead of

var url = '\/pictures\/' + elm.find('url').text();
txt += "<img src='" + url  +  "' alt='Photo' border='0' class='carousel-picture'>";

UPDATE 4: On other pages simillar code that constructs img also fails in this browsers. The only way seems to make a document.createElement("img"). But I wonder if other things are ok in this browsers as the image gets 404 not found, but link does not, for example. CDATA also doesn't help.

You need to supply a full example that exhibits the behavior. There should be nothing wrong with the code you posted. — JJJ, May 24 '12 at 11:40
what if you try a different string interpolation: `text += [''].join();`? — Fabrizio Calderan, May 24 '12 at 11:41
I dont see any problem in this code, Can you show some more code. (e.g. where you are setting `url` ) — Jashwant, May 24 '12 at 11:41

score 1 · Answer 1 · edited May 23 '17 at 12:04

1

maybe the browser interprets this javascript part as html and then it finds:

<img src="/pictures/' + url + '" alt="Photos" border="0" class="carousel-photo" />

here the src attributes value is:

/pictures/' + url + '

look here for a solution: When is a CDATA section necessary within a script tag?

Adding the CDATA part should fix those problems

edited May 23 '17 at 12:04

Community

1
1

answered May 24 '12 at 11:41

Fender

3,055
1
17
25

score 0 · Answer 2 · answered May 24 '12 at 11:45

0

Try using

console.log(text);

to debug. This will show what is being passed into text is in your error log. Try:

text += '<img src="/pictures/';
text += url;
text += '" alt="Photos" border="0" class="carousel-photo" />';

so the URL doesn't get passed in as a String but as a variable...

answered May 24 '12 at 11:45

pandavenger

1,017
7
20

Console is no help as on my system everything is working. Problem seems to be mostly Mac/Chrome... – Jerry2 May 24 '12 at 11:47
looks like your javascript is being passed in as HTML (which someone already suggested). Either follow his advice and use CDATA or try making your javascript a seperate file and call it with a script tag. – pandavenger May 24 '12 at 11:58

score 0 · Answer 3 · answered May 24 '12 at 12:41

This may be due to the fact that the specification says that browsers must handle attributes without quotes around them in certian instances, combined with the fact that the slash (solidus) character will confuse the validation processing in rare circumtances. This may also be compounded by the poor choice of "text" as a variable name as "text" is a valid attribute for some elements. I note that you do not have a closing semi-colon which may also contribute.

var fullurl = '/pictures/' + url;
mytext = mytext + '<img src="' + fullurl + '" alt="Photos" border="0" class="carousel-photo" />';

One alternative might be to remove the optional closing solidus as well:

var fullurl = '/pictures/' + url;
mytext = mytext + '<img src="' + fullurl + '" alt="Photos" border="0" class="carousel-photo">'

Further, it might be better to set the src attribute after the image is inserted within the flow:

var fullurl = '/pictures/' + url;
mytext = mytext + '<img src="" alt="Photos" border="0" class="carousel-photo" />';

..after insert, set the src attribute using the fullurl uri component string. NOTE: it IS a uri, not a url that is given as the src attribute content.

Another might be to reverse the use of the single/double quotes:

var fullurl = "/pictures/" + url;
mytext = mytext + "<img src='" + fullurl + "' alt='Photos' border='0' class='carousel-photo'>";

Special caveat, you should NOT use this image string inside a 'q' element or a block quote.

Thanx, I'll try. In fact I do not have text as vaariable name, but I have it in my langauage, I just used as an not very good example I see... — Jerry2, May 24 '12 at 13:42
I can not set the image url later because this whole string construction is passed to the carousel as: carousel.add(first+i, txt); — Jerry2, May 24 '12 at 13:46

Javascript variables in Chrome

3 Answers3