Search code examples
jquerycordovajquery-mobilemobile-application

jQuery mobile styles are not getting applied over dynamically loaded content

I have jQuery mobile app in which when users successfully logs in I have to show multi-page template content loaded through Ajax and json parsing dynamically. So there are two problems

1.Is these approach correct call ajax on document ready function for dynamic content generation.

2.when the content is getting generated dynamically jQuery mobile Styles are not coming over it.

Here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://jquerymobile.com/demos/1.3.0-beta.1/css/themes/default/jquery.mobile-1.3.0-beta.1.css" />
<script src="cordova-2.4.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).ready(function() {
        $
                .ajax({
                    url : "demourl.com",
                    type : "GET",
                    success : function(data) {
                        var msgData = $.parseJSON(data);                

                            $("<div data-role='page'>").appendTo("#pageData")
                                    .trigger("create");
                            $("<div data-role='header'>").appendTo("#pageData")
                                    .trigger("create");
                            $("<h1>Page Title</h1>").appendTo("#pageData")
                                    .trigger("create");
                            $("<div>").appendTo("#pageData").trigger("create");
                            $("<div>").appendTo("#pageData").trigger("create");                     

                    }
                });

    });
</script>
<title>Message list</title>
</head>
<body>

    <div id="pageData"></div>
</body>
</html>
Solution

  • Unfortunately this is not going to work.

    jQuery Mobile requires at least one predefined page to work correctly.

    No matter are you using trigger('create') or trigger('pagecreate') to enhance new page markup, those functions will fail without unless there's at least one regular jQM page.

    But you can cheat, instead of letting jQM enhancing your first dynamic page you do it yourself: http://jsfiddle.net/Gajotres/smsnP/

    $(document).ready(function() {
    $('<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">First Page</h3></div></div>').appendTo("body");
});