Incorporating External Html into a jQuery Mobile page

html jquery-mobile load external inject

10,751

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

10,751

Author by

Ben Pearce

I'm a freelance programmer located in San Francisco. I specialize in full lifecycle development of apps leveraging web services.

Updated on June 04, 2022

Comments

Ben Pearce about 2 years

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>