Geek asks and answers

Load page in jQuery Mobile div

I want to load the contents of a page located in another folder (for example: "files / pages / example.html") for the div container by clicking on a button in jQuery Mobile!

How to do it?

<div data-role="page">
     <div id="container" data-role="content"><button id="clickButton">Click me!</button></div>
</div>
+5
source share
1 answer

$. mobile.loadPage is the method you need. It allows you to upload an external html file and embed it in dom. By default, for this method you need to load it as a whole page, so you need to specify options to load into the dom element. This is an example (and unverified) code:

$('#clickButton').on("click",function(){
  $.mobile.loadPage("theURLofThePage",{pageContainer: $('#container')})
});

don't forget about CrossDomain's security issue. I managed to make this work in firefox by adding:

$("#landingPage").live('pageinit', function() {
            jQuery.support.cors = true;
            $.mobile.allowCrossDomainPages=true;
        });

, div data-role = page (, id = 'secondPage'). data-role = page id = secondPage div:

$('#secondPage").trigger('pagecreate');
+1

More articles:


All Articles