AJAX – nefunkční flashmessage při redirectu

kuldik2

Dobrý den,
začínám poajxovávat drobnou aplikaci a narazil jsem na problém se zobrazením flash zpráv při redirectu. Na stránce je formulář, který se odesílá ajaxově (naja) pouze pro validaci (není možné to udělat pouze javascriptem). Po úspěšné validaci potřebuji provést nastavení flashmessages a provést redirect. Ten je udělán tak, že do payloudu dám url klíč a přesměrování pak provede javascript na stránce. Vš funguje, tedy až na tu flash zprávu.

Tohle je úryvek z presenteru (je to jen pokusný formulář, ne ostrá aplikace)

protected function createComponentEditProviderForm(): \Nette\Application\UI\Form
    {
        $form = new \Nette\Application\UI\Form();
        $form->getElementPrototype()->novalidate('novalidate');

        $form->addText('name', 'TEST 1:')
                ->setDefaultValue('Test 1')
                ->setRequired('Zadejte jméno');
        $form->addText('name1', 'TEST 2:')
                ->setDefaultValue('Test 2')
                ->setRequired('Zadejte jméno1 ');
        $form->addSubmit('send', 'Uložit')
                ->setHtmlAttribute('class','ajax ')
                ->setHtmlAttribute('data-spinner','#spiner-provider');
        $form->onValidate[] = [$this, 'editProviderFormValidated'];
        $form->onSuccess[]  = [$this, 'editProviderFormSucceeded'];
        return $form;
    }

    public function editProviderFormValidated(\Nette\Application\UI\Form $form)
    {
        if($this->isAjax() && $form->hasErrors() )
        {
            $this->redrawControl('providerForm');
            //$this->isControlInvalid('providerForm');
        }
    }

    public function editProviderFormSucceeded()
    {
        $this->flashmessage("Tak se to povedlo");
        $this->payload->url = $this->link('this');
        if(! $this->isAjax())
	    {
            $this->redirect('this');
        }
    }

Tady je výstřižek ze šablony

{snippet flashMessages}
    {foreach $flashes as $flash}
            {$flash->message}<br>
    {/foreach}
{snippet}
	.
	.
	.
	.
{snippet providerForm}
     {control editProviderForm}
{/snippet}

A javascript

.
.
.
naja.addEventListener('success', (event) => {
     console.log("SUCCESS");
     if (typeof event.detail.payload.url !== 'undefined')
     {
         window.location.href = event.detail.payload.url;
     }
 });

.
.
.
naja.initialize();

Budu moc rád za nakopnutí.

Lumeriol

Predne, nejsem uplne expert na JS, takze nekdo zbehlejsi by asi nasel lepsi reseni, ale rekl bych, ze „window.location.href“ neprovede presmerovani takovym zpusobem, ktery si predstavujes. V Naje by na tohle melo fungovat neco ve stylu:

if (event.detail.payload.hasOwnProperty('forceRedirect')) {
	naja.redirectHandler.makeRedirect(event.detail.payload.url, event.detail.payload.forceRedirect);
}

s tim, ze v presenteru budes mit navic prikaz

$this->getPayload()->forceRedirect = true;

Druhou moznosti na redirect je naveseni vynuceneho redirectu primo na formular

{form providerForm, class => 'ajax', data-naja-force-redirect => 'true'}

ve zpracovani formulare provedes pouze „klasicky“ redirect bez ajaxove kontroly.

kuldik2

Díky za reakci. Nakonec pomohlo úplné odstřižení událostí formuláře editProviderFormSucceeded od ajaxu, ponechání pouze klasického redirectu a přidání atributu ‚data-naja-force-redirect‘ k formuláři.

m.brecher

Ahoj,

také řeším redirect ajaxového formuláře. Podle dokumentace jsem vytvořil tento skript:

Handler formuláře:

if($this->isAjax()){
    $this->redirect(':default');
}

Inicializace knihovny Naja:

document.addEventListener('DOMContentLoaded', () => {
    naja.initialize();
    // ....
    naja.redirectHandler.addEventListener('redirect', (event) => event.detail.setHardRedirect(true))
});

Vyzkoušeno funguje – Naja provede klasický synchronní (neajaxový) redirect.

Dokumentace: https://naja.js.org/#…

Editoval m.brecher (6. 11. 2023 2:37)