CODEWITHSUNDEEP
javascriptgoogle-chrome
Jerry2
Jerry2

Reputation: 3085

Javascript variables in Chrome

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.

Upvotes: 0

Views: 201

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34158

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.

Upvotes: 0

pandavenger
pandavenger

Reputation: 1027

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...

Upvotes: 0

Fender
Fender

Reputation: 3055

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

Upvotes: 1

Related Questions