从JQuery Mobile历史记录中删除页面，以便“返回”按钮绕过它

Question

I've looked through the jQuery Mobile documentation to no avail, so hopefully someone here has solved what I so far haven't found a way to.

I have a jquery mobile page, served in the usual way (call it 'item display'). It contains info about a particular item. There is a button on this page that takes the user to a page in which he/she can take notes (essentially a big textarea) on the item displayed. Clicking 'save' on the notes page POSTs and redirects back to the item display page.

My issue is that once the notes have been saved, I would like the 'Back' button on the item display page to link back to the page the user was at before first visiting the item display page, NOT the default behaviour of taking the user back to the notes page (since it was technically the last page the user was on).

So, current behaviour:

item list page -> item display page -> click 'Edit Notes on item' -> notes page -> click 'Save' -> item display page -> click 'Back' -> notes page.

I want to replace the last step with clicking 'Back' to take the user to the item list page.

Any such luck? Thanks for any and all guidance you can provide

Answer 1

You can change pages without keeping them in browser history like so:

$.mobile.changePage('#page', {reverse: false, changeHash: false});

this is based on this answer: Jquery mobile, remove previous page

Answer 2

I have been in the same issue as you and I have created an approach, the only one that worked. If someone knows something better, it would be greatly helpful! So, let me explain how to solve (it is a bit complicated, but worked for me).

You will need to override the back button to roll back the history by X pages in the html you want, for example:

$(document).ready(function() {
    $('[data-rel=back]').click(function() {
        window.history.go(-4);
        return false;
    });
});

But, the 4 is actually a navigation counter variable in session.

If you use jsf, it would be like this:

window.history.go(-#{mySessionManagedBean.navigationCounter});

Also, you need to initialize and increment this each page change.

If you use jsf, it would be like this:

<h:commandButton ...>
    <f:setPropertyActionListener target="#{mySessionManagedBean.navigationCounter}" value="#{mySessionManagedBean.navigationCounter + 1}" />
</h:commandButton>