4

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>
Carl Perriet
  • 41
  • 1
  • 1
  • 2
  • I have a question. Are you testing in browser? if not, did you add support.cors and allowCrossDomainPages? – Th0rndike Jun 26 '12 at 14:00

1 Answers1

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');
Th0rndike
  • 3,406
  • 3
  • 22
  • 42
  • 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. – Th0rndike Jun 26 '12 at 12:25
  • 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 Jun 26 '12 at 13:04
  • 1
    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. – Carl Perriet Jun 26 '12 at 13:47
  • What does your second page contain? using trigger('create'), trigger('refresh') or trigger('pagecreate') shoud style it for you – Th0rndike Jun 26 '12 at 13:50
  • At this point (just to test) the other page has only one button with the style of jQuery Mobile - "". None of these trigger commands update the styles .. applying the trigger to the content or the page. – Carl Perriet Jun 26 '12 at 14:02
  • You could you show how you did everything? I must have a strange error because it continues to do nothing. Thank you! – Carl Perriet Jun 26 '12 at 22:46
  • have you inspected your elements? i think the content is loading, but your loaded page is hidden – Th0rndike Jun 27 '12 at 07:34
  • @Hunt well it says "untested". Also this question/answer are quite old, so jquery mobile could have changed some things. – Th0rndike Jul 14 '14 at 12:59
  • I created example over here: http://dotku.github.io/tech/jquery-mobile/jquery.mobile.loadPage-so.html it doens't work :*( – Weijing Jay Lin Mar 16 '16 at 23:54
  • @DotKu the event binding must be wrapped inside a "pagecreate" event, it's similar to jquery's document.ready. That's a first issue... also not sure about the version you're using, this questions and answers are from 2012 and jquery mobile 1.4.5 was released in 2014 – Th0rndike Mar 17 '16 at 09:57