Home/ Questions/Q 8331483
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T02:25:44+00:00

I am attempting to dynamically incorporate an external source of html into a jQuery

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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