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!!!!

score 2 · Accepted Answer · edited May 23 '17 at 12:11

Basically you want to do this:

Use button like this:

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

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.

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.
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.
Hide ajax loader, again with setTimeout.
Start page transition with:
```
$.mobile.changePage("#page2");
```
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
});
```
Last step is listview page content initialization. For that look at my other answer, just look for a topic regarding listview.

WOW! i will check it right away and will let you know! Thank you very much for this detailed answer!!!! — Eran Levi, May 23 '13 at 14:53
Hi again, I really don't wanna be rude, But comparing to you, my jquery knowledge is poor... can you please "summarize" it to a (even the smallest) sample code (JSFiddle or whatever) that will allow me to understand the "internal" ajax call with the setTimeout function... it will be very helpful!! Thank you again anyway! :) — Eran Levi, May 23 '13 at 15:23

Jquery Mobile: Load page DIV before transition

1 Answers1