Open full view…

Ajax page not reloading when returning back

Sat, 11 Nov 2017 06:08:14 GMT

I have an app that has 3 pages:parent (*index.html*), child (*child.html*) and grandchild (*grandchild.html*). There is a flow using hyperlink: parent -> child -> grandchild. The back link in grandchild and child back to parent are all a simple link with `href="#"` back to whatever the previous page was. ``` <a href="#" class="back link icon-only"><i class="icon icon-back"></i></a> ``` There is no problem if I open *child*, then immediately click back to *parent*. If I open *child*, and open *grandchild*, then back to *child*. Now when I click Back again to try to go back to *parent*, it would not work. There is no reaction. When I observed the DOM in the web browser, whenever there is a page transition, the class of each page would be changed (.page-on-left and .page-on-center). At any one time, there are at most only 2 pages under the `body > div.views > div.view > div.pages` element. When the *child* page moves to *grandchild* page, the *parent* page (first page) is removed from DOM. Thus, when the *grandchild* clicks *Back*, I should see the *parent* page being loa ded back as `.page-on-left` with *child* page as `.page-on-center`. This did not happen. The *child* page class is updated to `.page-on-center` but the reloading of *parent* page as `.page-on-left` did not happen. 1. parent (.page-on-center) *OK* 2. parent (.page-on-left) -> child (.page-on-center) *OK* 3. child (.page-on-left) -> grandchild (.page-on-center) *OK* 4. grandchild -> child (.page-on-center) *Partially OK, child page becomes .page-on-center but parent (.page-on-left) not reloaded * 5. child -> parent (.page-on-center) *Not OK, since parent (.page-on-left) was not reloaded into DOM in previous back step* May I know if there's something to check or certain requirements/criteria blocking the reloading of the *parent* page when returning from grandchild?