Diskuze: Přenos dat mezi z nette do JS

Lukáš Novák

Člen

Lukáš Novák:16.6.2017 18:58

Zdravím,
mohli byste mi prosím vysvětlit předávání dat pomocí JSONu z PHP do JS?
Musím říct, že v tom kapku plavu.
Když chci poslat data z PHP do JS, tak jsem v dokumentaci vyčetl, že to jde následovně

$this->sendResponse(new JsonResponse(['klic' => 'hodnota', ...]));

Ale pak už nevím, jak to vzít v JS a pracovat s tím :/
Používám nette.ajax.js
Předem moc děkuji za vysvětlení!

Odpovědět

16.6.2017 18:58

TomasGlawaty

Člen

TomasGlawaty:16.6.2017 23:02

Ahoj,
možností je více. Předpokládám, že znáš životní cyklus Presenteru ad.

Snippety:

# templates/Foo/*.latte
<a n:href="showBar!" class="ajax">CLICK ME!</a>
{snippet foo}
        <span n:ifset="$bar">{$bar}</span>
{/snippet}

# FooPresenter.php

class FooPresenter extends UI\Presenter
{
        // ... your code here

        public function handleShowBar()
        {
                $this->template->bar = 'BAR';
                $this->redrawControl('foo');
        }
}

První možnosti jsou snippety. Zde nepotřebuješ vůbec nic řešit v JS, pokud používáš nette.ajax.js. Odkaz n:href="showBar!" znamená, že chceme zavolat aktuální Presenter se signálem showBar - automaticky se zavolá metoda handleShowBar. Jelikož je na odkazu třída .ajax, tak se nám pošle automaticky AJAXový request, pokud by byl v prohlížeši JS vynutý, tak se to vše provede redirectem, jelikož se v URL přenáší paraametr _do, podle kterého Presenter rozezná na kterou metodu, či komponentu signál cílí.
V handle* metodě předáme do šablony danou proměnnou a překraslíme snippet foo. Překreslování snippetů je by default podporované v nette.ajax.js, takže není potřeba nic řešit.
Takže po kliknutí na odkaz "CLICK ME!" by se mělo po ním zobrazit "bar" :-)

Řekl bych, že většinou si vystačíš se snippety. Pokud by jsi však volal AJAXové požadavky ručně z JS (pozor musíš to volat skrze $.nette.ajax, namísto $.ajax), nebo by jsi používal vlastní nette.ajax extensions (parádni řešení na často se opakující věci, jsou takto řešeny zrovna třeba snippety, či AJAXové odesílání formulářů) můžeš si poslat nějaká data v takzvaném payloadu. Data do payloadu dostaneš v Presenteru jednoduše takto:

$this->payload->bar = 'BAR';

Volat $this->sendResponse(... ručně nemusíš, Application pozná AJAXový request a odešle JsonResponse po ukončení životního cyklu sámo.
Objekt payload máš v success callbacku tvého requestu, či tvé extension dostupný jako první parametr, takže v JS:

$.nette.ajax({
        // parameters, url etc. ..
        success: function (payload) {
                console.log(payload.bar) // vypíše do konzole 'BAR'
        }
});

V readme package nette.ajax.js jsou srozumitelně extensions, takže přidávám na závěr ještě ODKAZ ZDE

Nahoru Odpovědět

16.6.2017 23:02

TomasGlawaty

Člen

TomasGlawaty:16.6.2017 23:07

EDIT: Ještě jen dodám, že signály a snippety lze používat i v komponentách, ne jen v Presenterech, takže aby Presentery zbytečně neboptnaly, tak je lepší tyto vizuální věci přesunout do komponent, ale to už jsem trochu odbočil :-)

Nahoru Odpovědět

16.6.2017 23:07

Jan Pekala

Člen

Jan Pekala:17.6.2017 18:28

Ahoj, mohl bych se tě prosím zeptat, jak bych mohl vytáhnout data z payload hned při inicializaci nette.ajax? Zkoušel jsem něco jako:

$(function () {
    $.nette.init();

    $.nette.ext('init',{
        init: function (payload) {
            alert(payload.render);
        }
    });

});

ale nepodařilo se mi to

Nahoru Odpovědět

17.6.2017 18:28

TomasGlawaty

Člen

TomasGlawaty:18.6.2017 10:42

V odkazu, který jsem posílal máš vypsané argumenty, které se do jednotlivých callbacků dostávají viz. https://github.com/…er/readme.md#…
Payload je dostupný POUZE v success callbacku, jelikož to je jediný stav, kdy vše doběhlo na serveru v pořádku a vrátila se odpověď.
V init, load, before a start payload dostat nemůžeš, jelikož request na server ještě nebyl poslán. V error ho opět dostat nemůžeš, jelikož se někde vyskytla chyba, takže se žádná JSON response vrátit nemůže. Callback complete už slouží pak zpravidla k UI záležitostem, jako schovat na stránce spinner/loader atd.
Dále v tabulce callbacků v odkazu máš mimojiné u init callbacku napsané Called just once during $.nette.init(); call. - init callbacky jsou volány tedy pouze jednou po inicializaci samotného nette.ajax.
Dále je nevhodné použít název init pro vlastní extension, jelikož tento název nese již základní extension z balíku viz. https://github.com/…ette.ajax.js#L551
Takže nepoužívat tyto základní názvy (init, forms, snippets, abort ...) pokud nechceš danou extension opravdu přepsat vlastní implementací.
Dále bych chtěl ještě upozornit na fakt, že callback ve stylu

$.nette.ext('my-awesome-extension',{
        success: function (payload) {
            alert(payload.render);
        }
    });

se zavolá při KAŽDÉM AJAXovém requestu a je jesné, že pokaždé nebude v payloadu property render. Musíš si v tomto případě ošetřit, co požadavek zavolalo - ze argumentu settings by mělo jít od někud výtahnout, jaký prvek pořadavek "odpálil" etc. tady už bych tě asi odkázal na offiko fórum Nette, kde je ve vlákně o nette.ajax.js cca 16 stránek dotazů a odpovědí + v jiných vláknech se toho taky dá najít dost :-)

Editováno 18.6.2017 10:42

Nahoru Odpovědět

18.6.2017 10:42

Nejčastěji vyhledáváné

Diskuze: Přenos dat mezi z nette do JS