I have an image tag that retrieves the src by an url, like:

<img src="http://localhost:2000/User/GetImage/1" />

That element is generated by jQuery, that is:

this.updateImage  = function() 
{
    console.log("Change me!");
    var context = this;
    var imageSrc = webApiUrl + "User/GetImage/" + this._id;

    $("#ga-application-header .user-info-image").each(function()
    {
        $(this).empty();
        /* First try */$(this).append($("<img title='" + context._firstName + " " + context._lastName + "' />").attr("src", imageSrc));
        /* Second try*/$(this).append("<img title='" + context._firstName + " " + context._lastName + "' src='" + imageSrc + "' />");
    });
}

That lines with ents - first and second try - are the way I've tried the get this achieved.

Now the most important detail. When page is loaded, this function is called and displays the image. This works. But if I call it again(when user change it's picture) the image doesn't shows in IE and FF. Only on Chrome. IE and FF don't even open an image request(on network tab in console) for it. Note that the console.log text "Change Me!" is always called.

I have an image tag that retrieves the src by an url, like:

<img src="http://localhost:2000/User/GetImage/1" />

That element is generated by jQuery, that is:

this.updateImage  = function() 
{
    console.log("Change me!");
    var context = this;
    var imageSrc = webApiUrl + "User/GetImage/" + this._id;

    $("#ga-application-header .user-info-image").each(function()
    {
        $(this).empty();
        /* First try */$(this).append($("<img title='" + context._firstName + " " + context._lastName + "' />").attr("src", imageSrc));
        /* Second try*/$(this).append("<img title='" + context._firstName + " " + context._lastName + "' src='" + imageSrc + "' />");
    });
}

That lines with ents - first and second try - are the way I've tried the get this achieved.

Now the most important detail. When page is loaded, this function is called and displays the image. This works. But if I call it again(when user change it's picture) the image doesn't shows in IE and FF. Only on Chrome. IE and FF don't even open an image request(on network tab in console) for it. Note that the console.log text "Change Me!" is always called.

• javascript
• jquery

• 2 It doesn't show any errors or anything? Anywhere? – PitaJ Commented May 31, 2013 at 20:31
• check if the context in both the calls is the same. – Parthik Gosar Commented May 31, 2013 at 20:35
• @ParthikGosar I would say yes. The object, User is unique and global. The calls are always in it. – DontVoteMeDown Commented May 31, 2013 at 20:37
• I wonder if this is a caching issue? What if you append a random query string to the end of the image src url? – RandomWebGuy Commented May 31, 2013 at 20:38
• Just making sure as calling the same function as a event handler changes its context. Could you create a jsfiddle for this...would be more convenient to help out. – Parthik Gosar Commented May 31, 2013 at 20:39

3 Answers 3

The issue is caused by the browser caching the image. The fix is to append a random query string to the image source.

First, I tend to use the following pattern as opposed to string concatenation.

var img = $('<img/>').attr('title',context._firstName).attr('src',imageSrc);
$(this).append(img);

Second, inside your this.updateImage, could you console.log/dir(this), I'm guessing your context isn't proper, you may want to do a var that = this, to keep your references in check.

I just ran into the same issue with IE.

This helped me:

Instead of

$form.find( ".classname" ).append( content );

This worked in IE and all other browsers:

$form.find( ".classname" ).html( $form.find( ".classname" ).html() + content );

Hope it helps somebody here...