CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
Christian
Christian

Reputation: 1586

jQuery mobile - Splitting up pages to different files

I am developing a web app based on jQuery and jQuery mobile. I want to show different pages, but since the corresponding html-markup might become quite large I would like to split up the html into different files, i.e.:

<html>
    <head>
        <meta charset="utf-8" />            
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />            
        <title>Hello World</title>
    </head>
    <body>
        <div data-role="page" id="page1">
          <!-- import markup for page1 here -->
        </div>

        <div data-role="page" id="page2">
          <!-- import markup for page2 here -->
        </div>

        <script src="js/libs/jquery-2.1.1.min.js"></script>
        <script src="js/libs/jquery.mobile-1.4.3.min.js"></script>
    </body>
</html>

What can I do to import my markup where it says <!-- import markup for page<x> -->? Is there any way to achieve that?

I tried using <script>$("#page1").load("page1.html");</script> but this messes the entire page up! Since the web app should be packed as a native app for smartphones later php is not an option.

Upvotes: 2

Views: 1684

Answers (1)

Christian
Christian

Reputation: 1586

Thanks to Omar's comments above and his answer to this question I was able to come up with a working solution.

1.) Add external pages to the DOM by using $.mobile.pageContainer.pagecontainer("load", "<externalResName>.html");

2.) Navigate to the newly loaded page by adding a listener to the document (i.e. $(document).on( "pagecontainerload", function( event, ui ) { //... } );)

3.) Make sure that the external ressource stays in the DOM by adding data-dom-cache="true" to the page's div-tag.

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />        
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
        <title>Hello jqm</title>
    </head>
    <body>  
      <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

      <script> 
        $(document).ready(function(){   
          $(document).on( "pagecontainerload", function( event, ui ) {
            console.log('navigating to page1...');
            $.mobile.pageContainer.pagecontainer("change", "#page1");
            console.log('navigating done!');          
          } );

          console.log('loading pagecontainers...');
          $.mobile.pageContainer.pagecontainer("load", "page1.html");
          $.mobile.pageContainer.pagecontainer("load", "page2.html");
          console.log('pagecontainer-load done!');
        });
      </script>    
    </body>
</html>

page1.html

<div data-role="page" id="page1" data-dom-cache="true">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
  </div>
</div>

page2.html

<div data-role="page" id="page2" data-dom-cache="true">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
  </div>
</div>

Upvotes: 2

Related Questions