falsandtru / pjax-api

The advanced PJAX superior to SPA.
https://falsandtru.github.io/pjax-api/
Apache License 2.0
318 stars 28 forks source link

Redirect handler #16

Closed kostychev closed 8 years ago

kostychev commented 8 years ago

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">
falsandtru commented 8 years ago

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

kostychev commented 8 years ago

Is it possible to avoid this constraint?

falsandtru commented 8 years ago

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

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

It does not work

falsandtru commented 8 years ago

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/

kostychev commented 8 years ago

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?

falsandtru commented 8 years ago

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.

kostychev commented 8 years ago

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

falsandtru commented 8 years ago

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
        }
      }
    }
  }
}
kostychev commented 8 years ago

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

kostychev commented 8 years ago

Is it possible to replace url in internal destLocation object?

falsandtru commented 8 years ago

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