Form uvnitř snippetu se při překreslení neodešle
- dreken
- Člen | 36
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}
...
- dreken
- Člen | 36
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)
- dreken
- Člen | 36
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
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)