CODEWITHSUNDEEP
jquery-mobile
Carl Perriet
Carl Perriet

Reputation: 41

Load page to a div jQuery Mobile

I want to load the content of a page that is in another folder (eg: "files/pages/example.html") for the div container by clicking on the 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>

Upvotes: 4

Views: 16481

Answers (1)

Th0rndike
Th0rndike

Reputation: 3436

The $.mobile.loadPage is the method you need. It allows you to load an external html file and insert it into the dom. Default for this method is to load it as an entire page, so you have to specify the options to load it into a dom element. This is an example (and untested) code:

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

now, don't forget about the crossDomain security problem. I managed to make this work in firefox by adding:

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

Also, the page you are loading must be wrapped in a data-role=page div (let's say it has id='secondPage'). After the load, trigger on the data-role=page with id=secondPage div:

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

Upvotes: 1

Related Questions