How do I prevent a link from adding to the history stack with jQuery Mobile

Question

Using jQuery mobile, I am using a list view with a previous and next links for pagination. Everything works fine, but I do not want the prev and next pages to add to the history stack. The idea is that hitting back will just go to the actual previous page.

The only thing I have found to do this is to add data-rel="dialog" to the a tags, but I don't want it to be a pop-up dialog.

Otherwise I tried to add

$.mobile.nonHistorySelectors="dialog,pagination"

to the mobileinit event, with the attribute data-rel="pagination" added to the a tag. But this only throws errors when the links are clicked (the error also occurs even without the nonHistorySelectors added to the mobileinit event).

EDIT:

The closest thing I have found is this JS

<script type="text/javascript">
    $(".page-prev").click(function(e) {
        e.stopPropagation();
        e.preventDefault();

        $.mobile.changePage(this.href, {changeHash:false, reverse:true});
    });

    $(".page-next").click(function(e) {
        e.stopPropagation();
        e.preventDefault();

        $.mobile.changePage(this.href, {changeHash:false});
    });
</script>

and this HTML

<a href="/blog?page=1" class="page-prev" data-role="button" data-icon="arrow-l">Prev</a>
<a href="/blog?page=3" class="page-next" data-role="button" data-icon="arrow-r">Next</a>

This seems to do well to keep the browsers history from being updated, but sometimes when click next the pages sliding around will do some funky things, such as loading/sliding twice. Plus one thing that it fails to do is that if I were to navigate to a page from here and come back, it will be back at page 1.

Answer 1

There is no mechanism to delete silently anything from browsing history.

You should use AJAX to populate your list. And so your links will look like <a href="javascript:renderNextPage()">

Answer 2

Do this and it should be fine:

 // Fix for back buttons
    $(document).on('vclick', '[data-rel=back]', function(e) {
        e.stopImmediatePropagation();
        e.preventDefault();
        // $.mobile.back(e);
        var back = $.mobile.activePage.prev('[data-role=page]');
        $.mobile.changePage(back, {
            transition: 'slide',
            reverse: true,
            changeHash: false
        });
    });

Answer 3

Does it work to add data-rel="back" to the anchor tag?

This is the solution suggested on the jQuery Mobile demo documentation, under 'Back linking'.

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html