Im working with jquery mobile in my project and what i trying to do instead to use the swipe effect, use two button to change to the next and to the previous data-role=page.

im trying with this javascript but i dont know why isn't working

thx for any help.

HTML:

<div data-role="page" id="p1">
 <div data-role="header" data-theme="a" data-position="fixed" data-id="footer" data-fullscreen="true">                  
 <a href="#prvbutton" id="goback" data-icon="arrow-l" style="margin-right:340px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Página Anterior</a>
<a href="#nextbutton" id="goforward" data-icon="arrow-r" style="margin-right:290px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Próxima Página</a>
</div>
<div data-role="content">
.....something......
</div>
</div>

<div data-role="page" id="p2">
 <div data-role="header" data-theme="a" data-position="fixed" data-id="footer" data-fullscreen="true">                  
 <a href="#prvbutton" data-icon="arrow-l" style="margin-right:340px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Página Anterior</a>
<a href="#nextbutton" data-icon="arrow-r" style="margin-right:290px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Próxima Página</a>
</div>
<div data-role="content">
.....something......
</div>
</div>

and so on........

Javascript:

$("#nextbutton").on('click', '#goforward', function () {
 var next = '#' + $.mobile.activePage.next('[data-role=page]')[0].id;
 $.mobile.changePage(next, {
    transition: 'slide'
 });
});

// Previous page
$("#prvbutton").on('click', '#goback', function () {
 var prev = '#' + $.mobile.activePage.prev('[data-role=page]')[0].id;
 $.mobile.changePage(prev, {
    transition: 'slide',
    reverse: true
 });
});

Im working with jquery mobile in my project and what i trying to do instead to use the swipe effect, use two button to change to the next and to the previous data-role=page.

im trying with this javascript but i dont know why isn't working

thx for any help.

HTML:

<div data-role="page" id="p1">
 <div data-role="header" data-theme="a" data-position="fixed" data-id="footer" data-fullscreen="true">                  
 <a href="#prvbutton" id="goback" data-icon="arrow-l" style="margin-right:340px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Página Anterior</a>
<a href="#nextbutton" id="goforward" data-icon="arrow-r" style="margin-right:290px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Próxima Página</a>
</div>
<div data-role="content">
.....something......
</div>
</div>

<div data-role="page" id="p2">
 <div data-role="header" data-theme="a" data-position="fixed" data-id="footer" data-fullscreen="true">                  
 <a href="#prvbutton" data-icon="arrow-l" style="margin-right:340px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Página Anterior</a>
<a href="#nextbutton" data-icon="arrow-r" style="margin-right:290px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Próxima Página</a>
</div>
<div data-role="content">
.....something......
</div>
</div>

and so on........

Javascript:

$("#nextbutton").on('click', '#goforward', function () {
 var next = '#' + $.mobile.activePage.next('[data-role=page]')[0].id;
 $.mobile.changePage(next, {
    transition: 'slide'
 });
});

// Previous page
$("#prvbutton").on('click', '#goback', function () {
 var prev = '#' + $.mobile.activePage.prev('[data-role=page]')[0].id;
 $.mobile.changePage(prev, {
    transition: 'slide',
    reverse: true
 });
});

• javascript
• jquery
• html
• jquery-mobile

• 1 There is no ID nextbutton or prvbutton, either change your HTML or your JavaScript selectors. – Kilian Stinson Commented Jul 9, 2013 at 11:08
• 1 Plus I can't spot the prev and next classes – Kilian Stinson Commented Jul 9, 2013 at 11:13
• @Kilian: thx for the tip... i have add an id for the buttons and have updated the code above... take a look pls – user2232273 Commented Jul 9, 2013 at 11:13
• try changing it to this $(document).on('click', '#goforward', function ()... – Kilian Stinson Commented Jul 9, 2013 at 11:17
• yep.... had the same ideia now and i have tested .. works fine... thx for the help.. – user2232273 Commented Jul 9, 2013 at 11:19

2 Answers 2

The answer given is correct, however, you need first to check whether there is an existing page before or after the active page. Because if you call $.mobile.changePage() on undefined value, both buttons will stop working.

Demo

$(document).on('click', '#goforward', function () {
  if ($.mobile.activePage.next('.ui-page').length !== 0) {
   var next = $.mobile.activePage.next('.ui-page');
   $.mobile.changePage(next, {
       transition: 'slide'
   });
  } 
});

$(document).on('click', '#goback', function () {
  if ($.mobile.activePage.prev('.ui-page').length !== 0) {
   var prev = $.mobile.activePage.prev('.ui-page');
   $.mobile.changePage(prev, {
       transition: 'slide',
       reverse: true
   });
  }
});

The selectors you are using are wrong, you mixed the href with the id. Change your selectors to match your HTML code.

$(document).on('click', '#goforward', function () {
    var next = '#' + $.mobile.activePage.next('[data-role=page]')[0].id;
    $.mobile.changePage(next, {
        transition: 'slide'
    });
});

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