How to load HTML files into data-role=page with jQuery Mobile and PhoneGap?

Question

I want this: load html files into data-role=page with jquery mobile and phonegap: My project have a lot of small HTML files with independent pages.

I use:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            Inicio :: Autenticacion
        </title>
        <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1">
        <link rel="stylesheet" href="jsmobile/jquery.mobile-1.2.0.min.css" type="text/css">
        <script src="jsmobile/jquery.js" type="text/javascript"></script>
        <script src="jsmobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">


$(document).ready(function() {
  $('#boton').bind('click', function(event) {
    $.mobile.loadPage("Fichero/index.html",{pageContainer:$("#container1")});

  });
});

        </script>
    </head>
    <body>
        <div data-role="page" id="container0">
            <div data-role="content">
         <a  id="boton" >Change Page</a>
            </div>
        </div>


        <div  id="container1">
        </div>

    </body>
</html>

File: Fichero/index.html

<div date-role="page" id="micro">
    <div data-role="header" >
        <h1>Test Heas</h1>
    </div><!-- /header -->
    <div data-role="content"  > 
     Test here..
    </div><!-- /content -->
    </div>

and I want load html content from Fichero/index.html in container1 when user click on Change Page link, but It doesn't works.

It load content into the DIV id="container1" and the DOM, but not showed/refresed (is like hidden).

What is the method to do a simple html file external load and the DOM be refreshed and visible the HTML code load?

Thanks in advance.

Bernhard Bernhard · Accepted Answer · 2013-01-09T00:01:56

Your html doesn't match the jquery mobile required structure and so you'll get nothing to see.

Any html which should be visible need to be inside the data-role="content" div, inside a data-role="page" div

If you just want to load the external html just do an ajax call (But I think the correct jQuery mobile way is better in view of transitions. Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Inicio :: Autenticacion </title>
    <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#boton').bind('click', function(event) {
                $.get('Fichero/index.html').success(function(html) {
                    $('#container1').html(html);
                });

            });
        });

    </script>
</head>
<body>
    <div data-role="page" id="container0">
        <div data-role="content">
            <a  id="boton" >Change Page</a>

            <!--
            Place the Container here because
            jQuery Mobile data-role="page" defines a browser fullscreen page 
            (the dataroles are rules for formating a page and there can be only one visible page)
            -->
            <div  id="container1"></div>
        </div>
    </div>

</body>

How to load HTML files into data-role=page with jQuery Mobile and PhoneGap?

1 Answers