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

Pro spinner ⇒ nalinkuj si z adresare etensions soubor spinner.ajax.js a spinner se bude ukazovat (ale nastyluj si div #ajax-spinner a taky vycentruj :) )

nette.ajax.js defaultne obaluje vsechny odkazy co maji classu ajax pokud to chces zmenit / neco pridat tak pred nette.init() zadej toto (zrovna toto je v readme)

<script>
    $.nette.ext('init').linkSelector = 'a.ajax, .paginator a';
    $.nette.init();
</script>

Zkusil bych odstranit display: none; :) ze základního stylopisu. Extenze spinner pouze explicitně skrývá, nikoliv explicitně zobrazuje.

tatyalien napsal(a):

Díky, už se zobrazuje, ale pouze tam kde ho určím. V tom starém jsem měl:

$("#ajax-spinner").show().css({
    position: "absolute",
    left: $(this).position().left + 200,
    top: $(this).position().top - 60
});

Že se vzala pozice kliknutí na ajaxový požadavek a dle té hodnoty se zobrazil v přibližné pozici kliknutí. Ale jak to mám tady nastavit ;)

Já to teď tak nějak mám, pozicuju ho na event.pageX/event.pageY:

$.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"
		});
	}
});

A takto v CSS:

#ajax-spinner {
	visibility: hidden;
	position: absolute;
	width: 14px;
	height: 14px;
	padding: 3px;
	background: white url('../images/spinner.gif') no-repeat 50% 50%;
	z-index: 123456;
}

Úplně spokojený s tím nejsem. Hlavně proto, že mám pouze jeden spinner a to u posledního ajaxového kliku. To je nežádoucí, pokud uživatel kliká rychleji, než aplikace odpovídá…

llook: Jo to je ono, díky moc ;)

Uvedený kód má jednu chybu z hlediska Javascriptu: funkce předaná metodě livequery() ma jiný kontext, než kód, který tuto metodu volá (a tedy jiný, než je kontext rozšíření. Nicméně livequery() je jednak zastaralé, druhak by vůbec nemělo být potřeba. Tedy:

$.nette.ext('actionExpander', {
	load: function () {
		var _this = this;
		$('.actionHead').on('click', function (e) {
			var $this = $(this);
			if (!$this.attr('data-expander')) {
				$this.attr('data-expander-called', true);
				_this.req = $.nette.ajax({}, $this.find('a')[0], e).done(function () {
					$this.next('.actionBody').slideToggle(600);
					_this.req = null;
				});
			} else {
				if (_this.req) {
					_this.req.abort();
				}
				$this.attr('data-expander-called', null);
				$this.next('.actionBody').slideToggle(600);
			}
		});
	}
}, {
	req: null
});

Snad to není moc mimo od původního zadání.

A když dáš to bindování jen do $(function () { ... });, tak alert vyskočí? Pokud ne, tak to nesouvisí s ajaxem.

Inicializuješ to pak? $.nette.init();

Zdravím,
již pár dní se mořím s jedním problémem:

Snažím se načítat data u stránkování pomocí tlačítka Dalších X, tedy nepotřebuji obsah snippetu nahradit, ale provést append.
Tedy je nutné vypnout .ext(‚snippet‘)

<script>
$.nette.ext('snippets',false);
$.nette.ext('scrollTo',false);
$.nette.ajax({
	url : 'url?page=1'
}, this).done(function(payload){
                    var s = payload['snippets']['snippet--productsList'];
                    $(s).children('li').each(function(){
                        $(this).hide();
                        $(this).appendTo('#products-list');
                    })
                    $('#products-list li:hidden').fadeIn();
                });
</script>

Nyní ale řeším problém, jak zase zapnout extensions. Je nějak možné ve funkci $.nette.ajax() nastavit, že se nemají použít dané extensions pouze pro tuto relaci.

Je to nějak možné?

Tak jsem to zprovoznil ve větvi extensions-exclude. Použití:

$.nette.ajax({
	url: 'url?page=1',
	off: {
		snippets: true
	}
}, this).done(function (payload) {
	var s = payload['snippets']['snippet--productsList'];
	$(s).children('li').each(function () {
		$(this).hide();
		$(this).appendTo('#products-list');
	});
	$('#products-list li:hidden').fadeIn();
});

Prosím o vyzkoušení.

Ahoj,
mám také problém s dvojí validací a nejsem schopen přijít na kloub proč tomu tak je. Používám jQuery UI dialog do kterého načítám obsah. A ten obsah může obsahovat Nette formuláře. A právě zde mi javascript formuláře dvakrát validuje. Je mi jasné, že chyba pramení z mých slabších znalostí Javascriptu a proto se na vás obracím.

Viz následující kód:

// nastaveni, inicializace nette.ajax
$.nette.ext('init').formSelector = 'form.ajax, .modal-window form';
$.nette.init(function (ajaxHandler) {
	$('form.ajax, .modal-window form').live('submit', ajaxHandler);
});

// otevreni dialog okna a nacteni jeho obsahu
$("a.modal").on("click", function() {
	var id = $('.modal-window').length + 1;
	var href = $(this).attr('href');
	$('body').append('<div class="modal-window" id="modal-' + id + '"></div>');
	$("#modal-" + id).dialog({
		open: function(event, ui) {
			// po otevreni okna nacitam obsah z href (napr. Language:add)
			// kde view add nema zadny laout (obsahuje jen napr. formular)
			$("#modal-" + id).load(href, function() {
				// inicializuji vsechny formulare v nove otevrenem
				// dialogovem okne (bez ni se JS validace neprovede,
				// ale s ni se provadi dvakrat)
				$("#modal-" + id + ' form').each(function() {
					Nette.initForm(this);
				});
			});
		}
	});
});

A šablona pro Language:add je např. takováto:

{layout  '@modal.latte'}
{block content}
{control languageForm}
{* tzn. zobrazi se napr. jen formular *}

@ji_ri_k Přesně tak :)

Skvela prace :)

Ahoj chlapi,

velmi se mi líbí to, co tu tvoříte. Proto bych zde rád rozvinul diskuzi o novém rozšíření, které by umožňovalo snadnou práci s modálními formuláři. Nejde mi o konkrétní kód, ale spíš o přímočaré a čisté řešení.

Příklad: mám neajaxovou aplikaci, dejme tomu telefonní seznam. V tabulce jmen je na každém řádku tlačítko Upravit, kliknutím mě pošle na stránku „úprava jména“. Teď z té aplikace chci udělat aplikaci ajaxovou a místo stránky „úprava jména“ chci mít modální formulář obsahující tuto stránku.

Návrh řešení:

• Uzavřít editační formulář do snippetu a na ajaxové dotazy odpovídat pouze invalidovaným snippetem. Tím budu schopen stáhnout na požádání snippet s předvyplněnými údaji a umístit ho do modálního okna.

<?php
public function actionEdit($id) {
   ...
   $this->getComponent("editForm")->setDefaults(array("name" => $oldName));
   if ($this->isAjax()) {
     $this->invalidateComponent("editForm");
   }
?>

• Vyrobit extenzi dialog, která bude schopna vytvořit modální okno (například pomocí jQueryUI) a do něj plácnout libovolný snippet s formulářem. Formuláře obsažené v tomto dialogu se budou pochopitelně odesílat ajaxem.
• Při vyhodnocení formuláře odeslaného ajaxem připojit do $this->payload informaci o tom, jestli se formulář zpracoval korektně a jestli se má dialog zavřít nebo zůstat otevřený a natáhnout formulář se zvýrazněnými chybami.

Něco podobného mi už funguje, ale nelíbí se mi, jak je to napsané. Toto je můj poslední nápad a budu vděčný za vaše připomínky.

Mějte se pěkně

Honza

Editoval klasyc (26. 8. 2012 0:23)

Kdyz pouziju button bar jako radioboxy z twitter bootstrapu a misto buttonu mam ajaxove odkazy, takto nejak:

<div class="btn-group " data-toggle="buttons-radio">
	<a class="btn btn-primary button-small ajax" href="{link ...">odkaz1</a>
	<a class="btn btn-info button-small ajax"  href="{link ...}">odkaz2</a>
</div>

prestane fungovat prepinani stavu tlacitek, bez ajaxu funguje jak ma

@vojtech.dobes: nebudes vedet nahodou zhlavy kde je problem? je to bug nebo delam zkousim neco co bych nemel? :-)

„buttony“ obsluhuje https://github.com/…ap-button.js

Editoval LeonardoCA (30. 8. 2012 13:56)

Zdravím snažím se to rozchodit a nedaří se mi.

1. nalikovaný jQuery
2. plugin, $.nette.init() proběhne
3. formulář (GET/POST) má třídu ajax, zkoušel jsem i inputu submit dat třídu ajax

A ajax se neprovede stále mi to odesílá klasickým dotazem. Žádný chyby se negenerují.

Tady na tomto řádku se i správně formulář podle selektoru (form.ajax) vybere.

Co jsem přehlédl?

Editoval h4kuna (6. 9. 2012 11:21)

Je to čistý formulář, takže o ničem nevím, jen si s tím hraju takže nic složitýho. A případně jak se dá nejefektivněji dohledat zda má formulář na sobě nějakou událost? Ve firebugu jsem nic takovýho nenašel.

EDIT
Vyřešeno po chatu, děkuji vojtech.dobes

Editoval h4kuna (6. 9. 2012 13:54)

Zdravím dalo by sa pomocou tohto doplnku urobiť volanie handle ajaxovo? Napríklad keď mám riadok tabulky tr a po odkliknuti mi zavolá handle. Mám takíto príklad kde volám handle neajaxovo, alebo ak mám parameter ajax tak by som to chcel volať ajaxovo.

<tr click-handle='{l}"url":"{link setTaskId! $task->id}", "type":"ajax"{r}'>

$('tr[click-handle]').click(function(e){
  e.preventDefault();
  var obj = jQuery.parseJSON($(this).attr('click-handle'));
  if(obj.type=='ajax'){
    // ajaxové volanie handle
  }else{
    window.location = obj.url;
  }
});

Editoval duskohu (11. 9. 2012 22:09)

Super, tak toto je parádička, ďakujem. :-)

Celou extenzi history přepracovávám, protože aktuální verze je spíš takový nástřel (například neřeší signály). Každopádně pro odkaz lze vypnout, stačí přidat odkazu atribut:

<a n:href="something" data-ajax-off="history">Something</a>

Well, you can do that with plain Javascript:

$.nette.ext({
	load: function () {
		$('.ajax').click(function () {
			var $this = $(this);
			var question = $this.data('confirm');
			if (question) {
				return confirm(question);
			}
		});
	}
});

Doufám, že se to nebude bít s ajaxifikací. Bylo by lepší použít událost start, ale musím ji opravit – nyní nedostává argument, ve kterém je ajaxifikovaný element.

V tom případě si napiš tohle rozšíření:

$.nette.ext({
	start: function (xhr, settings) {
		var question = settings.nette.el.data('confirm');
		if (question) {
			return confirm(question);
		}
	}
});

A oprav si řádek 191 v nette.ajax.js z

}, xhr);

na

}, xhr, settings);

Tuhle úpravu co nejdřív dodám do masteru.

Editoval vojtech.dobes (12. 9. 2012 22:13)

Nehodíš někam kód?

Hm, vyzkoušel bych to trošku „prologovat“, co je v settings.nette.el, co je v question…

Zdravím :) dneska jsem chtěl nahodit confirm dialog a narazil jsem, presně jako peter.z . Nicméně objevil jsem, že pokud rozšíření není anonymní, tak to funguje, dialog vyskočí, pokud dáte „ano“, request se provede a vše ok, pokud „ne“ zmizí dialog, ale js vyhodí chybu: TypeError: $.ajax($.extend({beforeSend: function (xhr) {return inner.fire({name: „start“, off: settings.off || {}}, xhr, settings);}}, settings)).done is not a function
}, settings)).done(function (payload) { …
js je pro mě pořád dost magický … šlo by s tím něco udělat? Předem moc díky

ještě to rozšíření:

<script>
 $.nette.ext('confirm', {
        start: function (xhr, settings) {
            var question = settings.nette.el.data('confirm');
            if (question) {
                return confirm(question);
            }
        }
    });
</script>

@peter.z, @Kaspis: anonymní extenze byly bugnuté, opraveno. Stejně tak byla chyba u události start (evidentně ji ještě nikdo předtím nepoužil :) ), též opraveno.

A v masteru se již této události předává jako druhý argument objekt settings.