CODEWITHSUNDEEP
jqueryfirefoxgoogle-chrome
user1683645
user1683645

Reputation: 1579

Image changes, src attribute stays the same

I'm experiencing a problem where the src attribute of an image element stays the same after ajax request. The element is an "inner" element of another element that gets "replaced" with .html(data) function @ callback function. The strange thing is that a new image is displayed as it should even though as I said the src attribute shows the pathway of the last image in the source code.

Here is the JS: 

    $('.toplistimages').each(function(){
    var filepath = $(this).attr('src');
    var next = "next"
    $(this).click(function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '?category=goto',
            data: {
                "filepath" : filepath,
                "next" : next
            },
            success: function(data){
                $('#rightvotecolumn').html(data);
            }
        });
        return false;
    });
});

The content is replaced successfully, but src attribute stays the same.

Edit: I might also add that the right filename is displayed when I try to save the image that is displayed after the ajax request. I'm trying this on firefox and chrome

Upvotes: 0

Views: 190

Answers (2)

IUnknown
IUnknown

Reputation: 22448

The reason of such behavior is that you get actual src value only once and use that value in each click event handler. To fix this, set up filename variable value on each click event:

$('.toplistimages').each(function(){
var next = "next"
$(this).click(function(e){
    e.preventDefault();
    var filepath = $(this).attr('src');
    $.ajax({
        type: 'POST',
        url: '?category=goto',
        data: {
            "filepath" : filepath,
            "next" : next
        },
        success: function(data){
            $('#rightvotecolumn').html(data);
        }
    });
    return false;
});

});

Upvotes: 1

ankur140290
ankur140290

Reputation: 640

Rather than checking the source code by the 'View Source' option, I would suggest you to check it in your console using F12 in Chrome or on Firefox.

Because, the dynamic data which is added later cannot be seen in the Page Source.

Upvotes: 2

Related Questions