How do I prevent a link from adding to the history stack with jQuery Mobile_问答_开发者

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开发者_Python百科 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.

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()">

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
        });
    });

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

I had the same problem, My solution was to split up the site navigation and the pagination navigation into two separate navigation menus. So I have the header navigation with the site navigation and would add the next/prev navigation buttons to the page: AJAX Request Help for next/previous page

Live Example:

http://jsfiddle.net/Jaybles/MawSB/

UPDATE:

Here is a fast example of what I mean:

http://jsfiddle.net/phillpafford/trdYP/26/

JS:

var currentPage=1;
loadCurrentPage();

$("#next, #prev").click(function(){
    currentPage= ($(this).attr('id')=='next') ? currentPage + 1 : currentPage - 1;

    if (currentPage==0) 
        currentPage=1;
    else if (currentPage==101) 
        currentPage=100;
    else
        loadCurrentPage();
});

function loadCurrentPage(){
    //$('input').attr('disabled','disabled');
    $('#displayResults').html('<img src="http://blog-well.com/wp-content/uploads/2007/06/indicator-big-2.gif" />');

    $.ajax({
        url: '/echo/html/',
        data: 'html=Current Page: ' + currentPage+'&delay=1',
        type: 'POST',
        success: function (data) {
           // $('input').attr('disabled','');
            $('#displayResults').html(data);
        }
    });

    $('#home').page();
}

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Home Page</li> 
            <li><a href="#page2">Page 2</a></li> 
        </ul> 
        <input id="next" type="button" value="Next" />
        <input id="prev" type="button" value="Previous" /> 
        <div id="displayResults" name="displayResults">
        </div>
    </div>
</div>
<!-- Page 2 -->
<div data-role="page" id="page2"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Page 2</li> 
            <li><a href="#home">Home Page</a></li> 
        </ul>
    </div>
</div>

The data-rel attr has worked for me