[AJAX] AJAX: effet de chargement sur formulaires

Bonjour,

J'ai pas mal de questions aujourd'hui... :oops:

Maintenant c'est un probleme avec un loader: J'ai un formulaire, et une fois cliqué le bouton de soumission est censé disparaitre au profit d'un petit GIF de chargement, jusqu'a ce que l'appel AJAX soit revenu dans la page.
Le probleme est que mon Submit ne disparait que lorsque l'appel AJAX est chargé.
Quelle est la solution pour, sur une unique action (onclick), avoir un effet immediat sur un element du style, puis le chargement des effets de l'appel AJAX?

Merci encore de votre aide!

Thomas

Citation:

---

Envoyé par nabab

Quelle est la solution pour, sur une unique action (onclick), avoir un effet immediat sur un element du style, puis le chargement des effets de l'appel AJAX?

---

Dans un premier temps, nous donner le code (html + JS) que tu utilises actuellement ;)

A+

Ok, j'ai fait plusieurs essais:

Ca, c'est la fonction pour mettre une image de chargement a la place du bouton:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function loadAjaxObject(Ele) { var me = document.getElementById(Ele); var Parent; if ( Parent = me.parentNode ) { Parent.removeChild(me); var loader = document.createElement('div'); loader.style.width = '16px'; loader.style.height = '16px'; loader.style.float = 'left'; Parent.appendChild(loader); var image = document.createElement('img'); image.src = '../_shared/images/loader.gif'; image.style.border = '0'; loader.appendChild(image); return true; } }

---

Et ca, c'est ma fonction qui renvoie du contenu par Ajax:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function doAjaxAction(File,Param1,Param2,Param3,Param4){ var myajax = new XMLHttpRequest(); myajax.open("POST", File); myajax.onreadystatechange = function() { if (myajax.readyState == 4 && myajax.status == 200) { eval(myajax.responseText); } } myajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); myajax.send('Param1=' + Param1 + '&Param2=' + Param2 + '&Param3=' + Param3 + '&Param4=' + Param4 ); }

---

Et donc dans ma page, j'ai un bouton qui fait:

Code:

---

1 2	<input type="button" value="Create Booking" class="user" id="button_ajax" onmousedown="loadAjaxObject(this.id);" onclick="doAjaxAction(\'php/test.php\');" />

---

Ca, c'est la 5000eme version car avant j'ai essaye de mettre les deux actions sur le meme trigger (onclick), conditionner l'action Ajax sur la fonction de chargement, appeler la fonction Ajax depuis la fonction de chargement, et vice-versa, j'ai essayé aussi d'utiliser d'autres readyState.

Rien n'a fonctionné...

Le but c'est simplement d'avoir ce petit graphique de chargement qui apparait au moment du clic, et non une fois que l'appel Ajax a été exécuté.

Merci de votre aide

Suffit de faire :

Code:

---

<input type="button" value="Create Booking" class="user" id="button_ajax" onclick="loadAjaxObject('button_ajax'); doAjaxAction('php/test.php');" />

---

Le mieux étant d'avoir une fonction pour afficher et une autre pour l'effacer (ou la même mais avec param ou test du display par exemple).
Tu appelerai alors cette fonction dans ta fonction ajax au tout début et ensuite l'autre (ou la même) juste après ton responseText ;)

Tschus ! Babaille ! A plouche !


PS : dans DoAjaxAction, ceci est préférable :

Code:

---

myajax.open("POST", File, true);

---