display loading gif on multi-part form submit

Question

Im trying to display a loading gif before submitting a multipart-form (file upload), this is my code.. but the image is not displaying.. if i remove the submit() it displays, so.. is not a path or syntax problem.

$('#btnSubmit').click(function() {
    document.getElementById('loader').innerHTML = "<img src='<?= url::base() ?>themes/img/loading.gif' border='0' />";
    $('#uploadform').submit();
});

Answer 1

If you are using the actual builtin form submit method then it is because it starts loading the page long before your gif is loaded I suspect.

I usually use httprequests to dynamically build content so when I submit a new request I change the contents of the page to the loading image until the new page is received.

Answer 2

I guess the problem was the image request handled by apache.

So i load the image on the div in hide it.

then i show it from javascript:

document.getElementById('loader').style.display = "inline";

Worked like a charm ;)

Answer 3

$('#loader').html = "themes/img/loading.gif' border='0' />";

This will insert the loading image properly, although unless you are telling jQuery to submit the form with $.post, then you will be taken to a new submit page so you won't see the image anyway.

Answer 4

Agree with Teja's comment. Unless you are doing the submit asynchronously then whether or not the gif display's is really based upon how quickly the browser starts loading the next page (or postbacked page).

What you could do if you really want to show the gif (will have to be ajax of some description though) is...

$("#btnSubmit").click(function(e){
    e.preventDefault(); // stops any 'immediate' post back or re-direction
    $("#loader").hide()
    .html("<img src='<?= url::base() ?>themes/img/loading.gif' border='0' />")
    .delay(1000).fadeIn(200, function(){
        // submit form using $.ajax or whatever suits - rebuild page on callback or navigate to new page
    });
});

Fundamentally speaking though as both Jonas and Teja have alluded to, if you are not doing ajax - then the user feedback is already there (ie the browser's version of a 'loader gif' will display because it's trying to load a new page) - so why bother going round the houses just to get a loader gif on your page and make it look "Web 2.0"?

Either do ajax, or let the browser give the user it's visual feedback.