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.