Home/ Questions/Q 8893191
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T23:11:05+00:00

I’m having a strange problem with the .trigger(‘create’) method in a jqmobile app. I’m

  • 0

I’m having a strange problem with the .trigger(‘create’) method in a jqmobile app.

I’m trying to create some shared, re-used pages accross the site.

Here is my index.html;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>phonegap & jquery mobile boilerplate</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile.structure.css"/>
    <link rel="stylesheet" href="css/jquery.mobile.theme.css"/>
    <script>
        var userAgent = navigator.userAgent + '';
        if (userAgent.indexOf('iPhone') > -1) {
            document.write('<script src="js/lib/cordova-iphone.js"></sc' + 'ript>');
            var mobile_system = 'iphone';
        } else if (userAgent.indexOf('Android') > -1) {
            document.write('<script src="js/lib/cordova-android.js"></sc' + 'ript>');
            var mobile_system = 'android';
        } else {
            var mobile_system = '';
        }
    </script>
    <script src="js/lib/jquery.js"></script>
    <!-- your scripts here -->
    <script src="js/app/app.js"></script>
    <script src="js/app/bootstrap.js"></script>
    <script src="js/lib/jquery.mobile.js"></script>
    <script src="js/globals.js"></script>
    <script src="js/logged_in.js"></script>
</head>
<body>
<div data-role="page">
    <div id="headerDiv" data-role='header'><a href="index.html" data-icon="home">Home</a>

        <h1>Jubilee Distributors</h1>
        <a href="login.html" id="logged_in" data-icon="home">Login</a></div>
    <div id="navDiv"></div>
    <div data-role="content">Blah Blah
    </div>

    <div id='footerDiv' data-role="footer"></div>

</div>
</body>
</html>

Here is my shared nav.html:

<div data-role='navbar'>
    <ul>
        <li><a href="orders.html">Orders</a></li>
        <li><a href="clients.html">Clients</a></li>
        <li><a href="products.html">Products</a></li>
    </ul>
</div>

On dom ready i’m executing the following in the globals.js file:

$(document).bind("mobileinit", function () {
    jQuery.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
});

$(function () {
    $('#navDiv').load('shared/nav.html').trigger('create');
    $('#footerDiv').load('shared/footer.html').trigger("create");
});

The html loads into the div no probs, but the trigger doesn’t seem to be doing anything as in styling it.. Is there something I’m missing?

Cheers,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this, if it doesn’t work we’ll try something else:

    Put globals.js BEFORE you Jquery mobile like this:

       <script src="js/globals.js"></script>
   <script src="js/lib/jquery.mobile.js"></script>
   <script src="js/logged_in.js"></script>

    if that doesn’t work, rewrite your last function this way:

    $(function () {
    $('#navDiv').load('shared/nav.html', function(){$(this).trigger('create')});
    $('#footerDiv').load('shared/footer.html', function(){$(this).trigger('create')});
});

    That way it waits until your files are fully loaded and inserted into the DOM before jQM enhances;

    • 0