Jquery Mobile: Load page DIV before transition

Question

Hello!!

i have a question and i haven't found any solution for it anywhere...

So, I have a button that link to internal div page (#page2) with a very long list, I need that the internal div page will be "loaded" before the transition will start...

Here is a very simple Sample Code:

<!-- Page #1 -->
<!-- ... -->
        <div data-role="content">    
        <p>View internal page: <a href="#page2">goto Page 2</a></p>
         </div>
<!-- ... -->
    <!-- Start of Page #2 -->
    <div data-role="page" id="page2">
        <div data-role="header">
            <h1>Bar</h1>
        </div><!-- /header -->
        <div data-role="content">   
    <ul><li>...</li>
    <li>...</li>
    <!-- About 300+ of: <li>...</li> -->
    </ul>
    </div>

So, Clicking over The link to #page2 should give you jquery mobile "Loading..." And after it "loaded" the content the transition should begin.. The reason Im doing it in the same page it that im inserting to the page#2 div dynamically all facebook friends (Long list), and it take a long time from the Click and until the transition begin...

Here is a nice example of what i need: http://www.mpdtunes.com Just go to: Live Demo-> Login -> Click Artists...

Any suggestions are welcome!

Thank you very much!!!!

Answer 1

Basically you want to do this:

1. Use button like this:

   <a href="#" id="to-page2">goto Page 2</a>
   

2. Add a click event to it:

   $(document).on('pagebeforeshow', '#index', function(){ 
       $(document).on('click', '#to-page2', function(){ 
           // Load internal page content
       });       
   });
   

   Where #index is an id of your button containing page.

3. Show loading animation aka ajax loader

   setTimeout(function(){
       $.mobile.loading('show');
   },1);
   

   SetTimeout is needed because web-kit browsers have a problem with dynamically triggered ajax loader.

4. Load your internal page content. Now if you are using 1 HTML page with multiple pages you can append new content to listview immediately. This is because listview is already loaded into the DOM. If you are using several HTML pages then store your page content into localstorage variable.

5. Hide ajax loader, again with setTimeout.

6. Start page transition with:

   $.mobile.changePage("#page2");
   

7. If you have 1 HTML page then this is it. If you have stored your page content inside a localstorage then you will need to load it during the pagebeforeshow event of a second page, like this:

   $(document).on('pagebeforeshow', '#page2', function(){ 
       // Load internal page content from local-storage and append it
   });
   

8. Last step is listview page content initialization. For that look at my other answer, just look for a topic regarding listview.