předavaní dat mezi ajax a latte

@vlkodlak

RESENI „REBUSU“

Jak píšeš, bylo potřeba zavolat metodu $this->sendPayload(). Zajímalo mne, kde je to v dokumentaci k Nette Ajaxu uvedeno a nenašel jsem vůbec nic:

https://doc.nette.org/…ication/ajax

$this->payload->message je uvedeno v příkladu kódu: https://doc.nette.org/…ication/ajax#…

public function actionDelete(int $id): void
{
	if ($this->isAjax()) {
		$this->payload->message = 'Success';
	}
	// ...
}

Jak píšeš, že tam chyběla ta metoda $this->sendPayload(), tak si myslím, že by bylo vhodné ji do dokumentace doplnit a nějak popsat co dělá + přidat ji do toho příkladu kódu:

public function actionDelete(int $id): void
{
	if ($this->isAjax()) {
		$this->payload->message = 'Success';
        $this->sendPayload();
	}
	// ...
}

Podotýkám ale, že problematiku payload v Nette neznám a když jsem četl dokumentaci, tak jsem nabyl dojmu analogicky k automatickému odesílání latte šablon, že se payload také odesílá nějak podobně automaticky. Bylo by dobré, kdyby nějaký znalec ajaxového payload můj návrh potvrdil předtím, než bych podal do dokumentace PR.

Editoval m.brecher (15. 10. 2023 6:04)

m.brecher napsal(a):
Podotýkám ale, že problematiku payload v Nette neznám a když jsem četl dokumentaci, tak jsem nabyl dojmu analogicky k automatickému odesílání latte šablon, že se payload také odesílá nějak podobně automaticky. Bylo by dobré, kdyby nějaký znalec ajaxového payload můj návrh potvrdil předtím, než bych podal do dokumentace PR.

@mbrecher
Relevantní kód v Presenteru: https://github.com/…resenter.php#L234

@Kcko

Už jsi se to naučil?

Poslal jsem do dokumentace několik PR, ale po prvotních zkušenostech jsem opatrný, protože člověk od boku snadno napíše PR, kde je něco nedomyšleného, obzvláště pokud se doplňuje něco, co v dokumentaci chybí. Takže nechci posílat nedomyšlené PR, aby se zbytečně github dokumentace neznepřehledňoval.

mystik napsal(a):

Payload by se mel poslat automaticky pokud tomu neco nezabrani. Co mas v action/render metodach ktere nasleduji po provedeni toho handle?

nic, jen promenou, kterou načtu z databaze

    public function renderDefault() {
        $this->template->dataMenu = $this->webFacade->getUserMenu($this->user->getIdentity()->getData()['IDrole']);
    }

• jinak pro info @DavidGrudl, @mbrecher : cca před rokem jsem pracoval na zakázce, kde jsem též potřeboval pracovat s payloadem a nic nebylo potřeba měnit či nastavovat vše fungovalo přesně dle návodu na web stránce. Teď pomohlo jen přidáni $this->sendpayload dokonce, když jsem pokusil použit stejná rozšíření bootstrap 4.5.2, jquery-2.2.4.min.js … výsledek byl stejný v payload byla odeslaná jen sestavená web stránka a nic jiného …. přiznávám se, že to bylo již poté co jsem našel řešení a možná, že již jsem nebyl důsledný v testu.
• A také doplním postřeh, že po aplikaci řešení ač mohu pracovat s předanou hodnotou tak console.log(payload.message); a console.log(payload[‚message‘]); mi nevypíše nic, což jsem čekal, že funguje na všech 100% za jakéhokoliv počasí, ale zas alert(payload.message); ano a dokonce alert(typeof(payload[‚message‘])); správně oznámí, že skutečně se jedna o stringovou hodnotu.

mystik napsal(a):

To je divne to by melo fungovat i bez toho sendPayload. Metoda actionDefault neexistuje? Jeste by to mohly nejak ovlivnit osttani metody z lifecycle presenteru. Neukazal bys cely kod presenteru? Jestli tam treba nedelas nejaky redirect apod.

declare(strict_types=1);

namespace App\Presenters;

use Nette;

final class AdminPresenter extends Nette\Application\UI\Presenter {

    public function beforeRender() {
        if (!$this->getUser()->isLoggedIn()) {
            $this->redirect('Sign:login');
        }
        $this->template->titlepage = $this->MySysDefinition->getValue("verze");
    }

    public function renderDefault() {
        $this->template->dataMenu = $this->webFacade->getUserMenu($this->user->getIdentity()->getData()['IDrole']);
    }

    public function renderUser() {
        $this->template->dataMenu = $this->webFacade->getUserMenu($this->user->getIdentity()->getData()['IDrole']);
        $this->template->listUsers = $this->webFacade->getAllUsers();
        $this->template->allroles = $this->webFacade->getAllRoles();
    }

    public function handleChangeswithvalue(array $param) {
        //bdump($param);
        $this->webFacade->onoffUser((int) $param['aRecId'], (int) ($param['aValue']));
        $this->redrawControl('adminListUsers');
    }

    public function handleAdminuserrefresh() {
        $this->redrawControl('adminListUsers');
    }

    public function handleUserdata(array $param) {
        //$this->payload->odpoved = 'prave jsem vratil data z handleru pro' . $param['aRecId'];

        if ($this->isAjax()) {
            $this->payload->message = 'vlkodlak podruhe objevil ameriku';
            $this->sendPayload();
        }
    }
}

@vlkodlak @DavidGrudl

Zkoušel jsem testovat jak funguje $this->payload a $this->sendJSON() když se pošle jednoduchý ajaxový signál pomocí javascript fetch api a objevil jsem nějaké chyby v odpovědi Nette. Přitom komunikace fetchAPI + sendJSON() mě v jiném projektu funguje – mám tam ale starší verze Nette.

<script>
    class Test
    {
        #signalUrl

        constructor(signalUrl){
            this.#signalUrl = window.location.origin + signalUrl
        }

        ping()
        {
            fetch(this.#signalUrl)
                .then(response => {
                    if(!response.ok){
                        throw new Error('network response not OK')
                    }
                    return response.json()
                })
                .then(jsonData => {
                    console.log(jsonData)
                    let data = JSON.parse(jsonData)
                    console.log(data)
                })
                .catch(error => console.error(error))
        }
    }
        const test = new Test({$presenter->link('ping!')})
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('test-button').addEventListener('click', () => test.ping())
        })
    </script>

presenter:

public function handlePing()
{
    bdump($this->isAjax()); // první chyba - vrací false, přestože Tracy indikuje ajax request
}

public function handlePing()
{
    $this->payload->message = 'ahoj'; // SyntaxError: Unexpected token '<', "<!DOCTYPE
}

public function handlePing()
{
    $this->payload->message = 'ahoj';
    $this->sendPayload();    // SyntaxError: "[object Object]" is not valid JSON at JSON.parse
}

 public function handlePing()
{
   $this->sendJson(json_encode(['message' => 'ahoj']));  // funguje OK
}

Chyby jsem indikoval v úplně poslední verzi Nette:

latte/latte v3.0.9
nette/application v3.1.14
nette/bootstrap v3.2.1
nette/caching v3.2.2
nette/component-model v3.0.3
nette/database v3.1.7
nette/di v3.1.5
nette/finder v3.0.0
nette/forms v3.1.12
nette/http v3.2.2
nette/mail v4.0.1
nette/neon v3.4.1
nette/php-generator v4.1.0
nette/robot-loader v4.0.1
nette/routing v3.0.5
nette/schema v1.2.5
nette/security v3.1.7
nette/utils v4.0.2
tracy/tracy v2.10.4

Ve stejné verzi Nette používám ajaxove Nette Snippety + Naja a to funguje výtečně.

Takže to vypadá, že možná v nejnovější verzi Nette vznikly nějaké chyby v komunikaci při použití sendJSON, payload a vyhodnocení požadavu javascriptu pomocí fetchAPI. Používám prohlížeč Chrome.

@vlkodlak

již zpět nedostávám message, jen celou vytvořenou html v payload

Ano, to potvrzuje i můj test. Zkus místo toho odeslat data pomocí $this->sendJson(json_encode([‚message‘ ⇒ ‚ahoj‘])), to by fungovat mělo a popř. vynechat if($this->isAjax())

Editoval m.brecher (15. 10. 2023 21:03)

Kamil Valenta napsal(a):

Pokud console.log(payload.message); nefunguje a alert(payload.message); ano, hledal bych chybu v nevalidním frontendu. Nevypisuje se do konzole nějaký JS error, za kterým se to zařízne?

ano úvaha spravná, ale bylo to první co jsem zkoumal, když jsem „nedostal“ požadovanou odpověď

David Grudl napsal(a):

Pokud používáš fetch(), musíš poslat i hlavičku ‚X-Requested-With‘: ‚XMLHttpRequest‘

promin, nerozumim tvé nápovedě
Ajax → Presenter … vse funguje
Presenter → ajax … v promene payload dojde ke ztrate vlozene hodnoty, jak mam rici nette aby $this->payload->message … odeslal viz tvuj popis?

@vlkodlak To nebude uplne cely kod presenteru ne? Nebo kde se vezmou veci jako $this->webFacade?

Jde o to ze pokud nevidim opravdu uplne cely kod presenteru, tak nemuzu vyloucit moznost, ze se tam nekde v castech cos neposlal, dela neco co zpusobuje tu chybu. K te chybe nedochazi tam co pises ale tesne pred koncem lifecycle, kde se ma payload poslat automaticky. Pokud k tomu nedojde tak pravdepodobne neco zmenilo stav presenteru tak ze payload neposle.

@vlkodlak mozno trochu offtopic, ale preco si to neodkrokujes cez xdebug? Tak rychlo zistis, kde ti to zlyhava.

vlkodlak napsal(a):
ještě mně napadlo, zda lzé v consoli vidět zda payload není pole … hloupost, ale mám pocit, že v prvních dnech snahy o pochopení jsem zahledl neco s payloadem … ale jak už to bývá podruhe jsem to již nedohledal, lze vytahnout / prohledat celý balik dat/komunikace fultextově?

V prohlížeči si otevři Developer Tools, záložku Network, najdi si svůj AJAX požadavek (buď pomocí filtru a nebo pohledem), rozklikni jej a uvidíš data požadavku i odpovědi.

Koukni na misto v Presenter co vyse linkoval @nightfish a dumpni si tam hodnoty co overuje ten if ktery urcuje zda se sendPayload zavola automaticky. Podle toho muzem zacit hledat co to zpusobi.

Jde o to zda se ti tam vola to sendPayload ne jestli mas v tom poli spravna data. Protoze to vypada ze se to nezavola.

Takze isAjax ti v handkeru vraci true ale na tom miste uz false? To by melo byt nemozne. Tam bude nejaka zrada kterou prehlizime. Urcite to je v ramci stejneho requestu? Neni tam tech requestu vic? Nejake presmerovani? Nebo tak?

Zkoušel jsem přijít na to, co způsobuje chyby v komunikaci javascript fetchAPI s Nette při použití vestavěného objektu payload, které jsem popsal zde: https://forum.nette.org/…ajax-a-latte#…

a) aby metoda $this->isAjax() vracela správnou hodnotu, musí se na straně javascriptu nastavit http hlavička ‚X-Requested-With‘: ‚XMLHttpRequest‘ (fetchAPI i XMLHttpRequest)

b) payload při komunikaci s vlastním javascriptem (fetchAPI, XMLHttpRequest) se automaticky neodešle i když se přidají http hlavičky, které přidává knihovna Naja, když se ručně zavolá $this->sendPayload() je po problému

c) fetchAPI při zpracování response z Nette payload hlásí nevalidní JSON, což lze ale vyřešit použitím response.text() místo response.json()

fetch(this.#dataUrl,{
    method: 'GET',
    headers: {  // přidat hlavičky jako Naja nepomůže automaticky odeslat payload z Nette
        'X-Requested-With': 'XMLHttpRequest',
        'accept': 'application/json',
    }
})
    .then(response => {
        return response.text();  // funguje s Nette sendPayload()
        // return response.json();  // nefunguje s Nette sendPayload()
    })
    .then(jsonData => {
        console.log(JSON.parse(jsonData))
    })

Otázkou zůstává, co všechno má být v kódu splněno, aby automatické odesílání payload fungovalo?? Není lepší metodu sendPayload() v dokumentaci uvést (nyní chybí) a dát ji i do příkladu s $this->payload, kde jak testy ukázaly automatické odeslání není spolehlivé??

@mbrecher a máš repo, kde ti nefunguje minimálny príklad z dokumentácie (Keď pominieme „automatické odosielanie“) Ja osobne nedokážem zreprodukovať čo píšeš.

fetch(url, {
	headers: {'X-Requested-With': 'XMLHttpRequest'},
})
.then(response => response.json())
.then(payload => {
	// zpracování odpovědi
});

Nette automaticky odosiela payload len v prípade invalidných snippetov – čo dáva zmysel, lebo ajaxovým requestom na signál asi väčšinou chceš updatnúť nejaký snippet.

Pokiaľ máš v pláne posielať JSON, tak zavoláš $presenter->sendPayload() alebo $presenter->sendJson($data) už v handle metóde, nie?

@mskocik

Nette automaticky odosiela payload len v prípade invalidných snippetov

Díky za info, protože to přispívá podstatně k vyřešení problému. Zatím zde byly tvrzení, že se payload odesílá automaticky a tudíž není vhodné do ukázky kódu v dokumentaci doplňovat metodu $this->sendPayload().

Pokud máš pravdu, tak potom chyba „selhání automatického odeslání payloadu“ není chyba, ale žádoucí chování Nette. Bylo by ale dobré toto nějak doplnit do dokumentace, protože tohle se tam v úvodu do kapitoly AJAX a Snippety dohledat nedá. Metoda $this->sendPayload() tam kupříkladu není vůbec uvedená.

Pokiaľ máš v pláne posielať JSON, tak zavoláš $presenter->sendPayload() alebo $presenter->sendJson($data) už v handle metóde, nie?

Samozřejmě, používám metodu $presenter->sendJson($data) tam žádný problém není.