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

Vojtěch Dobeš napsal(a):

Podpora je skutečně jen přes datový atribut v HTML. Nicméně tento atribut je zpracováván až v rozšíření snippets. Její chování si lze však přepsat k obrazu svému:

$.nette.ext('snippets')applySnippet = function ($el, html, back) {
	// ...
};

Perfektní, funguje jako víno. Vyřešil jsem přidáním přepínače do globálního kontextu rozšíření. Díky Vojto!

petr.kubin napsal(a):

Ahoj,
jak vytvořit vlastní ajax handler pro odeslání formuláře?

Když použiju predfinovaný (class .ajax), tak nejsem schopen dát na prvek překresleného formuláře .focus().
A když použiji:

		$.nette.ajax({
			url: $form.attr('action'),
			method: 'POST',
			complete: function(data) {
				$this.focus();
			}
		});

Tak jsem schopen dát .focus() na prvek, jenže formulář se nepřekreslí, neivaliduje se snippet.

Vypadá to, že neodesíláš data toho formuláře. Udělej to raději takto:

// e by měl objekt události, ve které tento kód voláš

$form.netteAjax(e).always(function(data) {
	$this.focus();
});

Což třeba takto?

$.nette.ext('spinner', {
	init: function () {
		this.spinner = this.createSpinner();
		this.spinner.appendTo('body');
	},
	before: function (xhr, settings) {
		if (typeof settings.spinner === 'undefined') {
			if (settings.nette && settings.nette.el) {
				settings.spinner = settings.nette.el.is('[data-ajax-spinner]');
			}
		}
	},
	start: function (xhr, settings) {
		if (!settings.spinner) {
			return;
		}

		this.counter++;
		if (this.counter === 1) {
			this.spinner.show(this.speed);
		}
	},
	complete: function () {
		this.counter--;
		if (this.counter <= 0) {
			this.spinner.hide(this.speed);
		}
	}
}, {
	createSpinner: function () {
		return $('<div>', {
			id: 'ajax-spinner',
			css: {
				display: 'none'
			}
		});
	},
	spinner: null,
	speed: undefined,
	counter: 0
});

Použití:

$.nette.ajax({
	url: ...,
	spinner: true
});

<a n:href="signal!" class="ajax" data-ajax-spinner>Signal with spinner!</a>

Ahoj…

pokud pridam do url kterou chci volat ajaxem dvojtecku, prestane se link volat ajaxem.
dvojtecky pouzivam jako parsovaci znak napriklad pri nastavovani filtru.

Poradite mi nekdo, co mam upravit, aby to bralo i url s dvojteckou?

http://domena.com/neco/ → jede normalne
http://domena.com/…/cena-od:10/ → po kliku refreshne celou stranku :(

diky,

@flexroad

Ahoj, resil nekdo NS_ERROR_ILLEGAL_VALUE ve firefoxu? Nasel jsem jen rok stary post.

Je divne, ze pokud to testuju na lokalnim stroji, chybu firefox nevraci a pokud to poslu na server, firefox po druhem ajaxovem volani zhavaruje na vyse uvedene chybe…

Nejake napady? Muze to byt verzi PHP? Apache? Nejakym rozdilnym nastavenim?

Diky,

@flexroad

@flexroad hele je to problém history extension a FFka kterému přeteče paměť.

Zdravím,

dynamické snippety – rád bych se na něco zeptal, dřív musím však uvést konkrétní příklad:

Template:

{snippet foos}
	{foreach $foos as $i => $foo}
		{snippet foo-{$i}}
			<h{!$i}><a class="ajax">{$foo}</a></h{!$i}>
		{/snippet}
	{/foreach}
{/snippet}

<a href="{link bar!}" class="ajax">bar</a>

Presenter

public function handleBar()
{
	$this->template->foos = [1 => 'Hu', 3 => 'Bleble'];
	$this->redrawControl();
}

Tedy, snippet, v něm dynamické snippety. Pokud chci přidat/odebrat/prostě změnit kolekci dynamických snippetů, lze toho docílit jinak, než překreslením všech snippetů?

Pokud ne, cesta smazání snippetu je jednoduchá – v payload si pošlu id smazané věci a tu odeberu z DOMu, ale co přidání? Těžko se hledá rodičovský element posílaného snippetu, abych ho k němu appendoval. Nelíbí se mi posílání jména snippetu spolu s nějakou třídou rodiče a s tím související psí kusy.

Napadá někoho nějaké geniální myšlenka?
Nebo jsem za blbce a někde jen stačí uvést třeba dvojtečka a celé se to začne chovat jinak?

Dosavadní řešení:

Editoval Beton (21. 5. 2015 16:17)

Ahoj, napsal jsem si extension na vlastní spinner, která zároveň disaebluje nějaká formulářivá pole.

Problém je v tom, že se ale spouští se vším co má class ajax, tedy např. i s filtrováním v gridu.

Jak by se mělo rozšíření správně zapnout jen na jednom formuláři na kterém ho potřebuji?

Děkuji

@akadlec: To jsem samozřejmě udělal a našel váš post. S tím se mi to ale nedaří. Když zavolám addConditionalExtension tak nemám v settings.nette.el nic z atributu data-ajax-on.

{
  "el": {
    "0": {
      "0": {},
      "1": {},
      "2": {},
      "3": {},
      "sizzle-1432656043440": {
        "parentNode": [
          38,
          8,
          true
        ]
      },
      "nette-submittedBy": {}
    },
    "context": {
      "0": {},
      "1": {},
      "2": {},
      "3": {},
      "sizzle-1432656043440": {
        "parentNode": [
          38,
          8,
          true
        ]
      },
      "nette-submittedBy": {}
    },
    "length": 1
  },
  "isForm": true,
  "isSubmit": false,
  "isImage": false
}

Editoval raketoplan2005 (26. 5. 2015 18:03)

Do stránky kde to rozšíření potřebuji si připojím soubor s tímto obsahem:

(function ($, undefined) {

    addConditionalExtension('blockform', {
        init: function () {
            this.spinner = this.createSpinner();
            this.spinner.appendTo('body');

        },
        start: function () {
            this.counter++;
            if (this.counter === 1) {
                this.spinner.show(this.speed);
            }
            this.form.hide();
        },
        complete: function () {
            this.counter--;
            if (this.counter <= 0) {
                this.spinner.hide(this.speed);
            }
            this.form.show();
            this.input.val('');
        }
    }, {
        createSpinner: function () {
            return $('<i>', {
                id: 'ajax-spinner',
                class: 'fa fa-spinner fa-pulse',
                css: {
                    display: 'none',
                }
            });
        },
        spinner: null,
        speed: undefined,
        counter: 0,
        form: $('#mainform'),
        input: $('#datainput')
    });

})(jQuery);

Funkci addConditionalExtension pak mám v main.js který se připojí dříve. Funkce se normálně zavolá, ale v el mám to co jsem postoval v příspěvku 157109. Myslím že neumím správně použít nebo předat setings té události prepare.

Editoval raketoplan2005 (27. 5. 2015 9:48)

Ahoj,
s AJAXem pro Nette začínám a potřeboval bych vědět, jak upravit nebo dopsat nějakou funkci k obsluze snippetu, která by se provedla před a po jeho překreslení. Konkrétně jde o to, že potřebuji vytvořit popup okno (div), které se vytvoří při kliknutí na odkaz s určitým attributem nebo css třídou a jehož obsah se načte pomocí snippetu. Po jeho překreslení potřebuji spustit javascriptový efekt, který zviditelní a případně skryje div.

Díky

Uucroutu napsal(a):

Ahoj,
používám rozšíření spinner.
Nicméně mám místa, kde nechci spinner zobrazit.
Jak pomocí class „.nospinner“ zakázat jeho zobrazení?
Pokud odkaz .ajax obsahuje i .nospinner, tak se spinner neukáže, jinak se zobrazí.

Upravil bych si extenzi následovně:

start: function (xhr, settings) {
	if (settings.nette && !settings.nette.el.is('.nospinner')) {
		return;
	}

	this.counter++;
	if (this.counter === 1) {
		this.spinner.show(this.speed);
	}
}
complete: function (xhr, status, settings) {
	if (settings.nette && !settings.nette.el.is('.nospinner')) {
		return;
	}

	this.counter--;
	if (this.counter <= 0) {
		this.spinner.hide(this.speed);
	}
}

Ahoj, zkouším nainstalovat JSka pomocí boweru a narazil jsem na zvláštní chování:
V repozitáři je vyžadována závislost "nette-forms": "~2.2", což z composeru chápu jako 2.2.x, ale i 2.x.x. Ale bower mi při instalaci tvrdí, že výsledkem tohoto je aktuálně verze 2.2.7, což není kompatibilní s požadavkem nette-forms 2.3.
Tady je můj bower.json, který vyhodí kolizi:

{
  "name": "pokusy",
  "dependencies": {
    "jquery": "~2.1.4",
    "bootstrap": "~3.3.5",
    "nette-forms": "~2.3.6",
    "nette.ajax.js": "~2.1.0"
  }
}

@iguana007 Kde přesně se ta validace provádí? Nešlo by to opravit aby port prošel?

@iguana007 Tzn. je třeba akorát opravit tenhle regulár ne? Pošleš PR?

PR odeslán…

Zajimavy. To abych radsi prepsal vsechny custom volani nette.ajax.
Dik

To asi funguje jen na odkazy a formulare… Pokud mam „odkaz“ na TR tak to asi automaticky nepozna :-)

@stemba jak ten formular odesilas? Normalne ma jen tridu ajax? Nekdo tu s tim mel problem kdyz validoval formular pomoci bootstrap validatoru a mel to spatne nastaveny.

To je divné, mě to ajaxové formuláře normálně validuje. Máš přilinkované obě knihovny a neupravuješ nějak vlastní JS?

Njn, tak snad se k tomu vyjádří někdo AJAXově zkušenější. Já ti jen mohu potvrdit, že to není ani očekávané, ani běžné chování.

Ještě bych se zeptal – nefunguje ti ani JS validace při které vyskočí alert, nebo ti jde o vlastní validaci, která se defaultně vykresluje červeně vedle inputu? Ta první by měla fungovat normálně, ale pro tu druhou je potřeba při chybě překreslit formulář (a na to se zapomíná, překresluje se až v onSuccess, k tomu ale nedojde).

<?php
$form->onError[] = function($form) {
    $this->redrawControl('form'); // sem si doplň vlastní snippet, nebo nech bez parametru
};
?>

Editoval Šaman (17. 5. 2016 9:14)

Hezký večer, řeším jeden menší problém. Na webu všechny stránky načítám přes AJAX. Mimo to ještě každých 15 vteřin pravidelně updatuju jeden informační snippet. Ale problém je v tom, že jakmile se pravidelný update spustí během běžícího requestu na načtení stránky (který vyvolal uživatel), načítání stránky se abortne a dokončí se pouze update.
A tak bych se chtěl zeptat, je nějak možné udělat požadavek asynchronní (popř. pokud vás napadá jiné řešení…)? Děkuji moc!

Ja treba vypnu interval na update pri prechodu na jinou stranku. Hledej udalost onBeforeUnload

Zdravím, pomocí javascriptu vytvářím další odkazy se třídou ajax, ale už se na ně nenaváže událost click.nette.
v initu bych potřeboval

$(this.linkSelector).off('click.nette', rh).on('click.nette', rh);

zaměnit za toto

$(document).off('click.nette', rh).on('click.nette',this.linkSelector, rh);

Toto funguje, ale dá se toho nějak docílit bez přepisování knihovny? Díky