Něco jako nette.js s jQuery

Super! Díky!

ad obarvování: je to lepší?

Honza M. napsal(a):

…

Tak za tohle děkuju ještě víc :)

Editoval enoice (9. 2. 2009 15:16)

Jasně, od toho to tu je, aby se to používalo.

Zatim nefunguje pro MultipleSelectBox, kde se jako hodnota posila pole. V nasledujicim kodu v „values“ jeste je:

CONTACTS[] = 1
CONTACTS[] = 2

ale v
sendvalues uz je logicky jen posledni:

CONTACTS[] = 2

<script>
var values = form.serializeArray();

                for (var i = 0; i < values.length; i++) {
                        sendValues[values[i].name] = values[i].value;
                }

</script>

Honzo, feature request ,)

Keď chcem spraviť pekný prechod medzi updatom snippetu, napríklad fade, použijem:

<script>
                        if (data.snippets) {
                                for (var i in data.snippets) {
                                        $("#" + i).fadeOut('fast', function() {
                                          $("#" + i).html(data.snippets[i]);
                                          $("#" + i).fadeIn('fast');
                                        });
                                }
                        }
</script>

Nedá sa to spraviť nejak tak, aby som si mohol takýto efekt nastaviť bez toho aby som sa babral do tvojho pluginu? Dík.

Editoval Jod (21. 2. 2009 12:50)

Id by mělo teoreticky být unikátní. Pokud není, stránka je nevalidní a jsou s tím tyhle problémy.

Ideální by bylo, kdyby snippety byly označeny třídu a ne přes id. Anebo hlídat unikátnost toho id. To by mělo drobnou nevýhodu v tom, že by se takový vícenásobný snippet při aktualizaci přenášel vícekrát. K tomu se ale nějak musí postavit David, změna selektoru je spíše takový hack.

Etch napsal(a):

<?php
@{? $grid->renderPaginator()}
@{? $grid->render()}
@{? $grid->renderPaginator()}
?>

Zrovna toto jsem resil, snazil jsem se i generovat nazev snippetu dynamicky v sablone napr. renderPaginator(‚bottom‘), ale nic nefungovalo spravne, takze jsem to nakonec vyresil takto:

<?php
 {snippet paginator}
 @{? $grid->renderPaginator()}
 {/snippet}
 @{? $grid->render()}
 {snippet bottom_paginator}
 @{? $grid->renderPaginator()}
 {/snippet}
?>

Díky moc, si borec :)

BTW:

$('.hidden').hide();

;)

Zrovna asi před týdnem jsem si s tím hrál a zkošel na to napasovat DataGrid, tak tady máš:

• demo
• download

Pekny, ale bez JS se neudrzi vybrany select:) Cimz to je dost neuzivatelsky.

Po odeslání formuláře se selectem stačí přesměrovat (pokud nejde o ajaxový požadavek) a parametry se dostanou z POSTu do GETu a je po problému. Fixnul jsem to v tom archívu i v demu.

Není to dokonalé… Roman tam ještě nedal točítko :-D

Ahoj, vypadá to, že ajax v nefunguje v IE – zřejmě potíže s jquery.live.
Ve své aplikaci jsem live() zkusil nahradit pluginem livequery, zdá se, že to šlape.

No, ono je u toho live() v dokumentaci uvedeno:
„Currently not supported: blur, focus, mouseenter, mouseleave, change, submit“, čili v tom
je zřejmě zakopaný pes. Snad to brzy dopracují. To livequery funguje prakticky stejně (akorát to funguje :)

Hezka prace Honzo M.!

Vymyslel jsem ještě lepší ajaxování. Místo $.netteAjax bude možné použít normální funkce $.get, $.post a podobně. Jen pomocí funkce $.ajaxSetup nastaví nějaký defaultní callback, který se postará o snippety a tak.

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

	netteCallback: function (data) {
		// redirect
		if (data.redirect) {
			window.location.href = data.redirect;
		}

		// snipeti
		if (data.snippets) {
			for (var i in data.snippets) {
				jQuery.updateSnippet(i, data.snippets[i]);
			}
		}
	}
});

jQuery.ajaxSetup({
	success: function (data) {
		jQuery.netteCallback(data);
	},
	dataType: "json"
});

Použití je stejné, jen funkci $.netteAjax zaměníte za libovolnou standardní funkci, třeba $.get. Rozdíl nastane v případě, že budete chtít při dokončení ajaxového požadavku zavolat vlastní callback. Pokud budete chtít provést snippetování a podobně, tak je potřeba explicitně zavolat funkci $.netteCallback:

// chci kromě normálního zpracování ještě zobrazit hlášku
$.get("someUrl", function (data) {
	jQuery.netteCallback(data);
	alert("hláška");
});

Na závěr přidám upravený kód pro ajaxové formuláře:

jQuery.fn.extend({
	netteAjaxSubmit: function (callback) {
		var form;
		var sendValues = {};

		// odesláno na tlačítku
		if (this.is(":submit")) {
			form = this.parents("form");
			sendValues[this.attr("name")] = this.val() || "";

		// odesláno na formuláři
		} else if (this.is("form")) {
			form = this;

		// neplatný element, nic nedělat
		} else {
			return null;
		}

		// validace
		if (form.get(0).onsubmit && !form.get(0).onsubmit()) return;

		var values = form.serializeArray();

		for (var i = 0; i < values.length; i++) {
			var name = values[i].name;

			// multi
			if (name in sendValues) {
				var val = sendValues[name];

				if (!(val instanceof Array)) {
					val = [val];
				}

				val.push(values[i].value);
				sendValues[name] = val;
			} else {
				sendValues[name] = values[i].value;
			}
		}

		// odeslat ajaxový požadavek
		return jQuery.ajax({
			url: form.attr("action"),
			data: sendValues,
			type: form.attr("method") || "get",
			success: callback
		});
	}
});

Editoval Honza M. (8. 4. 2009 23:48)

Kód nemám, protože mi točítko uprostřed vyhovuje, ale udělalo by se to při kliknutí na odkaz asi takto (jestli jsem dobře pochopil z dokumentace ten jQuery offset).

$("a.ajax").click(function () {
	$.get(this.href);
	var ofs = $(this).offset();
	$("#tocitko").css({
		left: (ofs.left + 10) + "px",
		top: (ofs.top + 20) + "px"
	});
	return false;
});

Díky, to je to co sem potřeboval :)

Editoval Ola (21. 4. 2009 6:28)

Píšeš tam jako ukázku:

	// nastaví událost onclick pro všechny elementy A s třídou 'ajax'
	$("a.ajax").live("click", function(event) {
		$.get(this.href); // zahájí AJAXový požadavek

		// zobrazí spinner, signalizující uživateli, že se něco děje
		$('<div id="ajax-spinner"></div>').css({
			position: "absolute",
			left: event.pageX + 20,
			top: event.pageY + 40

		}).ajaxStop(function() {
			$(this).remove(); // po skončení spinner smaž

		}).appendTo("body");

		return false;
	});

To zobrazení toho ajaxloaderu nemusí být nutně v těle té funkce, může být i mimo a pak se bude provádět při každé detekci ajaxového požadavku, to je myslím jedna z jeho velkých předností :) možná by bylo zajívé pro čtenáře to tam zmínit (pokud to ještě jde upravit) než si to ráno budou lidi číst.

Vlastně jo, chybí tam ajaxStart, proto to nejede …už tam vidím něco co tam není.

	$("a.ajax").live("click", function () {
		$.get(this.href);
		return false;
	});

	// zobrazí spinner, signalizující uživateli, že se něco děje
	$('<div id="ajax-spinner"></div>').css({
		position: "absolute",
		left: event.pageX + 20,
		top: event.pageY + 40

	}).ajaxStart(function () {
		$(this).show();
	}).ajaxStop(function() {
		$(this).hide();
	}).appendTo("body").hide();

David Grudl napsal(a):

Honzo, jsi na Zdrojáku

Hezký… :-)

Už asi rozumím. A ty vyvoláváš Ajaxové požadavky i jiným způsobem, než přes tu knihovnu?

Když se spinner zobrazuje pomocí ajaxStartu, tak se zobrazí při jakémkoliv požadavku daném přes jQuery. Což kromě kliknutí na odkaz může být třeba ajaxové odeslání formuláře.

No nevím… Zavolá se vůbec ten $.netteCallback?

Tak ho zavolej… asi ho něco přepisuje.

No když nahraješ novou verzi toho pluginu, která je na webu v extras, tak tam žádná funkce $.netteAjax není a $.get opravdu volá $.netteCallback sám.