Ajax odeslání formu přes onchange select boxu

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
d@rkWolf
Člen | 163
+
0
-

Zdravím, potřeboval bych poradit/vysvětlit věc, na kterou jsem narazil při překreslování snippetu odesláním formuláře výběrem v Select boxu. Možná se na to dívám špatně, nevím.

Formulář mám přímo v Presenteru(vím, že by měl být v komponentně, ale nejsem původní autor a nemám bohužel dost času všechno to předělat):

<?php
    protected function createComponentVariantForm() {
		...kód pro získání pole variant
        $form = new Form();
        $form->getElementPrototype()->class = 'ajax form-inline';
        $form->addSelect('variant', 'Varianta', $variants)
            ->setAttribute('class', 'form-control text-gray parent-ajax-submit')
            ->setAttribute('onchange','this.form.submit()')
            ->setDefaultValue($this->getParameter('variantId') ? $this->getParameter('variantId') : null);
        $form->addSubmit('submit');
        $form->onSuccess[] = callback($this, 'variantFormSubmitted');
        return $form;
    }

    public function variantFormSubmitted(Form $form) {
        $values = $form->getValues();
        $variantId = $values->variant == "" ? null : $values->variant;

        if (!$this->isAjax()) {
            $this->redirect('this', array('variantId' => $variantId));
        } else {
            $this->redrawControl('foodDetail');
        }
    }
?>

A v šabloně pak:

<?php
{snippet foodDetail}
...nějaké html
{if count($food->variants) > 0}
	{form variantForm}
		{input variant}
	{/form}
{/if}
...nějaké html
{/snippet}
?>

V aplikaci jsou nalinkované js netteForms a nette.ajax.

Select obsahuje nějaké varianty ceny zboží, takže při výběru se změní snippet kde je cena/název/popis a kód v tlačítku „do košíku“ aby se do něj hodila správná věc.

Formulář má nastavenou třídu ajax, ovšem při pokusu o odeslání metodou „onchange“ na selectboxu se ajaxem neodešle. Vždy překreslí celou stránku. Pokud jsem odstavil „onchange“, vykreslil si do šablony submit tlačítko, tak přes submit tlačítko se formulář ajaxem odesílá.

Hledal jsem tady na fóru, co dělám špatně s tím onchange submitem, našel jsem různé varianty jako přímo od Vojty Dobeše autora nette.ajax:

<script>
$('select').change(function (e) {
    $(this).closest('form').submit();
});
</script>

nebo

<script>
$.nette.ext('select-onchange', {
    load: function () {
        $('select').change(function (e) {
                $(this).closest('form').submit();
            return false;
        });
    }
});
</script>

A nic z toho nefungovalo, vyzkoušel jsem i několik dalších variant, ale cokoliv, co odkazuje na submit formuláře se nechytalo. Byl jsem už celkem zoufalý, když jsem našel tento tip odeslat formulář „clickem“ na tlačítko:

<script>
$("[data-submit-checkbox]").change(function(e)) {
    $(this).parent("form").find("input[type=submit]").click();
});
</script>

A tato varianta lehce upravená funguje(onchange v setAttribude formuláře je odstraněný, mám JS ve zvláštním souboru, v šabloně přidaný submit button a skrytý css třídou hidden), najednou se formulář výběrem v selectu odesílá správně ajaxem, jenže jsem naprosto bezradnej v tom, jaký je v tom rozdíl, proč to, co jsem našel na fóru mnohokrát nefungovalo, zatímco verze s click ano, byl by někdo schopný mi poradit/vysvětlit, čím to je? Jestli je tam nějaký důvod ve způsobu použití, nebo co mi uniká?