Form uvnitř snippetu se při překreslení neodešle

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

Používám form uvnitř snippetu a narazil jsem na problém. Pro upřesnění používám knihovnu nette.ajax.js a pod textem vidíte šablonu. Pokud při prvním načtení stránky form odešlu, není žádný problém. Pokud se však snippet překreslí, tak form přestane reagovat na stisk tlačítka. Bude to tím, že na formu neposlouchá javascript event pro AJAX překreslení. Divím se, že to není obecně vyřešeno již v knihovně, protože na odkazech (a.ajax) to funguje. Jak se toto řeší?

...
        {snippet levels}
        <table class="table table-responsive table-striped">
            <tr><th>Level</th><th>Rounds</th><th></th></tr>
            <tr n:foreach="$levelList as $level">
                {if $editingLevelId == $level->id}
                    {form editLevelForm, class=>'ajax'}
                        <td>{input name, defaultValue=>$level->name, class=>'form-control'}</td>
                        <td>{input rounds, defaultValue=>$level->rounds, class=>'form-control'}</td>
                        <td>
                            {input save, class=>'ajax btn btn-sm btn-default'}
                            {input level_id}
                            <a n:href="redraw!" class="ajax btn btn-sm btn-default"><i class="fa fa-ban"></i></a>
                        </td>
                    {/form}
                {else}
                <td>{$level->name}</td>
                <td>{$level->rounds}</td>
                <td>
                    <a n:href="deleteLevel!, levelId => $level->id" class="ajax btn btn-sm btn-default">x</a>
                    <a n:href="editLevel!, levelId => $level->id" class="ajax btn btn-sm btn-default"><i class="fa fa-edit"></i></a>
                </td>
                {/if}
            </tr>
            <tr>
                {form addLevelForm, class=>'ajax'}
                    <td>{input name, class=>'form-control'}</td>
                    <td>{input rounds, class=>'form-control'}</td>
                    <td>{input save, class=>'ajax btn btn-sm btn-default'}</td>
                {/form}
            </tr>
        </table>
        {/snippet}
...
David Grudl
Nette Core | 8166
+
0
-
dreken
Člen | 36
+
0
-

Možná ano, i když aktualizace na nejnovější netteForms.js můj problém nevyřešila…

dreken
Člen | 36
+
0
-

Problém jsem odložil a teď ho řeším znova. S netteForms.js to pravděpodobně nesouvisí. Zkoušel jsem si přepsat funkci v $.nette.init(function (ajaxHandler) {… co nejjednodušším kódem, analyzoval jsem nette.ajax.js a taky nic. Přišel jsem ale na to, že toto chybné chování se projevuje v Chrome, ale např. v Edge vše funguje jak má. Any ideas?

Editoval dreken (2. 9. 2016 20:30)

Machy8
Člen | 59
+
0
-

A zachycení na jQuery „on“ nefunguje? Měl by zachytit i kliknutí na dynamicky přidané elementy.

Např.

$( "body" ).on( "click", '.myButton', function() {
	$.nette.ajax({
   		url: ...,
    	off: ['snippets']
	});
});
dreken
Člen | 36
+
0
-

Možná by to šlo takhle obejít. Ale jak tímto odeslat formulář přes POST?

dreken
Člen | 36
+
+1
-

Kód uvnitř tohoto callbacku se vykoná při každém překreslení snippetu

$.nette.init(function (ajaxHandler) {
    $("a.ajax").off("click", ajaxHandler);
    $("form.ajax").off("submit", ajaxHandler);
    $("form.ajax :submit").off("click", ajaxHandler);

    $("a.ajax").on("click", ajaxHandler);
    $("form.ajax").on("submit", ajaxHandler);
    $("form.ajax :submit").on("click", ajaxHandler);
});

Záhadou je, že to funguje na odkazy, ale na formy ne. Plus ta nefunkčnost na Chrome a na Edge to jede…

Machy8
Člen | 59
+
0
-

Nebo mě napadlo, že by ti možná mohlo stačilo po překreslení snippetu jen znovu zachytit událost.

Nějak takto (píšu z hlavy, tak to možná bude chtít upravit):

$.nette.ext('refreshFormHandler', {

		complete: function () {

			// Pro každý překreslený snippet, který obsahuje formulář
			$('.snippetWithForm').each(function () {
				var self = $(this),
					snippetForm = self.find('form.ajax');

				snippetForm..netteAjaxOff();
			});
		}
	});

Osobně na ajax využívám poslední dobou pouze Nittro framework. Doporučuju zkusit.

Editoval Machy8 (3. 9. 2016 0:15)