Firefox wont reset jquery created element

Question

This probably is a duplicate but I don't know how to express what is happening in a title description. I have an image element which i delete and re-create with the click of a button, basically i apply filters with php to an image, and delete the previous element to replace it with the new image to display the new filter.

the code to create the element:

function pictureReset(data) {
    $( ".filteredImg" ).remove();
    var elem = document.createElement("img");
    elem.setAttribute("class", "filteredImg");
    elem.setAttribute("height", "328");
    elem.setAttribute("alt", "");
    elem.src = 'contest/filtered_'+tempFilePath;
    document.getElementById("filteredImgContainer").appendChild(elem);
}

the code to apply the filter: (i have several filters but the code is the same, they just call a different php file

$('#sepia').click(function () {
    var filePathName = tempFilePath;
    $.ajax({
        type: 'POST',
        url: 'php/sepia.php',
        dataType : 'text',
        data: {
            FilePath : filePathName
        },
        success: function (data) {
            pictureReset();
        }
    }).done(function(response){console.log(response);});
});

now the problem is although it works fine on chrome, i.e. when i click the button the old image is removed and replaced with the new filtered image, on firefox although it refreshes, somehow it retrieves the old image (even though it doesn't exist because on the server if i retrieve the image the filter is applied), and displays the old filter instead of the new one. Any ideas as to why this is happening??

Answer 1

Apart from adding the parameters, you can also improve the code. Since you are already using jQuery.

You can replace this code:

function pictureReset(data) {
  $( ".filteredImg" ).remove();
  var elem = document.createElement("img");
  elem.setAttribute("class", "filteredImg");
  elem.setAttribute("height", "328");
  elem.setAttribute("alt", "");
  elem.src = 'contest/filtered_'+tempFilePath;
  document.getElementById("filteredImgContainer").appendChild(elem);
}

With:

 function pictureReset(data) {
    var elem = $('<img class="filteredImg" alt="" style="height:328px;" src="contest/filtered_' + tempFilePath + '?t="' + $.now() + ' />');
    $("#filteredImgContainer img.filteredImg").replaceWith(elem);
}

I used jQuery replaceWith for this code.