Question

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

Answer 1

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.