Invalidace snippetu s formulářem zruší JS validaci

tipnul bych si, ze to bude tim, ze inicializace prislusneho JS se provadi pouze pri udalosti ‚load‘, ktera se vola IMHO jenom po prvnim nahrani stranky do prohlizece…ale kdyztak me opravte:-)

Resenim by bylo udelat inicializaci treba pres livequery a podobne utilitky.

Editoval arron (16. 12. 2010 16:57)

zkusil sem

<script>
$(document).ready(function(){
    $('#frmorderForm-email').live('change', function(){
        var sel = $(this);
        $.get("?do=loadData", {"value": sel.val()});
    });
});
</script>

ale bez vysledku, funguje to porad stejne… jak znova aplikovat JS na formular?

Livequery je zbytečné, ne? Od verze 1.3 má jQuery live() a má sice občas problém, ale se selektem přes id by to fungovat mělo.

Ten kod, co jsi poslal, tak resi jenom co se stane po updatovani snippetu, ale neresi pocatecni inicializaci, to je pravda. Pri psani prospevku vyse mi to nedoslo…to by chtelo jeste nejak dotahnout…

CODE!

Problem .live je prave hlavne v tom, ze je potreba mit dany callback navazany na nejaky konkretni event (popr. na nekolik eventu). Ja jsem presne tohle resil v pripade Gridita a vyresil jsem to prave pres livequery, ktere se mi jednak postara o pocatecni inicializaci, ale hlavne, kdykoliv se na strance objevi nejaky element, ktery vyhovuje danemu jQuery selectoru, tak livequery hned spusti danou funkci, takze probehne opetovna inicializace daneho elementu. Zatim se mi to nepovedlo vyresit nejak elegantneji, ale pokud to nekdo vi, jak to udelat pres .live, tak se rad poucim :-)

Ono se to celkove resi ponekud komplikovane (tedy alespon me, protoze se s JS moc nekamaradime). Ja jsem si tak trochu prepsal Gridito, a abych ho donutil delat to, co si predstavuju, tak jsem musel zkombinovat vyuziti livequery, jQuery doplnku regex a prave vlastni udalosti pri updatovani snippetu.

Editoval arron (22. 12. 2010 0:19)

Ajta, koukam, ze jsem toho zmenil vic:-) Ale byl to jenom takovy neskodny refactoring. Ale pro prehlednost sem postnu jak se to cele zmenilo a proc:-)

V puvodnim jquery.nette.js bylo tohle (pouze relevantni kus kodu):

		updateSnippet: function (id, html) {
			$("#" + id).html(html);
		},

Ja jsem to upravil naslednovne:

		updateSnippet: function (id, html) {
			var el = $("#" + id);
		jQuery.nette.changeContent(el, html);
		el.trigger('snippedUpdated', [el]);
		},

	changeContent: function (element, content) {
		element.html(content);
	},

Funkce changeContent je jenom vyrefactorovane samotne zmeneni dat, aby se ev. dalo jednoduse prepsat na neco jineho (treba nejaky hezky efekt).

Takze funkce updateSnippet udela nasledujici:

• nejdrive si zjisti spravny element podle id
• zavola funkci pro zmenu obsahu daneho elementu
• odpali udalost „snippedUpdated“ na danem elementu, aby se kdyztak mohly spustit dalsi akce, ktere se maji stat po updatovani snippetu. Takova obsluha teto udalosti vypada treba takhle (je to vytrzene z kontextu – konkretne z me upravy Gridita – ale pro nazornost by to melo stacit):

	//funkci obslujujici udalost se predava i jQuery instance elementu, na kterem byla udalost vyvolana
	$(this).bind('snippedUpdated', function (event, element) {
		_this.loadDialog('Dialog', element);
	});

No a to je vsechno :-) Urcite by se to dalo udelat i nejak hezceji, ale moje schopnosti programovani v JS jsou omezene:-)

cuga napsal(a):

Pokud Ti spravne rozumim, tak nemas tak uplne pravdu:-)
To co jsem popsal funguje nasledovne:
1) Neco invaliduje snippet
2) jquery.nette.js nahraje data a prekresli snippet tak, jak to dela normalne, plus jeste k tomu na prislusnem elementu (zpravidla divu) zavola udalost ‚snippedUpdated‘. A prave tady si myslim, ze by se dalo na tuhle udalost navesit nejake nove zavolani Nette.initForm z netteForms.js.

Pak me jeste napada dalsi moznost, prepsat tu inicializaci primo v netteForms.js na livequery, popripade proste nejak jinak :-)

opravdu nikdo nevi, jak znovu spustit inicializaci JS v invalidovanem snippetu?

Na tento nedostatek jsem také narazil a musím uznat, že to je achylovou patou Nette 2.0. V podstatě to výrazně a téměř omezuje sílu a využití snippetů.

Po celodením trápení jsem si pro svou aplikaci našel jisté řešení, které se zdá být funkční. Bohužel to není v core Nette a je to pouze nadstavba v mé aplikaci.

Použité instalace: Apache 2.2, PHP5.3, Nette2.0alfa, vývojové prostředí NetBeans, …

To co jsem potřeboval zajistit a jak je zde i správně zmíněno, je znovu načtení inicializace pro formuláře, které se volá pouze při prvním nahrávání stránky, a to pokaždé, kdy dojde k využití snippetů.

Upravil jsem proto v netteForms.js

<script>
// Funkce je vyuzivana k zajisteni reinicializace validatoru po
// prekresleni snippetu.
Nette.reinitializeForms = function() {
	for (var i = 0; i < document.forms.length; i++) {
            Nette.initForm(document.forms[i]);
        }
}
// puvodni zmenena definice, neni nutna.
Nette.addEvent(window, 'load', function () {
    Nette.reinitializeForms();
});
</script>

Následně jsem pak vytvořil novou třídu, která dědí z AppForm.

<?php
/**
 * Nova trida pro vytvareni formularu. Jen pro upravu renderovani.
 */
class MyAppForm extends NAppForm {
    /**
     * Redefine render metody pro vykresleni formulare.
     */
    public function render() {
        parent::render();
        echo $this->renderJavaScripts();
    }

    /**
     * Invalidace snippetu s formulářem zruší JS validaci.
     * Toto je metoda, ktera zajisti znovu nacteni validaci pro formulare na strance.
     * Metoda se bude volat na zaver renderu formulare v ramci prekresleni ve snippetu.
     * Dokud to nebude vyreseno jinak, v ramci frameworku Nette.
     */
    public function renderJavaScripts() {
        $java_scripts = "
        <script language='javascript' type='text/javascript'>
                Nette.reinitializeForms();
        </script>
		";
        return $java_scripts;
    }
}
?>

To je praktický celé. Teď už jen vytvářím formuláře z nové třídy MyAppForm. Nyní se při každém překreslení formuláře inicializují všechny na stránce zavoláním Nette.reinitializeForms();

Chbox napsal(a):

nestačí přes livequery zavolat Nette.addEvent ?

Používám JQuery 1.4, a pokud jsem to dobře pochopil, livequery již není třeba. Takže ho nevyužívám. Každopádně jsem s tím experimentoval celý den a zmíněný způsob zkoušel také. Bohužel to mělo negativní efekt, že se formuláře překreslovali 2×, nebo se validační podmínka vyhodila 2×, adt…

To co jsem uvedl, bylo to nejelegantnější co jsem za ten den vyplodil a jediné fukční. Stála mi na tom celá funkčnost mé aplikace a jsem rád, že se mohu pustit do dalšího vývoje.

avalakazar: diky za aspon nejake reseni, tez jsem zkousel s live i livequery vselijake kejkle a bezvysledne

PS: stačit to bude i takto – inicializují se pouze všechny formy, které se nacházejí v invalidovaném snippetu

if (payload.snippets) {
	for (var i in payload.snippets) {
		jQuery.nette.updateSnippet(i, payload.snippets[i]);
			jQuery("#" + i + ' form').each(function(i, val) {
				Nette.initForm(val);
			});
		}
	}
}

// edit: opravena chybička

Editoval ji_ri_k (11. 2. 2011 22:11)

Nebyla by prosim jeste nejaka rada, pokud pouzivam addDatePicker ? stejne tak i prestane na strance fungovat i napr.

$('a[data-confirm]').click(function(e){
	if (!confirm($(this).data('confirm'))) {
	    e.stopImmediatePropagation();
	    return false;
	}
    });

Diky..
Confirm jsem upravil, ale jak upravit toto, prosim :
Nekde jsem videl ukazku .live(‚each‘, function() … ale to nezabere…

Dekuji !!

$("input.date").each(function () { // input[type=date] does not work in IE
	var el = $(this);
	var value = el.val();
	var date = (value ? $.datepicker.parseDate($.datepicker.W3C, value) : null);

	var minDate = el.attr("min") || null;
	if (minDate) minDate = $.datepicker.parseDate($.datepicker.W3C, minDate);
	var maxDate = el.attr("max") || null;
	if (maxDate) maxDate = $.datepicker.parseDate($.datepicker.W3C, maxDate);

	el.get(0).type = "text"; // changing via jQuery is prohibited, because of IE
	el.datepicker({
	    minDate: minDate,
	    maxDate: maxDate
	});
	el.val($.datepicker.formatDate(el.datepicker("option", "dateFormat"), date));
    });