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

Posted by Kevin on Stack Overflow See other posts from Stack Overflow or by Kevin
Published on 2010-05-19T12:53:33Z Indexed on 2010/05/19 13:00 UTC
Read the original article Hit count: 168

Filed under:
|
|
|
|

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!

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about firefox