nette.ajax.js – alt. obsluha pro AJAX s jQuery

Existuje do tohoto doplňku rozšíření pro potvrzení akce? Budu chtít smazat záznam → vyskočí dialog: Opravdu chcete smazat tento záznam? (Potvrzení záznam smaže)

@**vojtech.dobes**:
Díky, to by bylo super. Ale jak by mel vypadat odkaz aby se na něj zavolala tahle funkce?

Udělal jsem to s drobnou změnou, takže:

<a n:href="Smazat!" data-ajax-confirm="Opravdu smazat?">Smazat</a>

Zdravim,

zda se me velmi sikovny tento js a tak bych rad na nej presel. Muze me prosim jen nekdo poradit, jak na to…

Mam uz nejakou dobu bezici aplikaci a postupem jsem nabalil radu JSek (nektera se tam uz i mozna perou a pochopil jsem, ze tento script by mohl nektere i nahradit) a vzhledem k tomu, ze JS neni moje silna stranka :D … tak prosim o radu, jako blbemu:

Ted nacitam tyto JS v @layoutu

	<script type="text/javascript" src="{$basePath}/js/jquery.min.js"></script>
	<script type="text/javascript" src="{$basePath}/js/jquery.nette.js"></script>
<script type="text/javascript" src="{$basePath}/js/netteForms.js"></script>
	<script type="text/javascript" src="{$basePath}/js/jquery-ui-1.8.11.custom.min.js"></script>
	<script type="text/javascript" src="{$basePath}/js/jquery.ui.datepicker-cs.js"></script>
	<script type="text/javascript" src="{$basePath}/js/jquery.livequery.js"></script>
	<script type="text/javascript" src="{$basePath}/js/jquery.dimensions.js"></script>
	<script type="text/javascript" src="{$basePath}/js/jquery.tooltip.js"></script>
	<script type="text/javascript" src="{$basePath}/js/jquery.ajaxform.js"></script>
	<script type="text/javascript" src="{$basePath}/js/main.js"></script>
	<script type="text/javascript" src="{$basePath}/js/jquery.nette.dependentselectbox.js"></script>
	<script type="text/javascript" src="{$basePath}/js/grid.js"></script>

Postupne jsem si doupravoval soubor main.js, kde jsem si myslel, ze pridam onen init() dle example.js, ale jakmile to udelam, prestame ne valit jakykoliv ajax (formy, snippety, datepicker..). Obsah main.js:

jQuery(function($){

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

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

    $('a.ajax').live('click', function(event){
	$.get(this.href);

	$("#ajax-spinner").show().css({
	    position: "absolute",
	    left: event.pageX - 10,
	    top: event.pageY - 10
	}).ajaxStop(function(){
	    $(this).hide();
	});

	return false;
    });

    $('a.ajaxL').live('click', function(event){
	var $li = $(this).closest('li');
	$.get(this.href);

	$("#ajax-spinner").show().css({
	    position: "absolute",
	    left: event.pageX - 10,
	    top: event.pageY - 10
	}).ajaxStop(function(){
	    $(this).hide();
	    $li.css('text-decoration', 'line-through');
	});

	return false;
    });

    $('a.ajaxTR').live('click', function(event){
	var $tr = $(this).closest('tr');
	$.get(this.href);

	$("#ajax-spinner").show().css({
	    position: "absolute",
	    left: event.pageX - 10,
	    top: event.pageY - 10
	}).ajaxStop(function(){
	    $(this).hide();
	    $tr.slideUp();
	});

	return false;
    });

    $('a.ajaxTD').live('click', function(event){
	var $td = $(this).closest('td');
	$.get(this.href);

	$("#ajax-spinner").show().css({
	    position: "absolute",
	    left: event.pageX - 10,
	    top: event.pageY - 10
	}).ajaxStop(function(){
	    $(this).hide();
	    $td.slideUp();
	});

	return false;
    });

    $('a.ajaxD').live('click', function(event){
	var $li = $(this).closest('li');
	$.get(this.href);

	$("#ajax-spinner").show().css({
	    position: "absolute",
	    left: event.pageX - 10,
	    top: event.pageY - 10
	}).ajaxStop(function() {
	    $(this).hide();
	    $li.slideUp();
	});
	return false;
    });

    $('a.ajaxP').live('click', function(event){
	$.get(this.href);

	$("#ajax-spinner").show().css({
	    position: "absolute",
	    left: event.pageX - 10,
	    top: event.pageY - 10
	}).ajaxStop(function() {
	    $(this).hide();

	});
	return false;
    });

    $("form.ajax :submit").live("click", function ()
    {
	$(this).ajaxSubmit();
	return false;
    });


    $('<div id="ajax-spinner"></div>').appendTo("body").ajaxStop(function () {
	$(this).hide().css({
	    position: "fixed",
	    left: "50%",
	    top: "50%"
	});
    }).hide();

    //$( "input.date" ).datepicker();

    $("input.date").live('hover', function(){
	$(this).datepicker();
    });


    $(".tt").tooltip({
	showURL: false,
	track: true,
	delay: 0
    });

});

Tak moc prosim o radu, jak to sjednotit a zprovoznit…
Omlouvam se za lamersky dotaz… Do JSka se teprve snazim pronikat…

Predem diky !

Editoval MW (20. 10. 2012 21:15)

Verze 1.2.0

• podpora pro History API (HTML 5) kompletně přepsána a vyčleněna (více info):

$configurator->onCompile[] = function ($configurator, $compiler) {
	$compiler->addExtension('ajax', new VojtechDobes\NetteAjax\Extension);
};

• změnilo se API (proto o desetinový řád vyšší číslo verze):
  • v beforeSend je nyní volána událost before místo start
  • událost start je volána až po zahájení požadavku
  • vrácení false v události start nic nedělá
  • obě události before a start dostávají stejné argumenty: jqXHR (objekt požadavku) a settings (originální pole parametrů)
  • ZÁVĚR: v extenzích stačí prohodit before a start callbacky, a změnit hlavičky before callbacků na nové argumenty (původní ui lze najít v settings.nette.ui)
  • v settings.nette.e lze nyní najít objekt události
• vzájemná závislost rozšíření je volitelně nepovinná
• lze používat vlastní beforeSend callback (viz jQuery API)
• pomocí datového atributu data-ajax-pass lze zabránit ukončení události, která Ajaxový požadavek vyvolala
• opravena kompatibilita s $form->addDynamic() (zachovává se pořadí formulářových prvků)
• opravy (deklarování anonymních rozšíření, vracení false v callbacích na before, CSS pro spinner)
• zaktualizována dokumentace

Několik výše uvedených oprav chyb jsem ještě vydal ve verzi 1.1.3, která neobsahuje změnu API.

@MW Viz instalace, stačí obsah 6. bodu obalit extenzí, cca takto…

$.nette.ext('datepicker', {
	load: function () {
		$("input.date").each(function () { // input[type=date] does not work in IE
			...
		});
	}
});

Přidal jsem podporu pro:

• persistentní parametry (pro jejich uchovávání není třeba všechny odkazy obalovat do snippetů a invaliovat je, nové ajaxové požadavky vyvolané na původních odkazech budou automaticky o aktuální stav persistentních parametrů doplněny – jde o dokončení extenze state)
• infinite scrolling (stačí na snippet přidat zvláštní datový atribut, a jeho obsah se nebude přepisovat, ale jen rozšiřovat)

<ul n:snippet="foo" data-ajax-append>
	<li n:foreach="$articles as $article">
		{$article->title}
	</li>
</ul>

• přidána nová událost prepare, volaná ještě před before (její úlohou je upravit objekt settings, neměla by počítat s tím, že požadavek bude za každých okolností vyvolán – od toho slouží start)
• při volání $.nette.ajax() (resp. $('a').netteAjax()), lze navěsit callback do událostí start a prepare stejně jako do všech klasických success, error a complete, které podporuje už samo jQuery (pro before lze použít standardní beforeSend)

Budu rád za otestování, než to vydám :).

Prosím možná blbá otázka, ale jak mám docílit, aby stránkování co mám v komponentě se promítlo i přes ajax v URL? Se starou verzí ajaxu mě to funguje, s novou ne… routu mám
$container->router[] = new Route(‚[<lang [a-z]{2}>/]store/<seoTitle>_<department [0–9]+>[/<goods-paginator-page=0>]‘, ‚Shop:catalog‘);

kde goods-paginator-page odkazuje na komponentu goods, kde je paginator, stránkování v komponentě funguje, ale jak docílit, aby se měnilo id stránky v url?

A ještě jedna věc,
ve staré verzy jsem používal:
(function($, undefined) {

$.nette.ext('spinner', {
        init: function () {
                spinner = $('<div></div>', { id: "ajax-spinner" });
                spinner.appendTo("body");
        },
        before: function (settings, ui, e) {
                $("#ajax-spinner").css({
                        visibility: "visible",
                        left: e.pageX,
                        top: e.pageY
                });
        },
        complete: function () {
                $("#ajax-spinner").css({
                        visibility: "hidden"
                });
        }
});
})(jQuery);

Jak mám v nové verzy se dostat na element.pageX a Y? Abych mohl zobrazit spinner na správném místě…

Editoval tatyalien (29. 10. 2012 14:38)

tatyalien napsal(a):

Jak mám v nové verzy se dostat na element.pageX a Y? Abych mohl zobrazit spinner na správném místě…

Také prosím o radu.. jak to správně nastavit…

Nakupnul by jsi trochu vic, prosim? Jak to pouzit…

Diky !

pekelnik: Díky, teď už spinner fachá, jen ještě rozjet to přepisování „url“… Když mám starou verzy doplňku, tak se vše přepisuje správně, pomocí ajaxu se přehodí stránkování a i url se „uměle“ změní… když tam hodím novou verzy, tak stránkování fachá, ale url zůstává beze změny.

Ahoj,
prosím Vás asi jsem to někde přehlédnul a nedaří se mi to nastavit, ale jak udělám aby po jakémkoliv ajaxu proběhl callback? Potřebuji třeba zobrazit a schovat flashmessage, teď to dělám tak že si posílám i html <script>invalidFlashMesagge();</script> což asi posílat nemusím když už to na stránce mám. Jen zavolat?

Když už se nám doplněk rozrostl i do CompilerExtension, co takhle doplnit i composer.json?

Zdravim vedeli by ste mi poradit ako teraz vyzera ext. pre:

<a class="ajax" n:href="Smazat!" data-ajax-confirm="Opravdu smazat?">Smazat</a>

Dakujem.

duskohu napsal(a):

Zdravim vedeli by ste mi poradit ako teraz vyzera ext. pre:

Mě funguje toto

Editoval h4kuna (5. 11. 2012 14:00)

tatyalien Ahoj, pro aktualizaci URL s využitím History API (pokud je dostupné) lze použít novou history extenzi sídlící v samostatné složce history. Kromě javascriptového souboru je třeba zaregistrovat i VojtechDobes\NetteAjax\Extension v bootstrapu, aby to fungovalo s co nejméně zásahy do již existujícího PHP kódu.

Prosím Vás docházím do stavu, kdy používám data-ajax-confirm, pak používám jquery sortable, taky přes ajax si posílám pořadí fotek. A jsem zase u toho jak po zmazání obrázku a obnovení snippetu obnovím javascript na sortable? Nemůžu jen skrýt ten obrázek co jsem smazal, ještě tam je stránkování.

1. nějak sáhnout do dopňku confirm a doplnit mu volání funkce na obnovení
2. mít zásobník/frontu, na úrovni tohoto doplňku nette.ajax, callbacků pro obnovování javascriptu, bylo by univerzální i pro vlastní funkce
3. napsat si ten sortable jako extenzi, tady je omezení jen s tímto doplňkem

Nemluvě o tom že někdy nechci aby extenze byla volaná jen s ajaxem viz:

vojtech.dobes napsal(a):
Bude fungovat na masteru. Uvažuju, že bych tohle rozšíření mohl dát i přímo do repositáře, jediný problém vidím v tom, že tahle confirmovací funkcionalita může být potřebná i pro neajaxované odkazy. Nevím, jestli je tedy vhodné to svazovat.

Nějaký doporučení kterou cestou se vydat?

Editoval h4kuna (6. 11. 2012 11:58)

vojtech.dobes napsal(a):

tatyalien Ahoj, pro aktualizaci URL s využitím History API…

Moc děkuji, funguje suprově ;)

@vojtech.dobes S výjimkou zpracování jednoho formuláře, kde chci uživatele přesunout na jinou stránku, manuálně přesměrovávám jen pokud nejde o ajax (ale zkusil jsem to přesměrování zakomentovat, nepomohlo). Jak jsem napsal, kromě samotné historie to funguje v pořádku. Přenáší se opravdu jen ty snippety, které jsou invalidovány (ověřeno, kontrola mě aspoň přiměla upřesnit pár situací, kdy se něco invalidovalo zbytečně :) ) a s tím negovaným signal se všechno chová přesně jak by mělo.

Editoval zopper (10. 11. 2012 17:23)

@vojtech.dobes Jestli to teda chápu, tak v případě, že invaliduji nějaké snippety, tak mám dát i $this->redirect('this')?

@vojtech.dobes Hmm, tak jsem to zkusil, ale buď to dávám na špatná místa (zkusil jsem startup(), beforeRender() i někam do action), nebo je problém někde jinde – adresa se sice skutečně mění, ale pro změnu se nepřenáší obsah. :(
PS: na správné nastavení té upravené podmínky pro payload jsem nezapoměl
EDIT: tím nepřenáší myslím, že v payloadu není žádný snippet

Editoval zopper (10. 11. 2012 19:47)

Psal jsem to na github, ale nikdo nereagoval.

Hází mi to v konzoli tento error:

<script>
TypeError: function (a) {var b = "[data-dismiss=\"alert\"]", c = function (c) {a(c).on("click", b, this.close);};c.prototype.close = function (b) {
function f() {e.trigger("closed").remove();}

var c = a(this), d = c.attr("data-target"), e;d || (d = c.attr("href"), d = d && d.replace(/.*(?=#[^\s]*$)/, "")), e = a(d), b && b.preventDefault(), e.length || (e = c.hasClass("alert") ? c : c.parent()), e.trigger(b = a.Event("close"));if (b.isDefaultPrevented()) {return;}e.removeClass("in"), a.support.transition && e.hasClass("fade") ? e.on(a.support.transition.end, f) : f();}, a.fn.alert = function (b) {return this.each(function () {var d = a(this), e = d.data("alert");e || d.data("alert", e = new c(this)), typeof b == "string" && e[b].call(d);});}, a.fn.alert.Constructor = c, a(function () {a("body").on("click.alert.data-api", b, c.prototype.close);});}(window.jQuery) is not a function
</script>

Používám twitter bootstrap a náhodou jsem zjistil, že tam je nějaká twb větev, tak zkusil jí, ale ta mi také nejde a nehlásí žádnou chybu. Projevuje se to tak, že se místo ajax požadavku normálně přesměruje.

Předtím jsem používal script od Honzy Marka, který funguje bez problémů. Odkazy mají třídu ajax a zalinkovaný je to js také správně. Čím to může být?

Editoval Siam (10. 11. 2012 20:17)

vojtech.dobes:
když označím na stránce nějaký text a pak kliknu na ten odkaz, tak se v adresním řádku změní adresa, ve firebugu vidím, že byl poslaný i správný snippet a ten označený text je stále označený, takže ten problém je asi akorát v té adrese…

Na email jsem ti poslal staženou stránku z localhostu, tak tam prosím mrkni.

@zopper Zatím jsem neměl čas se do toho pustit, ale díky za report, update titlu jsem opravil.

@zopper Díky za úpravu, ale již jsem to opravil. Je ta oprava nedostatečná?

Ohledně dalších bugů, nechceš je reportovat na Githubu? Tady je to mišmaš a nejsem schopen sledovat jednotlivá vlákna procházející skrze příspěvky…