Zajaxování kódu získáného ajaxem

tttpapi

Ahoj,

pokusím se vysvětlit, co vlastně chci.

Mám formulář pro login generováný v Nette.

<form action="/nette/user/login?ajax=true" method="post" id="frm-userForm-form" class="panel ajax">
    <div class="header">
        <h2 class="title-main">Přihlášení</h2>
    </div>

    <div class="inner">
        <p class="label-focus">
            <label for="frm-userForm-form-email">E-mail</label>
            <span class="inp-fix inp-icon-before">
                <input type="text" name="email" data_icon="icon-message" id="frm-userForm-form-email"
 required data-nette-rules='[{"op":":filled","msg":"E-mail se musí vyplnit."},{"op":":email","msg":"E-mail
 není ve spravném tvaru."}]' class="inp-text inp-big">
                <span class="icon icon-message"></span>
            </span>
        </p>
        <p class="label-focus">
            <label for="frm-userForm-form-password">Heslo</label>
            <span class="inp-fix inp-icon-before">
                <input type="password" name="password" data_icon="icon-lock" id="frm-userForm-form-password"
 required data-nette-rules='[{"op":":filled","msg":"Heslo se musí vyplnit."}]' class="inp-text inp-big"
>
                <span class="icon icon-lock"></span>
            </span>
        </p>
        <p>
            <a href="/nette/user/forgotten-password">Zapomenuté heslo</a> <span class="light">|</span
>
            <a href="/nette/user/login#tab=nova-registrace">Nová registrace</a>
        </p>
        <p class="btn-wrap">
            <button type="submit" class="btn btn-blue btn-icon-after btn-icon-after-thin">
                <span>
                    Přihlásit se
                    <span class="icon icon-arrow-right-small"></span>
                </span>
            </button>
        </p>
    </div>
<input type="hidden" name="do" value="userForm-form-submit"></form>

A pak mám js komponentu, která si načte ajaxově ze zadané URL tento formulář a zobrazí jej. (Ten formulář se vrací jako html výše)

Pokud však tento formulář zkusím odeslat, tak se odesílá neajaxově a tudíž na URL ze které se načetl tento form.

Jak zařídím, aby se ten formulář odeslal taktéž ajaxově? Stačí pouze znovu zavolat init z nette ajax?

vcernik

Init znova zavolat nejde.
Tu komponentu načítáš pomocí Nette ajax?

Myiyk

Asi používáš vlastní JS.
Doporučuji použít doplněk https://componette.org/search/?…

Budeš mít někde takovýhle kód

$("#form").submit(/* zpracování */);

Použij místo něj tohle

$(document).on("submit", "#form", /* zpracování */);

Je tam zásadní rozdíl ve funkčnosti. V prvním případě při načtení pomocí AJAX se kód neaplikuje.
V druhém už to funguje.

Nějaké vysvětlení okolo http://stackoverflow.com/…ick-vs-click

Editoval Myiyk (24. 7. 2015 12:36)

akadlec

dyť píše že má nette-ajax a zda pustit znova jeho init…to co uvádíš ty není zrovna best practice, házet všechny události na dokument udělá to že pokud jich budeš mít více tak celou stránku zabiješ na paměti. Pokud už používat .on() metodu z jQuery tak s rozumem, je sice fajn že si události navěsíš i když elementy ještě nemáš při načetení stránky ale je to cesta do pekel, obecně celé jQuery, ale to je kapitola sama pro sebe ;)

akadlec

jak ten formulář v té komponentě načteš? Vlastním xhr dotazem nebo pomoci nette-ajax?