falsandtru/pjax-api

Redirect handler

Closed this issue · 12 comments

I have form with pjax.
After submit it on url /update, in response i get 302 redirect to location /show.
Content is loaded ok, but url in the address bar is /update.

It's a bug?

Pjax settings

            $.pjax({
                area: ['#pjax-container'],
                form: 'form',
                load: {
                    css: true,
                    script: true
                },
                fix: {reference: false}
            });

Form

<form method="post" action="/update">

It is a spec/constraint of Ajax. Ajax has not a way to get the redirect destination url.

Is it possible to avoid this constraint?

No. Otherwise, if you use redirection by using meta tags of html, pjax uses it url.

https://github.com/falsandtru/jquery-pjax/blob/v2.41.0/src/ts/model/app.page.update.ts#L122

'/show'.match(/\w+:\/\/[^;\s"']+|$/i).shift();

It does not work

Okay, I'll support relational path. In actuality, meta tag redirection is not a smart solution. Now I recommend to use canonical url, and fix url by yourself using javascript.

<link rel="canonical" href="http://example.com/show">

In this case, your problem probably occurs in a few pages that uses post form. It should resolve by disabling of pjax. Basically, pjax should not use with the text box because user input will lose by pjax. Pjax provides scope parameter for this case. You can control enabling/disabling of pjax using scope parameter.

http://falsandtru.github.io/jquery-pjax/api/core/setting/scope/

Really is no good solution. I have a large number of forms.

I wanted to use pjax for permanent websocket connection.
Maybe you know the solution for it?

In your case, you need to fix the url manually after update by pjax. That correct url can get from link tag or HTTP header when you embed url to those payloads. Or infer using source url. In the future, fetch api will probably resolve this problem.

How can i get pjax resp? What event to look?

You can get ajax(pjax) response from ajax callbacks.

http://falsandtru.github.io/jquery-pjax/api/callback/

And you can replace the url update function of pjax.

https://github.com/falsandtru/jquery-pjax/blob/v2.41.0/src/ts/model/app.page.update.ts#L189

var settings = {
  callbacks: {
    update: {
      url: {
        before: function (event, setting, origLocation, destLocation) {
          // update url
          return false; // cancel the update
        }
      }
    }
  }
}

or fix immediately.

var settings = {
  callbacks: {
    update: {
      url: {
        after: function (event, setting, origLocation, destLocation) {
          // update url
        }
      }
    }
  }
}

When change url (window.history.replaceState) on update.url.after i get error "throw: location mismatch"

Is it possible to replace url in internal destLocation object?

I'll fix it bug. Wait a few days please(I have a machine trouble now).