Javascript problem when setting src for img element in FireFox - string parsing error?

Question

I'm having problems with image's on the page. I'm using Javascript to create the elements, and in FireFox it seems the string that I'm using to set the innerHTML is not being parsed correctly. I'll see this when the server page is requested with invalid GET variables. They look like this (from the PHP script's error handler):

GET[] = Array
(
  [shrink] => true
  [file_id] => \'   file_id   \'
  [refresh] => \'   now.getTime()   \'
)

This only happens for about 5% of requests, which is making it difficult to solve. I have been able to reproduce this myself in FireFox, and Firebug will show that the URL it is trying to fetch is: https://www.domain.com/secure/%27%20+%20image_src%20+%20%27

I read somewhere that it might be related to FireFox prefetching content (can't find it googling now), since it seems to only happen on FireFox. Disabling prefetching in about:config does prevent the problem from occurring, but I'm looking for another solution or workaround that doesn't involve end users changing their configurations.

Here's the specifics and code: I have an empty table cell on an HTML page. In JQuery's $(document).ready() function for the page, I used JQuery's $.ajax() method to get some data from the server about what should be in that cell. It returns the file_id variable, which for simplicity I just set below. It then sets the empty table cell to have an image with src that points to a page that will serve the image file depending on what file_id is passed. This part of the code was JQuery originally, so I changed it to straight Javascript but that didn't help anything.

//get data about image from server
//this is actually done through JQuery's $.ajax() but you get the idea
var file_id = 12;

//create the src for the img
//the refresh is to prevent the image from being cached ever, since the page's
//javascript will be it changes
//during the course of the page's life
var now = new Date();
var image_src = 'serve_image.php?shrink=true&file_id=' + file_id + '&refresh=' + now.getTime();

//create 
document.getElementById('image_cell').innerHTML =
    '<A target="_blank" href="serve_image.php?file_id=' + file_id + '">' +
        '<IMG id=image_element src="' + image_src + '" alt="Loading...">' + 
    '</A>';`

Any help would be greatly appreciated. Thanks!

Answer 1

It looks like you're mixing double and single quotes. Since your code example is modified, I can't be sure, but my guess is that this line:

var image_src = 'serve_image.php?shrink=true&file_id=' + file_id + '&refresh=' + now.getTime();

is really being treated like this:

var image_src = "'serve_image.php?shrink=true&file_id=' + file_id + '&refresh=' + now.getTime()";

Is your JavaScript being generated by PHP, or is it in a separate file? If you're outputting the JavaScript inline, you may want to consider putting it in a separate *.js file to reduce the liklihood that PHP's treatment of quotes is not interfering with the JavaScript quotes.

Hope this helps!

Answer 2

Instead of changing document.getElementById("image_cell").innerHTML, try giving your <a> an ID and doing

document.getElementById('a_tag_id_here').href = 'serve_image.php?file_id=' + file_id;
document.getElementById('image_element').src = image_src;

If you can't set the anchor tag's id, there are other DOM functions that make it easy to get to. The point is, I think changing innerHTML is the source of your problem.