在modal（ajax）中加载新页面，同时使用pushState更改URI

I am trying load new content (login/thread create/thread view/quick search) within a pop-up window/modal, but change the URI as well using pushState.

Now, I have the general concept down, but am slightly confused on the exact mechanics.

I was browsing sites and came across www.usatoday.com/news. I did some research and it appears they use pushState to change the URI and load content via AJAX in a modal window.

My question involves specifically how to pull and display the 'new page' within the modal window. Its clear you will need to have a new controller to display the correct URI and make it shareable/crawlable. But is it possible to take that page and display it directly in a modal? Or do you have to cheese the information in a completely new ajax-driven model/view?

what modal are you using? If for example you are using fancybox. You just give the anchor link to your page an additional class of fancybox and the page is opened in a modal, all the ajax is handled for you. You can then add your code for pushstate in the aftershow callback function of the fancybox.

There is also an after close callback, where you would popstate or push a new state to revert the uri back to is original state.

How you handle someone entering the uri externally is up to you. But id you have already built the page as a standalone link then it shouldn't be a problem. if you wanted it to open in the fancybox though you would have to init the fancybox on doc ready for that page.

Also you said that it is clear you would have to have a new controller for this. That is not true at all, in fact I would not have a separate controller at all, if I was you I would define a constant as follows in constants.php:

define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

You can then just do a check like the following:

if (!IS_AJAX){
    //here is code for non ajax page load, e.g load headers, footers etc that you dont need in ajax requests etc.
}else{
    //often dont need this but if you have code specifically for ajax call put it here
}

}