Load page to a div jQuery Mobile

Question

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>

I have a question. Are you testing in browser? if not, did you add support.cors and allowCrossDomainPages? — Th0rndike
– Th0rndike, Commented Jun 26, 2012 at 14:00

Th0rndike · Accepted Answer · 2012-06-26 14:16:15Z

1

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');

edited Jun 26, 2012 at 14:16

answered Jun 26, 2012 at 10:42

Th0rndike

3,4363 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Th0rndike Over a year ago

and what happened? where's the code? what errors did you get? This is the standard way of doing it, if it didn't work there was some mistake in your code, but of course I (and the SO community) cannot help you out if you don't show us what have you tried and which problems you found along the way.

Carl Perriet Over a year ago

I'm sorry. I tried the code that I gave at the beginning of the post and your jQuery code to load the page (just moved from .on to .live and added a ';' at the end of loadPage function). There is no error (using the simulator iOs) and does nothing! I tried doing an "alert(('#container').html())" after loadPage function but the alert says that the div #container is empty (does not show anything on the alert).

Carl Perriet Over a year ago

I am sure that the url is correct because if I do "$('#container').load(url);" he does what I want .. but loses the styles of css jQuery Mobile! I tried also to use after the .load the function .trigger('create') but without success.

Th0rndike Over a year ago

What does your second page contain? using trigger('create'), trigger('refresh') or trigger('pagecreate') shoud style it for you

Carl Perriet Over a year ago

At this point (just to test) the other page has only one button with the style of jQuery Mobile - "<button>Example</button>". None of these trigger commands update the styles .. applying the trigger to the content or the page.

|

Collectives™ on Stack Overflow

Load page to a div jQuery Mobile

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related