How to refresh images without page reloading after ajax call?

Question

I have a script below that uploads images to the server. Upon completion it updates the img source by html. The issue I'm having is that I wrote my php code to rename the files to a predefined name (ext-pix0.png, ext-pix1.png, ext-pix3.png, etc.) when they are being uploaded. Because of this, the pictures on the screen won't refresh even though the new images replaced the old ones when uploading is done. I also turn off no cache, but it doesn't work. How do I get around this issue?

SCRIPT

<script>
  $('input[name="ext_pix[]"]').on('change',function(){
    var account_list = $('#account_list').val();
    var order_list = $('#order_list').val();
    var id_list = $('#id_list').val();
    var formData = new FormData($(this).parents('form')[0]);
    $.ajax({
      url: 'sql/ext-pix-upload.php',
      type: 'POST',
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success:function(data){
        $('#ext-pix0').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix0.png" height="103.5%" width="100%"/>').fadeIn(500);
        $('#ext-pix1').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix1.png" height="103.5%" width="100%"/>').fadeIn(500);
        $('#ext-pix2').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix2.png" height="103.5%" width="100%"/>').fadeIn(500);
        $('#ext-pix3').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix3.png" height="103.5%" width="100%"/>').fadeIn(500);
      },
      error: function(data){
      }
    });
  });
</script>

HTML

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>

      <form>
        <div class="card-wrapper">
          <div class="card mt-3">
            <h5 class="card-header pb-2">Exterior Pictures</h5>
            <div class="card-block" style="height:322px">
              <div style="height:50%">
                <div id="ext-pix0" class="ext-pix">
                  <img src="images/profile/property-pix.png" height="103.5%" width="100%"/>
                </div>
                <div id="ext-pix1" class="ext-pix">
                  <img src="images/profile/property-pix.png" height="103.5%" width="100%"/>
                </div>
              </div>
              <div class="lower-row">
                <div id="ext-pix2" class="ext-pix">
                  <img src="images/profile/property-pix.png" height="103%" width="100%"/>
                </div>
                <div id="ext-pix3" class="ext-pix">
                  <img src="images/profile/property-pix.png" height="103%" width="100%"/>
                </div>
              </div>
              <div class="ext-btn">
                <input id="ext_pix" class="hidden" name="ext_pix[]" type="file" accept="image/*" multiple/>
                <label class="gi gi-camera mb-0 text-white" for="ext_pix" title="Change Picture"></label>
              </div>
            </div>
          </div>
        </div>
      </form>

Answer 1

Why don't you try to update img element in html file with id, inside the onSuccess() of ajax.

   <img id="img_id" src="#"/>

OnSuccess function of Ajax,

success: function (data) {  

          $("#img_id").attr("src", data.pictureUrl);    

     }

Answer 2

Clear the images first?

    success:function(data){
    $('#ext-pix0').html('');
    $('#ext-pix1').html('');
    $('#ext-pix2').html('');
    $('#ext-pix3').html('');
    $('#ext-pix0').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix0.png" height="103.5%" width="100%"/>').fadeIn(500);
    $('#ext-pix1').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix1.png" height="103.5%" width="100%"/>').fadeIn(500);
    $('#ext-pix2').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix2.png" height="103.5%" width="100%"/>').fadeIn(500);
    $('#ext-pix3').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix3.png" height="103.5%" width="100%"/>').fadeIn(500);
  },

Answer 3

Try like this:

success:function(data){

    $('#ext-pix0').fadeOut('500', function(){
         $(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix0.png");
         $(this).fadeIn(500);
    });

    $('#ext-pix1').fadeOut('500', function(){
         $(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix1.png");
         $(this).fadeIn(500);
    });

    $('#ext-pix2').fadeOut('500', function(){
         $(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix2.png");
         $(this).fadeIn(500);
    });

    $('#ext-pix3').fadeOut('500', function(){
         $(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix3.png");
         $(this).fadeIn(500);
    });

},

Answer 4

fadeOut "$('#ext-pix...')" before calling AJAX

 success:function(data){
        for(i=0;i<=3;i++){
            $('#ext-pix'+i).html('');
            let Image = $('<img/>',{src:'accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix'+i+'.png' , style:'height:103.5%;width:100%';});
            $('#ext-pix'+i).html(Image).fadeIn(500);         
         }
    },

Answer 5

Please update what response you are getting in data in success function and update the src element only in ajax success. OR instead assign some class or ID to img tag and update only the src element.

<img class="ext-pix0" id="ext-pix0" src="images/profile/property-pix.png" height="103.5%" width="100%"/>

updated Script

success:function(data)
{
    for(vari=0;i<data.length.i++)
    {
      $('#ext-pix'+i).attr(src,'data[i].url').fadeIn(500);
    } 

  },