jQuery: Je définis une image spinner, puis je soumets le formulaire, mais l'image n'apparaît pas

Question

J'ai un lien de soumission de formulaire étiqueté "OK", et je veux avoir un spinner pour indiquer que quelque chose se passe quand on clique dessus . J'ai essayé d'ajouter une image à l'étendue cliqué avant de soumettre le formulaire, mais il ne semble pas:

function submitMyForm() { 
    $(this).html($(this).html() + "&nbsp;&nbsp;<img src='/img/spinner.gif'>"); 
    $("#my_form").submit(); 
} 

HTML:

<em class="ok_btn"> 
    <a href="javascript:void(0);" onclick="submitMyForm();">OK</a> 
</em> 

Il semble que la forme arrive soumettre avant que la page est re -peint. Est-il possible d'obtenir la page à repeindre, puis soumettre le formulaire?

Answer 1

$ (this) ne fera référence à rien parce que rien n'a été passé. Je pense que vous devez passer l'élément à la fonction avec:

<a href="javascript:void(0);" onclick="submitMyForm(this);">OK</a> 

alors les js deviendraient:

 
function submitMyForm(el) { 
    $(el).html($(el).html() + "  "); 

Answer 2

Essayez de changer cette ligne:

$(this).html($(this).html() + "&nbsp;&nbsp;<img src='/img/spinner.gif'>"); 

Pour:

$('body').append("&nbsp;&nbsp;<img src='/img/spinner.gif'>"); 

Je n'ai pas testé, mais je pense que cela devrait fonctionner.

Answer 3

La soumission d'un formulaire arrête TOUTES les autres exécutions. Donc, ce qui se passe probablement, c'est que votre HTML n'a pas le temps de se mettre à jour avant que votre action de soumission ne se produise. Essayez d'ajouter un délai:

function submitMyForm() { 
    $(this).html($(this).html() + "&nbsp;&nbsp;<img src='/img/spinner.gif'>"); 
    window.setTimeout(function(){ $("#my_form").submit()},500) 
} 

Answer 4

Je suggère, comme je l'ai mentionné dans mon commentaire, que vous voulez probablement ajouter l'image à un div. Quelque chose comme ceci:

... your html code here ... 
<div id="spinnerDiv"> 
</div> 

ajouter ensuite un délai d'attente à la forme comme ceci:

function submitMyForm() { 
    $("#spinnerDiv").html("<img src='/img/spinner.gif'>"); 
    window.setTimeout(function() 
    { 
     $("#my_form").submit(); 
    }, 500); 
}