Incorporating External Html into a jQuery Mobile page

Question

I am attempting to dynamically incorporate an external source of html into a jQuery mobile page. I am able to successfully incorporate the external html but it looks like regular HTML (i.e. not jQuery mobile affected Html). Can any one suggest what I might be doing wrong?

Main Html:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://jqueryui.com/ui/jquery-1.7.1.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#main").load('externalHtml.html');
            //$("#main").append('externalHtml.html');
            //$("#main").load('externalHtml.html #contain');
            //$("#main").page();
        });
    </script>
</head>

<body>
    <div data-role="content">
        <div id="main"></div>Main Page</div>
</body>

externalHtml.html:

<html>
<head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
                <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://jqueryui.com/ui/jquery-1.7.1.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
 </head>
<body>
external html
<div data-role="content" id="contain">
<input  type="search" name="name" id="name" value="" />
 </div>
      </body>
      </html>

Jasper · Accepted Answer · 2013-04-04T15:27:33.937

If you .trigger('create') on the container element, jQuery Mobile will automatically initialize any widget within the container. For example:

$("#main").load('externalHtml.html').trigger('create');

They really should document this better, but if you look at the API events for each type of widget, you will see the documentation regarding the create event.

Also, read the top of this page of the documentation: http://jquerymobile.com/demos/1.1.1/docs/api/events.html

You should not be using document.ready and instead should be binding to the pageinit event for pseudo-pages. Using document.ready will most likely create headaches for you in the future.

-- UPDATE --

You will probably want to call .trigger('create') in a callback so the external HTML has loaded before you attempt to initialize it:

$("#main").load('externalHtml.html', function () {
    $(this).trigger('create');
});

@Magico You can use `window.location.hash = 'some-hash';` to update the URL, or in modern browsers you can use the pushState API to update the URL beyond the hash. — Jasper, Jun 10 '13 at 14:53

Incorporating External Html into a jQuery Mobile page

1 Answers1