Naja – jak řídit forceRedirect true/false

Od 2.5.0 je tam událost payload, která se přesně k tomuhle dá použít.

Popřípadě data-naja-force-redirect na formuláři nebo submit tlačítku.

ručně přidám do historie nové url, protože to prohlížeč automaticky nedělá

To by ovšem udělat měl 🤔

Co se týká ajaxového redirectu, správně by měl být už pokus 1. Jen pozor na to, že ten druhý request využívá stejné options jako ten první, takže pokud tam (anebo globálně) nějak upravuješ nastavení historie, může to mít vliv. To je jediné, co mě k tomu napadá…

Ad pokus 3: response z makeRequest obsahuje payload, nikoliv Response, nejspíš proto je response.ok false

Nepodařilo se mě přesvědčit knihovnu Naja, aby po ajaxovém redirectu odpovídajícím způsobem upravila url. Nakonec bylo rychlejší si pro ajaxové formuláře napsat vlastní javascriptový ovladač. Po překreslení snippetů spouští automaticky překreslené vložené javascripty a má událost complete, ve které lze spustit nějaký externí skript. Po forcedRedirectu přidá nové url do historie, po ajaxRedirectu nahrazuje původní url novým. Konkrétní provedení redirectu lze snadno ovládat dvěma flagy v nette payloadu:

if($this->isAjax()){
   $this->presenter->payload->forcedRedirect = true
   $this->redirect($destination, $args)
}

if($this->isAjax()){
   $this->presenter->payload->pushState = true
   $this->redirect($destination, $args)
}

<script>
    class Bite extends EventTarget
    {
        #ajaxAttribute = 'data-ajax'

        handleSubmit(event)
        {
            event.preventDefault()
            const form = event.target
            if(form.hasAttribute(this.#ajaxAttribute)){
                const body = this.#getBody(form, event.submitter)
                this.#submitData(form, body)
            }
        }

        #getBody(form, submitter)
        {
            let body = form.enctype === 'application/x-www-form-urlencoded'
                ? new URLSearchParams(new FormData(form))
                : new FormData(form);
            body.append(submitter.name, submitter.value)
            return body
        }

        #submitData(form, body)
        {
            fetch(form.action, {
                method: form.method,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': form.enctype,
                },
                body: body
            })
                .then(response => {
                    if(!response.ok){
                        throw new Error('server respond failed')
                    }
                    return response.json()
                })
                .then(payload => this.#processResponse(payload))
                .catch(error => console.error(error));
        }

        #processResponse(payload)
        {
            if(payload.snippets){
                const snippets = payload.snippets
                for(let id in snippets){
                    this.#redrawSnippet(id, snippets[id])
                    let snippet = document.getElementById(id)
                    this.#executeScripts(snippet)
                }
                let completeEvent = new Event('complete')
                this.dispatchEvent(completeEvent)
            }
            const redirectUrl = payload.redirect
            const pushState = payload.pushState
            if(redirectUrl){
                if(payload.forcedRedirect){
                    this.#forcedRedirect(redirectUrl)

                }else{
                    this.#redirect(redirectUrl, pushState)
                }
            }
        }

        #redrawSnippet(id, html)
        {
            let snippet = document.getElementById(id)
            if(snippet === null){
                throw new Error('snippet ' + id + ' not found')
            }
            snippet.innerHTML = html
        }

        #forcedRedirect(redirectUrl)
        {
            window.location.href = redirectUrl
            window.history.pushState({}, "", redirectUrl)
        }

        #redirect(redirectUrl, pushState)
        {
            fetch(redirectUrl, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/json',
                },
            })
                .then(response => {
                    if(!response.ok){
                        throw new Error('server respond failed')
                    }
                    return response.json()
                })
                .then(payload => {
                    this.#processResponse(payload)
                    if(pushState){
                        window.history.pushState({}, "", redirectUrl)

                    }else{
                        window.history.replaceState(null, '', redirectUrl)
                    }
                })
                .catch(error => console.error(error));
        }

        #executeScripts(snippet)
        {
            let scripts = snippet.getElementsByTagName('script');
            for (let i = 0; i < scripts.length; i++) {
                eval(scripts[i].innerText);
            }
        }
    }
    const bite = new Bite()
    document.addEventListener('DOMContentLoaded', () => {
        bite.addEventListener('complete', () => {
            something.init()
        })

    })
    document.addEventListener("submit", (event) => bite.handleSubmit(event))
</script>

Editoval m.brecher (11. 11. 2023 14:52)

@jiripudil

Budu v sobotu v Brně, tak to můžeme probrat u piva po skončení oficiální části posoboty.