Submit input s Ajaxovým spinnerem
- worsik
- Člen | 40
Ahoj,
hledal jsem a nenašel, takže se ptám :o)
Mám formulář pouze s tlačítky „ano“ a „ne“.
Tento formulář zobrazuji pro potvrzení importu dat z importních souborů do
DB.
Protože ale handler, který obsluhuje formulář trvá díky načítání
souborů strašně dlouho (ukládá třeba 1600 záznamů z 15ti souborů),
chtěl bych zobrazit spinner, který uživateli řekne, že se pořád něco
děje a který po načtení stránky zmizí.
Našel jsem od Davida řešení pro odkazy (<a>)
<script>
$(function() {
// nastaví událost onclick pro všechny elementy A s třídou 'ajax'
$("a.ajax").live("click", function(event) {
$.get(this.href); // zahájí AJAXový požadavek
// zobrazí spinner, signalizující uživateli, že se něco děje
$('<div id="ajax-spinner"></div>').css({
position: "absolute",
left: event.pageX + 20,
top: event.pageY + 40
}).ajaxStop(function() {
$(this).remove(); // po skončení spinner smaž
}).appendTo("body");
return false;
});
});
</script>
, ale narazil jsem na pár maličkostí.
- mám dvě tlačítka submit, tedy neřeším $form->onSubmit[], ale $form[‚ano‘]->onClick[] a $form[‚ne‘]->onClick[]. Když pak navěsím ajaxem spinner přes onClick, přepíšu volání handleru. Spinner se zobrazí, ale form se neodešle.
Je možnost, jak navěsit zobrazení spinneru, provést handler formuláře a
pak spinner zase odstranit?
Nejsem moc velký JavaScripter :o)
Ideální by bylo, kdyby se zobrazení spinneru dalo navěsit na jinou událost, která se taky děje při onclick. Pak by se snad provedl i onClick handler a dalo by se postupovat jako u odkazu <a>