Change divs background image using JQuery in a loop doesn't work on Google Chrome

Question

In my application I have for loop to change background image of two divs. The code is :

for (var i = 0; i < length; i++) {
   $("div_" + (i + 1)).css("background-image", "../imageFile.png");              
}

works on internet explorer, edge, Firefox but not on Google Chrome. On Google Chrome, changes only the last image.

Thanks.

Hi again, Thanks for your quick responses Chiristian and Nascheez! I apologize, I didn't write the all the code. In the original code, I put the right structure. And it works perfectly in other browsers. But on Google Chrome and Opera, it shows only the image of the last div.

The original code is :

function testFunction() {
        $.ajax({
            type: 'post',
            url: '@Url.Action("SomeAction", "SomeController")',
            data: {

            },
            async:false,
            dataType: 'json',
            success: function(dataPieces) {

                //I get all pieces whitout any error!
                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);
            }
        });
    }

_"changes only the last image"_ The code shouldn't change anything because there exists no `` element in HTML — Andreas, Apr 06 '17 at 09:50
[Setting background-image using jQuery CSS property](//stackoverflow.com/q/512054) — Tushar, Apr 06 '17 at 09:50
Looks like your CSS is not using the required `url` syntax. Check the answer in this possible duplicate of [**Setting background-image using jQuery CSS property**](http://stackoverflow.com/questions/512054/setting-background-image-using-jquery-css-property) — Nope, Apr 06 '17 at 10:28

score 0 · Accepted Answer · answered Apr 06 '17 at 14:06

I found the solution, the change image event triggers another event. The problem comes from the speed of Google Chrome. Other browsers don't have enough time to refresh Something but Google Chrome and Opera are speed enough. As a result, I changed my method, added a parameter to avoid calling of the other event.

Many thanks for your time.

CristianS9 · Answer 2 · 2017-04-06T12:36:20.183

-1

I made some tests and I wonder how that code works, I mean, trying to change the background without adding url() don't works for me. Try this:

for (var i = 0; i < length; i++) {

   $("#div_" + (i + 1)).css("background-image",`"url(` + dataPieces[i].ImagePath + `)"`);      
}

edited Apr 06 '17 at 12:36

answered Apr 06 '17 at 10:25

CristianS9

160
10

Thanks for your reply Cristian, I modified my question to be more clear. – Coskun Ozogul Apr 06 '17 at 12:23
@CoskunOzogul trye the next one then. U still need to have the `url()` to be able to chenage the background – CristianS9 Apr 06 '17 at 12:37
Cristian, in the dataPieces.ImagePath I have already the url. And it works for the last div. If i put a debugger and debug one by one on Google Crome, it works for all divs. I think it is a refresh problem of Google Chrome. – Coskun Ozogul Apr 06 '17 at 12:49

Change divs background image using JQuery in a loop doesn't work on Google Chrome

2 Answers2