jQuery Mobile styling: delayed initialization?

StackOverflow https://stackoverflow.com/questions/23583202

Question

I'm new to this jQM stuff, as well as AJAX.

I have a site that keeps a static header and footer, and replaces #mainContent div with external .html/.php pages.

What I am finding is that when I click one of the nav-bar tabs (included in the header), and the #mainContent is replaced with another page, the jQuery Mobile-styling (of buttons, drop-down menus, etc) does not load right away.

Initially the default-style of buttons appears, then (if AJAX loads) a second later the page does a 'refresh-type blink', and the buttons are replaced with the jQM styled-versions.

Occasionally I get stuck with the AJAX 'loading circle', and the buttons retain their original style until the 'nav-bar link' is pressed again.

I know there's a perfectly good reason for this.

Research indicated that using "$(document).ready(function() { .... });" is not ideal for jQM. I replaced this in my navigation-script with "$(document).bind('pageinit', function() { .... });", which didn't really make a difference (though the navbuttons still work).

Here is my basic script initialization for my index.php

  <!DOCTYPE html>
  <head>
     <title>NoteVote</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
     <link rel="stylesheet" href="./NV_home.css">
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

     <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  </head>
  <body>

  <div data-role="page" id="noteVote"> 
     <!-- HEADER -->
     <div data-role="header" align="middle" class="header">
        <img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
        <!-- NAVBAR -->
        <div data-role="navbar" data-grid="c" id="navBar">
           <ul>
              <li><a class="ui-btn" id="coursesButton">Courses</a></li>
              <li><a class="ui-btn" id="searchButton">Search</a></li>
              <li><a class="ui-btn" id="submitButton">Submit</a></li>
              <li><a class="ui-btn" id="accountButton">Account</a></li>
           </ul>
        </div>
        <!-- /NAVBAR -->
     </div>
     <!-- /HEADER -->

     <!-- 
        This is the MAIN  This is where the contents will be replaced
     -->
     <div data-role="content" class="ui-content" id="mainContent">
        <div class="main">
        <p/>
                 content here.\
        </div>
     </div>
     <!-- /MAIN -->

     <!-- FOOTER -->
     <div data-role="footer" class="footer" id="footer">
        <?php
           require_once('../account.php'); 

           if ($account == "_")
           {
              echo "Not logged in";
           } else {
              echo "Logged in as " . $account;
           }
        ?>
     </div>
     <!-- /FOOTER -->

  </div>
  <!-- /INDEX -->
  <script src="./scripts/navScript.js"></script>
  </body>
  </html>

My navScript.js:

  $(document).bind('pageinit', function() {

      $("#coursesButton").on("click", function(e) {
          //e.preventDefault();
          //alert('courses');
          $("#mainContent").load("./pages/courses.html");
      });

      $("#searchButton").on("click", function(e) {
          //e.preventDefault();
          //alert('search');
          $("#mainContent").load("./pages/search.html");
      });

     $("#submitButton").on("click", function(e) {
          //e.preventDefault();
          //alert('submit');
          $("#mainContent").load("./pages/submit.html");
      });


      $("#accountButton").on("click", function(e) {
        //e.preventDefault();
        //alert('account');
        $("#mainContent").load("./pages/accountPage.php");
      });

  });

And then here is one of my external pages loaded. This is where the button-styling doesn't load properly... (search.html):

  <!DOCTYPE html>
  <html>
  <head>
     <title>NoteVote</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
     <link rel="stylesheet" href="./NV_home.css">
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

     <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  </head>
  <body>
     <div data-role="content" class="ui-content" id="mainContent">
        <div class="wrap">   
           <div class="main">
                 <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
                 <form method="POST" action="./search_result.php">

                    <legend><h3>Course:</h3></legend>

                    <select name="course" id="customSelect">
                       <option value="*">All</option>
                       <option value="COMM2216">COMM-2216</option>
                       <option value="COMP2121">COMP-2121</option>
                       <option value="COMP2510">COMP-2510</option>
                       <option value="COMP2526">COMP-2526</option>
                       <option value="COMP2714">COMP-2714</option>
                       <option value="COMP2721">COMP-2721</option>
                    </select>
                    </fieldset>

                    <p/>
                    <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
                       <legend><h4>Type:</h4></legend>
                       <input type="radio" name="type" value="lec" id="lec"/>
                          <label for="lec">Lecture</label>
                       <input type="radio" name="type" value="lab" id="lab">
                          <label for="lab">Lab</label>
                       <input type="radio" name="type" value="*" id="both" checked="checked">
                          <label for="both">Both</label>
                    <p/>
                    <input type="submit" value="Go">
                    </fieldset>
                 </form>
              </div>
        </div>
     </div>
  <script src="./scripts/searchGo.js"></script>
  </body>
  </html>

If you could give me a pointer as to why it takes a second to 'refresh' before the jQuery-Mobile style over-rides that of the standard HTML5, I'd greatly appreciate it.

I have a feeling it is due to the scripts/styles being loaded twice (ie in the index.php and the search.html ), but if I do not load them in each page, then the buttons do not get stylized...

Though not really affecting basic functionality, it does give the web-app the appearance of really lagging.

Cheers.

Was it helpful?

Solution

The problem is you are not initializing the content you are loading via Ajax. When you load external data dynamically, you need to manually initialize any jQuery Mobile's "widget".

All you need is to call .enhanceWithin() on $("#mainContent") after data is successfully loaded. Hence, you need to use .load()'s callback function to initialize those elements.

$(document).on('pagecreate', "#noteVote", function () {
    $("#coursesButton").on("click", function (e) {
        e.preventDefault();
        $("#mainContent").load("URL", function () {
            $(this).enhanceWithin();
        });
    });
});

Demo (1) - Code

(1) Click "Courses" or "Search" buttons

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top