I am facing an issue in my application where I have a for loop to change the background image of two divs. The code snippet is as follows:
for (var i = 0; i < length; i++) {
$("div_" + (i + 1)).css("background-image", "../imageFile.png");
}
This code works on internet explorer, edge, and Firefox but not on Google Chrome. On Google Chrome, it only changes the last image.
Thank you!
Hello everyone, I appreciate the prompt responses from Chiristian and Nascheez! I must apologize for not including all the code initially. In the original code, I ensured that the structure was correct. It functions perfectly on other browsers. However, on Google Chrome and Opera, it displays only the image of the last div.
Here is the original code :
function testFunction() {
$.ajax({
type: 'post',
url: '@Url.Action("SomeAction", "SomeController")',
data: {
},
async:false,
dataType: 'json',
success: function(dataPieces) {
//I receive all pieces without any errors!
config.allPieces = dataPieces;
for (var i = 0; i < dataPieces.length; i++) {
$("#div_" + (i + 1)).css("background-image", dataPieces[i].ImagePath);
}
},
error: function(error) {
alert("9- La transaction a rencontré une erreur. \n" + error.message);
}
});
}