AJAX a javascript validace formuláře – problém se spinnerem

Popik

Ahoj nemůžu vyřešit jeden takový problém. Přes formulář zadávám data do tabulky. Aby to bylo více uživatelsky příjemné přidal jsem podporu AJAXu, takže při odeslání formuláře se znovu načte pouze tabulka…

Také jsem k této operaci přidal zobrazení spinneru aby bylo vidět, že se něco děje a zde je problém. Formulář má definován na některé prvky validační pravidla a pokud vyplnění formuláře těmto pravidlům neodpovídá zobrazí se klasicky alert se zprávou co se děje. Když tento alert odkliknu tak se ale zobrazí spinner a zůstane tam „na věky“.

Jak zařídit aby se v tomto případě spinner vůbec nezobrazil? Díky. Na závěr přikládám fragmen JS, který se stará o odeslání formuláře.

<script>

$("form.ajax").live("submit", function () {
        $(this).ajaxSubmit();
        return false;
});

$("form.ajax :submit").live("click", function () {
        $(this).ajaxSubmit();

        $('<div id="ajax-spinner"></div>').ajaxStop(function() {
                        $(this).remove();

                }).appendTo("body");


        return false;
});

</script>

Funguje to správně pokud formulář validací projde. Normálně se zobrazí spinner a po přidání záznamu do tabulky zase zmizí.

jtousek

Jestli to správně chápu, potřebuješ nějakou JS fci spouštět po úspěšné validaci fomuláře (tzn. ne jen tupě při odeslání).

Řešilo se to tady.

Popik

Ne ne to ne. Po úspěšné validaci potřebuju pouze formulář odeslat, což funguje. Při neúspěšné validaci se samozřejmě neodešle ale také nenastane událost nebo co to je ajaxStop() a spinner se neschová.

EDIT:

Tak nějaké řešení mám.

Používám doplněk Ajaxové formuláře s JQuery. Při chybné validace se provede tato podmínka a je vráceno null.

<script>
// validation
	if (form.get(0).onsubmit && !form.get(0).onsubmit()) return null;

</script>

Upravil jsem to tak aby to místo vrácení null schovalo div, který obsahuje spinner.

<script>

if (form.get(0).onsubmit && !form.get(0).onsubmit()){return  $("#ajax-spinner").hide();}

</script>

a změnil pořadí volání ve funkci pro obsluhu kliknutí na tlačítko

<script>

$("form.ajax :submit").live("click", function () {
       $("#ajax-spinner").show();
        $(this).ajaxSubmit();

        return false;
});

</script>

Editoval Popik (21. 9. 2010 15:47)