xml - How to go to the previous page dynamically using jquery? -


i'm new jquery/jquery mobile.i'm trying previous page dynamically using jquery. tried not working can me out problem.

my code in fiddle

when click on next & prev buttons working fine first time when i'm again same second time "prev" button working fine "next" button not working automatically going next links , file not loading first time.

can me work properly.

thanks in advance.

updated question:

tiles grid view tiles different grid.

in picture grid view in tiles wont show titles @ time.

for example:consider image have f titles here using grid view.consider same in tiles have f titles show titles depends on screen size. if have more f titles have "one button" displays count of titles have.when click on has open other remaining titles.

move between pages using $.mobile.changepage() , retrieving [data-role=page] id of previous .prev() , next .next() pages.

demo

create pages dynamically

$(document).on('pageshow', '#chapter', function () {  var length = $('#chapter [data-role=listview] li a').length;  $('#chapter [data-role=listview] li a').each(function (i) {   var file = $(this).attr('file');   var content = $(this).text();   var seq = $(this).data('sequence');   if ($('[data-role=page]#' + seq).length === 0) {    $($.mobile.pagecontainer).append('<div data-role="page" id="' + seq + '" class="listitems"><div data-role="header"><a href="#" data-role="button" class="prev" data-icon="arrow-l">prev</a><h1 id="header2">' + content + '</h1><a href="#" data-role="button" class="next" data-icon="arrow-r">next</a></div><div data-role="content"></div><div data-role="footer" data-position="fixed"><a href="#home" data-role="button" data-icon="home" data-iconpos="notext"></a></div></div>');    $('[data-role=page]#' + seq + ' [data-role=content]').load(file);    if (i === 0) {     $('[data-role=page]#' + seq).addclass('first');    }    if (length == (i + 1)) {     $('[data-role=page]#' + seq).addclass('last');    }   }  }); });   $(document).on('click', '#chapter [data-role=listview] li a', function () {  var goto = '#' + $(this).data('sequence');  $.mobile.changepage(goto); }); 

navigation

// next page $(document).on('click', '.next', function () {  var next = '#' + $.mobile.activepage.next('[data-role=page]')[0].id;  $.mobile.changepage(next, {     transition: 'slide'  }); });  // previous page $(document).on('click', '.prev', function () {  var prev = '#' + $.mobile.activepage.prev('[data-role=page]')[0].id;  $.mobile.changepage(prev, {     transition: 'slide',     reverse: true  }); }); 

show/hide navigation buttons

$(document).on('pagebeforeshow', '[data-role=page].listitems', function () {  if ($(this).hasclass('first')) {   $('.prev').hide();   $('.next').show();  }   else if ($(this).hasclass('last')) {   $('.prev').show();   $('.next').hide();  }  else {   $('.next, .prev').show();  } }); 

Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -