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

Tady bych to asi řešil tak že se prvně zavolá nějaká funkce co ti provede tu animaci a až tam pak zavoláš nette.ajax()

Niekedy som to riesil: https://forum.nette.org/…pomoci-ajaxu#… (vysledok je tu: https://github.com/…ette.ajax.js) akurat neviem ako je to aktualne, pretoze stale mam fork starej verzie. Kazdopadne pozeram do novych komitov a tam je podobna uprava uz integrovana: https://github.com/…26fb62322770 mozno len este nie je popisana.

tak když už to přidali do master verze je supr, aspoň budu moci zase klasicky updatovat ;)

Díky za novou verzi.
Díval jsem se dovnitř souboru nette.ajax.js a je tam uvedena verze * @version 1.2.2.

Ahoj,

díky za super skript. S Nette pracuji teprve týden a z toho jsem 2 dny řešil problém s nefunkčním nette.ajax.js, kdy se i přes třídu .ajax u odkazu stránka přenačetla na adresu signálu. Celý problém byl v zapnutém $absoluteUrls v BasePresenteru.
Nikde se mi to nepodařilo najít, doporučuji to pro začátečníky jako jsem já doplnit do readme.

Snažím se za použijí nette.ajax a live validation doplňku udělat takový formulář, kdy na základě zadání textu do jednoho prvku formuláře se pak doplní obsah dalších prvků. Jakmile se však načtou hodnoty do dalších prvků, ve formuláři přestane fungovat validace. Ten stejný problém mám pak pokud používám Kdyby/replicator a snažím se pomocí ajaxu ubírat formulářové prvky. Jakmile se ubere prvek, přestane fungovat validace.

Co by se s tím dalo udělat?

Latte

{snippet newOrderFormSnippet}
	{form newOrderForm}
		{$form}
	{/form}
{/snippet}

<script type="text/javascript">
{include #jsCallback, input => ic, link => icChange}
</script>

{define #jsCallback}
$('#{$control["newOrderForm"][$input]->htmlId}').on('change', function() {
    $.nette.ajax({
        type: 'GET',
        url: '{link {$link}!}',
        data: {
            'value': $(this).val(),
        }
    });
});
{/define}

Presenter

	public function renderDefault() {
		$this->template->_form = $this['newOrderForm'];
	}

	public function handleIcChange($value) {
		if ($this->isAjax() and $value) {

				$this['newOrderForm']['ic']->setValue($value);
				$this['newOrderForm']['dic']->setValue($value);

			$this->invalidateControl('newOrderFormSnippet');
		}
	}

	public function createComponentNewOrderForm() {

		$form = new Form;

		$form->addText('ic', 'IČ')->setRequired('Zadejte prosím IČ.');
		$form->addText('dic', 'DIČ')->setRequired('Zadejte prosím DIČ.');
		$form->addSubmit('submit', 'Objednat');

		$form->onValidate[] = $this->NewOrderFormValidated;
		$form->onSuccess[] = $this->NewOrderFormSucceeded;

		$removeEvent = callback($this, 'NewOrderFormRemoveItemClicked');

		$users = $form->addDynamic('users', function (Container $user) use ($removeEvent) {
			$user->addText('service', 'Služba');
			$user->addSubmit('remove', 'odebrat')
							->setValidationScope(FALSE) # disables validation
					->onClick[] = $removeEvent;
		}, 1);

		return $form;
	}

	public function NewOrderFormRemoveItemClicked(Nette\Forms\Controls\SubmitButton $button) {

		$users = $button->parent->parent;
		$users->remove($button->parent, TRUE);

		if ($this->isAjax()) {
			$this->invalidateControl('newOrderFormSnippet');
		}
	}

Editoval Andre (26. 11. 2014 23:41)

nette.ajax.js pouze zapouzdřuje klasické $.ajax(). Událost before se volá ještě před tím, než ajaxový požadavek začne, takže tam se k payloadu určitě dostat nená. Na nějaké průběžné informace z probíhajícího ajaxového požadavku by myslím mělo sloužit toto, ale nikdy jsem to nepoužil a neimplementoval, takže s tím nemám žádnou zkušenost.

Ahoj,

resim re-bindovani. Musim vzdy po nacteni snippetu znovu bindovat vsechny elementy v nem obsazene?

Mam napriklad nasledujici funkci:

<script>
	$(".lightboxClose").on("click", function(e) {
          $("#lightboxCover").addClass('hide');
    });
</script>

Toto funguje, pokud stranku poprve nactu. Pokud ale samotny element s tridou „.lightboxClose“ nactu ve snippetu, akce onClick uz nefunguje :(

Vim, ze muzu pridat extenzi a tam potom volat neco jako:

<script>
$.nette.ext('rebind', {
	complete: function () {
		$(".lightboxClose").on("click", function(e) {
          	$("#lightboxCover").addClass('hide');
    	});
	}
});
</script>

Cetl jsem ale nekde neco o tom, ze by si to mel nette.ajax resit sam, jen nevim, jak na to :(

Diky za cokoliv,

@flexroad

jiri.pudil napsal(a):

nette.ajax.js si řeší jen nabindování vlastních listenerů, tzn. třeba když máš ve snippetu odkaz .ajax, bude fungovat ajaxově i po překreslení snippetu. Cokoliv jiného si už musíš zařídit sám buďto nějakým takovýmhle rozšířením, nebo navěšením listeneru na nějaký nadřazený prvek:

$(document).on('click', '.lightboxClose', function (e) { ... });

to @jiri.pudil,

myslel jsem si ze to nejak tak bude. Nakonec jsem si pro to napsal rozsireni ktere po complete vola funkci na rebind.

Kazdopadne moc dekuji za reakci!

@flexroad

@akadlec pak by prave po prekresleni nefungoval ten listener…

@matej21 no nefungoval…samo záleží kde jej navěsíš. Ale jak jsem psal, ruku do ohně za to nedám, ale pokud takto navěsíš X listenerů na document, tak to docela žere paměť ale pokud se pletu tak mě opravte, já to řešil kdysi dávno kdy mě JS zabíjel appku ;)

Zdravím,

Dělám na webu kde bych rád měl modal ve kterém se bude načítat content pomocí ajaxu.
Modal mám ve snippetu, který bych rád po kliknutí na tlačítko updatoval novými hodnotami, které by mi předal presenter z databáze. A nakonec success zavolat $(„.modal“).modal(‚show‘); (stavím na bootstrapu).

Přečetl jsem už mraky topiců zde na fóru i dokumentaci ale stále nemůžu ani za nic přijít na to jak na to.
Ukázal by mi někdo cestu?
Díky za pomoc :)

Handle:

public function handleModalRequest($id) {
        if ($this->isAjax()) {
            $this->template->workModalContent = $this->database->table('procedures')->where('id', $id);
            $this->redrawControl('workModal');
        }
    }

Snippet modalu:

{snippet workModal}
        <div class="modal fade" role="dialog" id="workModal" aria-labelledby="workModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;<span class="sr-only">Close</span></button>
                        <h3 class="modal-title">
                            <span id="workModalLabel">{$workModalContent->label}</span>
                        </h3>
                    </div>
                    <div class="modal-body">
                        {$workModalContent->text}
                    </div>
                    <div class="modal-footer">
                        <a href="#" data-dismiss="modal" class="btn btn-danger">close</a>
                    </div>
                </div>
            </div>
        </div>
{/snippet}

Editoval ParallelUniv3rse (4. 1. 2015 16:58)

akadlec napsal(a):

a s čím máš tedy problém?

S použitím celé knihovny.

• Je nutné před použitím $.nette.ext(… zavolat i $.nette.init(); ?
• Jak mám upravit defaultní extension co updatuje snippety tak, aby otevřel modal? Nebo si musím vytvořit vlastní a tím napsat znovu i celý updating snippetu?

(Pokud jsem vůbec správně z dokumentace pochopil jak snippety fungují.. )

• Když bych měl na jedné stránce více elementů s ajaxem, jak přidělím danému elementu správnou extension?
• Rád bych rozuměl i tomu co a jak se dá vrátit z presenteru funkci (v dokumentaci je pouze o JSONu a definice „poslat klientovi ve formátu, kterému bude obslužný JavaScript rozumět.“ mi toho také moc v dokumentaci nesdělí.. Arrrgh).

Editoval ParallelUniv3rse (4. 1. 2015 18:22)

$.nette.ext('modals', {
	init: function () {
		this.ext('snippets', true).before($.proxy(function ($el) { // $el je element snippetu
			if (this.shouldTry && $el.children('.modal').length === 1) {
				$el.find('.modal').modal('show');
				this.shouldTry = false;
			}
		}, this));
	},
	success: function (payload) {
		this.shouldTry = true;
	}
}, {
	shouldTry: true
});

Zdar, snažím se v navázat událost na submit formuláře tak, aby se tam upravila jedna hodnota a pak se to ajaxově odeslalo. Ten první callback napojuju přes jquery (jako první), ale provede se jen ten nette ajax submit, tušíte, co dělám špatně?
Zdá se, že se tam používá Nette.addEvent, a to nevidí ten jquery handler – console.log(original) vypíše null

Co tohle:

$(this).data('commentReplyUrl');

resp co ten skript teď dělá?

Taky můžeš udělat následující:

$.nette.ext({
    load: function () {
        $('a.myAjax').click(function (e) {
            $(this).netteAjax(e, {
                url: $(this).data('comment-reply-url')
            });
        });
    }
});

Editoval vojtech.dobes (17. 1. 2015 12:51)

Ahoj, upravil jsem si metodu applySnippet tak, abych mel krasny super cool efekt pomoci transitions:

	applySnippet: function ($el, html, back) {
		if (!back && $el.is('[data-ajax-append]')) {
			$el.append(html);
		} else if (!back && $el.is('[data-ajax-prepend]')) {
			$el.prepend(html);
		} else {
			if ($el.attr("id") == "snippet--content") {
				$el.addClass("transition");
				window.setTimeout(function() {
					$el.html(html).removeClass("transition");
				}, 1000);
			} else {
				$el.html(html);
			}
		}
	}

Vse je ok, prekreslovani funguje paradne, ALE… provadi se jeden XHR pozadavek vzdy, i pri refreshi (i bez ajaxoveho pozadavku, proste kdyz zadam localhost/xxx, tak hned po nacteni stranky se provede request).

Nevim jestli se to tu uz nahodou neresilo, ale nenasel jsem, diky.

@vojtech.dobes diky za inspiraci, to vypada mnohem lepe.

Kazdopadne pri vypnuti history extension se tento podivny XHR pozadavek na sebe samu neprovadi. Zkusim zjistit vice.

edit: tak jsem prisel na to, ze to dela pouze v Safari :)

Editoval Lexi (21. 1. 2015 20:03)

Ahoj,
řešil jsem včera několik hodin zajímavý problém, ale bohužel se mi jej nepodařilo vyřešit, proto to zkusím tady. Pokusím se tedy problém co nejvíce popsat:

• mám úplně jednoduchou mini aplikaci v Nette 2.2.7, která se mi načítá uvnitř Windows gadgetu na ploše
• jelikož se jedná o korporátní laptop s centralizovanou správou software, tak nejsem schopen ovlivnit verzi IE, která obstárává render gadgetu – v tomto případě se jedná o verzi IE 8.0.7601.17514
• gadget mi vykresluje pouze několik odkazů (v podstatě jde jen o switche se stavy on/off), které volají ajaxově handle. Klasický odkaz se mi nepodařilo rozchodit, protože jej gadget otevírá v okně prohlížeče namísto uvnitř gadgetu, proto to musí být ajaxově
• všechny tyto ajaxové odkazy jsou uvnitř snippetu, který se invaliduje po každém kliku na jeden z odkazů
• Problém: když kliknu na jakýkoli odkaz, tak se zcela bez problémů ajaxový požadavek vykoná, ale jakýkoli další klik se již vykonává bez ajaxu a tím pádem mi to otevře daný link v browseru
• zkoušel jsem aplikaci i přímo v prohlížeči (výše zmíněné IE8) a tam se to chová stejně
• browser nehlásí žádné JS chyby
• v prohlížečích jako Chrome, FF apod. to funguje jak má a každý z kliků se provede ajaxem
• jelikož se jedná o úplně jednoduchou aplikaci, tak načítám pouze následující JS: jQuery 1.11.2, nette.ajax.js, spinner.ajax.js a následně volám $.nette.init(); – co se týče verzí, tak jsem vše stáhnul včera z gitu apod.
• prolézal jsem zdejší fórum a pokusil se uvnitř snippetu znovu navázat ajax na invalidované linky, ale taky nepomohlo, viz.:

<script>
	$(function(){
		$('#switchesBlock').on('click', '.ajax', function(e){
			e.preventDefault();
			//alert('foo'); - toto se zavolá, jakmile se snippet invaliduje a normálně to vyhodí alert
			$.nette.ajax(this.href, this, e);
		});
	});
</script>

Neví někdo prosím, co s tím?
Děkuji za jakoukoli radu/tip ;)

a jak vypadá odpověď po tom prvním requestu? nenačte se ti celá stránka?

díky za reakce, nechal jsem to v práci, takže to nemám jak vyzkoušet, ale hned ráno se na to podívám a dám vědět oběma @akadlec @Lexi

A přepisuješ jen části dokumentu nebo celý? Máš tam třídu pro navázání ajaxu?

Tam bude evidentně jen nějaký problém s navázáním click handle v IE po invalidaci snippetu, protože jak jsem již psal výše, tak v Chrome a FF to šlape jak švýcary, jen v tom IE8 funguje ajax pouze před ivalidací snippetu, jakmiule se invaliduje, tak všechny odkazy s třídou ajax uvnitř snippetu již nejsou ajaxové + ten kousek JS co mám na konci snippetu to nevyřeší, i když by imho měl…

@akadlec Předpokládám, že ohledně špatného umístění volání nette.ajax si myslel $.nette.init();, které volám na konci body v @layout.latte:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title>Some Title</title>
	<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/screen.css?{=time()}">
	<link rel="shortcut icon" href="{$basePath}/favicon.ico">
</head>
<body>
	<div id="header">
		<a href="#" onclick="window.location.reload(true);return false;">
			<img src="{$basePath}/images/logo.png" alt="Logo">
		</a>
	</div>
	<div n:foreach="$flashes as $flash" class="flash {$flash->type}">{$flash->message}</div>
	{include content}
	<script src="{$basePath}/js/jquery.js"></script>
	<script src="{$basePath}/js/nette.ajax.js"></script>
	<script src="{$basePath}/js/spinner.ajax.js"></script>
	<script>
		$(function(){
			$.nette.init();
		});
	</script>
</body>
</html>

psal si, že mám „blbě to js dole“ – a jak by tedy podle tebe mělo být správně? To že mám něco blbě vím, ale nevím co :)
Díky

Editoval iguana007 (12. 2. 2015 12:04)