Geek asks and answers

Application Displays Unstyled Html Before Processing It With JQuery Mobile

I am dynamically adding markup to my application with the sample code below.

$(document).bind("pagechange", function (event, ui) {
  var header = '<h3>' + appNames[i] + '</h3>';

        var ulHeader = '<ul data-role="listview" id="myAppsGridTable" data-inset="true">';

..
   $('.myBodyContent', ui.toPage).append(collapse + header + ulHeader + entire_list + '</ul>' + '</div>');
    $('#NicksPage').trigger('create');

});

I have a link to this page on my Default.aspx page and a link to jquery mobile on the main page. When you switch to "Default", the user sees the raw HTML code added to the page, then flickers and jquery mobile styles appear. Is there a way to get rid of the display of uninstalled html that the user sees before adding jquery mobile styles?

Here is a copy of my homepage:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="UserMobile.master.cs" Inherits="User.Mobile.UserMobile" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="Css/jquery.mobile.custom.structure.min.css" rel="stylesheet" type="text/css" />
    <link href="Css/jquery.mobile.custom.theme.min.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

<body>

<div data-role="page" data-theme="b" id="NicksPage">

    <div data-role="header" data-position="fixed" data-theme="b">

         <asp:ContentPlaceHolder ID="TopHeaderContent" runat="server"></asp:ContentPlaceHolder>


    </div><!-- /header -->

    <div data-role="content" class="myBodyContent"> 

 <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>

    </div><!-- /content -->

    <div data-role="footer" data-position="fixed" data-theme="b">
    <asp:ContentPlaceHolder ID="FooterContent" runat="server"></asp:ContentPlaceHolder>


    <input type="hidden" id="collapse_value" value="false" />
    </div><!-- /footer -->

</div><!-- /page -->

   //Combined jquery 1.8 and jquery mobile files in one
   <script src="Js/JQ_JQM_combined.js" type="text/javascript"></script>

    //Makes ajax calls to get data
    <script src="Js/UserMobile.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            // disable page transitions
            $.mobile.ajaxEnabled = false;
            $.mobile.defaultPageTransition = 'none';
        });

    </script>
     <asp:ContentPlaceHolder ID="ScriptContent" runat="server"></asp:ContentPlaceHolder>

</body>

</html>

Even on the home page there is a problem with flickering, where it is visualized, and then after a certain period of time, correctly designed for jquery mobile ..

<%@ Page Title="" Language="C#" MasterPageFile="~/Mobile/UserMobile.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="User.Mobile.Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TopHeaderContent" runat="server">
    <h1>
        Applications</h1>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div data-role="controlgroup">
<a href="MyStuff.aspx?name=nick&id=1234" data-role="button">My Stuff</a>
<a href="Employees.aspx?name=nick&id=1234" data-role="button">Employees</a>
<a href="list.aspx?name=nick&id=1234" data-role="button">List</a>

</div>


</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="FooterContent" runat="server">
    <div class="lines">
        <div class="footerCopyrightContainer">
            <div class="footerCopyright">
                &copy;2012 NICK ALL RIGHTS RESERVED.</div>
        </div>
    </div>
</asp:Content>

, , . " , , , , . , , - ?

$(document).bind("pagecreate", function (event, ui) {

    //gets params needed from querystring
    arrQrStr = getQueryStringParams();
    name = arrQrStr["name"];
    id = arrQrStr["id"];

});


$(document).delegate('div[data-role=page]', 'pagebeforeshow', function (e, data) {

    var employees = null;

    //returns string of html needed
    employees = getData(name, id);

    $('.myBodyContent', this).html(employees);

    $(this).trigger('create');

});

getData ajax call..

 $.ajax({
        type: "POST",
        url: "MobileService.svc/REST/GetData",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ id: id}),
        dataType: "json",
        async: false,
        success: function (msg) {

- :

  <script type="text/javascript">
      $(document).ready(function () {


          // disable page transitions
          $.mobile.ajaxEnabled = false;
          $.mobile.defaultPageTransition = 'none';



      });


    </script>

, , , . script out ajax jquery, ( , )

+5
3

, , ajax.

, , JQM JQM, (data-role="page") ( multipage), ( JQM), DOM . JQM , JQM ( 't - ). - . , , , - , id ( ids), class.

ajax enabled false, , , , JQM , , , DOM, .

page transistions are only available if ajax is set to true`.

, , , ajax enabled true, . ajax enabled, false, jQuery , DOM.

, , , html, ,

CSS

.displayNone { display: none; }

HTML

 <div data-role="content" class="myBodyContent displayNone"> 
      <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
    </div>

JS

 $('.myBodyContent', this).html(employees);
    $(this).trigger('create');
    $('.myBodyContent', this).reomveClass('displayNone');
+1

jQuery , .

, html.

+1

pagebeforeshow pagechange. :

$(document).delegate('div[data-role=page]', 'pagebeforeshow', function(e, data){
    var toPage = this; // this references the page that is about to be shown
    // Add items to the page
});

pagebeforeshow "toPage", . .

, !

Here is a JSFiddle with a suggested fix.

0
source

More articles:


All Articles