Array appears in the wrong order

Question

I tried checking whether the image file on the array was on the server and then displayed the image.

array in the database

images in file explorer

// Edit button
<button class="btnEdit" data-toggle="modal" data-target="#modalEdit" data-images="{{ $product->images }}">Edit</button>


// Edit Product
$('#products-table').on('click', '.btnEdit', function() {
  var imageArray = $(this).data('images');
  var baseUrl = window.location.origin;

  $(imageArray).each(function () {
    var imageUrl = baseUrl + '/img/product-img/' + this;

    // check to the server
    $.get(imageUrl).done( function() { 
      // show images
      $('#modalEdit #btnUploadImage').before(`
        <div class="image-box" data-modal-id="#modalEdit" data-original-background="` + imageUrl + `" style="background-image: url('` + imageUrl + `');">
          <div class="actions">
            <a class="btnSetThumbnail">
              <i class="mdi mdi-radiobox-blank"></i>
            </a>
            <a class="btnEditImage"data-toggle="modal" data-target="#modalEditImage">
              <i class="mdi mdi-pencil-outline"></i>
            </a>
            <a class="btnRemoveImage">
              <i class="mdi mdi-delete-outline"></i>
            </a>
          </div>
        </div>
      `);
    });
  });
});

I have tried several times, some have appeared in the right order,

and some have appeared in the wrong order.

if I delete this code $.get(imageUrl).done();, the image appears in the correct order, but I have to check the file.

I also have the same code for the product view function, it works well, all images appear in the right order, how do I fix this?

// Show Product
$('#products-table').on('click', '.btnShow', function() {
  var imageBox = $('#modalShow .image-box-static');
  var imageArray = $(this).data('images');
  var baseUrl = window.location.origin;

  $(imageArray).each(function (i) {
    var imageUrl = baseUrl + '/img/product-img/' + this;

    $.get(imageUrl).done( function() {
      $(imageBox[i]).css('background-image', 'url(' + this.url + ')');
      $(imageBox[i]).show();
    }).fail( function() {
      $(imageBox[i]).css('background-image', 'url(' + baseUrl + '/img/product-img/image-not-found.png)');
      $(imageBox[i]).show();
    });
  });
});

Well since you make a network request your html is added to the dom when the request is `done` you can't know how long a request will take. — errnesto, Mar 01 '19 at 11:39
`$.get(imageUrl).done()` is an asynchronous function running in a `.each()` loop. You will sometimes get the right order, sometimes not. "In most cases you will want to add `async: false` to the AJAX call, otherwise it will return at some random interval and can cause erratic results in your scripting." - taken from here - https://stackoverflow.com/a/3381694/7867822 — Anurag Srivastava, Mar 01 '19 at 11:39

score 0 · Answer 1 · answered Mar 01 '19 at 11:51

The difference with the code block for the product view is that you are updating the css and displaying an html element that already is on the screen in the right place/order. In the first code block you are also adding the html element into your page from inside the done callback. This causes the the html element to be added after the image request is completed

A way to prevent this is to add a hidden html element outside the done callback and use the done callback to display it when the image request is completed. You can than also use the fail function to remove the html element when the image is broken

Array appears in the wrong order

1 Answers1