Switch Pages with Push State
Ways that page transition (between
web.PageFunc) in QOR5 web app:
- Use a traditional link to a new page by url
- Use a push state link to a new page that only change the current page body to new page body and browser url
- Use a button etc to trigger post to an
web.EventFuncthat do some logic, then go to a new page
web.EventFunc, two ways go to a new page:
This example demonstrated the above:
When running the above demo, If you check Chrome Developer Tools about Network requests, You will see that the Location link and the Button is actually doing an AJAX request to the other page.
Look like this:
POST /samples/page_2?__execute_event__=__reload__ HTTP/1.1
The result is an JSON object with page's html inside.
__reload__ is another
web.EventFunc that is the same as
But it is default added to every
web.PageFunc. So that the web page can
both respond to normal HTTP request from Browser, Search Engine, Or from
other pages in the same web app that can do push state link.
- Write once with PageFunc, you get both normal html page render, and AJAX JSON page render
- EventFunc is always called with AJAX request, and you can return to a different page, or rerender the current page,
- EventFunc is not wrapped with layout function.
- EventFunc is used to do data operations, triggered by page's html element. and it's result can be:
- Go to a new page
- Reload the whole current page
- Update partial of the current page
Next we will talk about how to reload the whole current page, and update partial of the current page.