Geek Answers Handbook

How to prevent a link from being added to the history stack using jQuery Mobile

Using jQuery mobile, I use the list view with the previous and next links to paginate. Everything works fine, but I do not want the previous and next pages to be added to the history stack. The idea is that strokes will only go to the previous page.

The only thing I found was to add data-rel = "dialog" to the tags, but I do not want this pop-up dialog box.

Otherwise, I tried to add

$.mobile.nonHistorySelectors="dialog,pagination"

for the mobileinit event, with the data-rel = "pagination" attribute added to the a tag. But this only causes errors when clicking links (the error also occurs even without adding non-historical elements to the mobileinit event).

EDIT:

The closest I found is 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>

It’s like the browser history wouldn’t be updated, but sometimes when you click on the page, the sliding pages will do some funky things, such as loading / changing twice. Plus, one thing he cannot do is that if I went to a page from here and came back, she would go back to page 1.

+8
jquery jquery-mobile
source share
5 answers

Do it and everything 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 }); });
+1
source share

There is no mechanism to remove silence from your browsing history.

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

+1
source share

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

This is the solution suggested in the jQuery Mobile demo documentation in the Backlink section.

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

+1
source share

I had the same problem. My solution was to divide the site navigation and page navigation into two separate navigation menus. So I have a heading with site navigation and will add the next / previous navigation buttons to the page: AJAX Request Help for next / previous page

Live example:

UPDATE:

Here is a quick example of what I mean:

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>
0
source share

Data-rel attr worked for me

 <a data-rel="dialog" ...

In accordance with the documentation

Link Links, including those that have the data-role = "button" role, and form submit buttons share these attributes

data-rel back (to go one step back in history)

dialogue (to open a link in a style that is not displayed in the story)

external (for communication with another domain)

https://demos.jquerymobile.com/1.0/docs/pages/page-links.html

0
source share

More articles:


All Articles