change jquery mobile pages using a header button

Question

I've been putting together a small app using jquery mobile. I created a header (ui-bar) outside of page containers, I'm using the latest version. Within this header I have a back button and a next button. The back button works automatically but I want to hook up the next button using javascript. Right now I have to specify the page I want to transfer to and because the header is on the outside of a page container the pagecontainer("getActivePage"); doesn't work. Also all pages are in a single html page. What would be the best way to transition between pages?

 

     Back
    Stylist Studio Formulas
    next




    
        
            
            Delete
        
    


  
    
        
            Info
            Friends
            Albums
            Emails
        
    
    



    

        Select Starting Level
        

            
                1
                
                Black
            
            
                2
                
                Very Dark Brown
            
            
                3
                
                Dark Brown
            
            
                4
                
                Medium Brown
            
            
                5
                
                Light Brown
            
            
                6
                
                Dark Blonde
            
            
                7
                
                Medium Blonde
            
            
                8
                
                Light Blonde
            
            
                9
                
                Very Light Blonde
            
            
                10
                
                Lightest Blonde
            
        
        Next

etc. All pages are set up the same, I just don't want to put navigation buttons in the content area of the pages. Instead I want to use the href id = next in the header.

Thanks

Omar · Accepted Answer

First, you need to change HTML markup of all elements in your example above, let jQM take care of it. All you have to add is as follows and jQM will enhance them.




  Back
  Header
  next





  
  
    
      
        Info
      
      
        Friends
      
      
        Albums
      
      
        Emails

However, external widgets such as header and footer should be enhanced manually.

$(function () {
    $("[data-role=header], [data-role=footer]").toolbar();
});

To move to next page programmatically, you need first to retrieve active page and check if a next page exists in DOM. You need to add click or any events listener once to button with id next on pagecontainercreate. The latter event fires on pageContainer and only once. Don't mix between it and pagecreate, as pagecreate fires once per page.

$(document).on("pagecontainercreate", function () {
    $("#next").on("click", function () {
        var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
            nextPage = activePage.next("[data-role=page]");

        /* 0 means there's no page in DOM after current page */
        if (nextPage.length != 0) {
            $.mobile.pageContainer.pagecontainer("change", nextPage);
        }
    });
});

Demo

change jquery mobile pages using a header button

Answers (1)

Related Questions