CODEWITHSUNDEEP
javascriptjquery
JulianJ
JulianJ

Reputation: 1309

Loader not showing as expected

I have a page where the user can upload a photo. I want to show a 'loading...' message whilst the photo uploads to the server but for some reason this is not working. The message shows briefly whilst the user selects a file to upload but then disappears whilst the photo uploads. I think I am misplacing the code $('#loading').show(); in the wrong place. How can I make this work? Many thanks.

html

 <div class="loading" id="loading">
       <p>Loading...</p>
</div>

jquery

$(document).ready(function() { 
 $('#loading').hide();
//Upload photo

$(".upload-button").on("click", function (e) {

 e.preventDefault();
       $(".file-upload").click();
        $('#loading').show();//show the loader msg
  }); 

  $('#photoimg').on('change', function() {
 $('#loading').hide(); //hide the loader msg

$("#preview").html('');

$("#imageform").ajaxForm({
target: '#preview'

  }).submit();
});

Upvotes: 0

Views: 1188

Answers (1)

Adjit
Adjit

Reputation: 10305

It's more your .hide() function that would be giving you the problem. It's showing properly, but then hiding prematurely. You need to hide it after you upload the photo, and use the .ajaxForm options success to trigger a callback function.

Ultimately you can also add a beforeSubmit option to .ajaxForm to show the loader initially.

You can read more here - http://jquery.malsup.com/form/#options-object

$("#imageform").ajaxForm({
    target: '#preview',
    success: hideLoader
  }).submit();
});

function hideLoader() {
   $('#loading').hide();
}

Upvotes: 1

Related Questions