JQuery Mobile & Head.js Issues

JQuery Mobile & Head.js Issues

Hi all,

I'm trying to integrate just the javascript loader portion of head.js with my JQM website.

I'm having a couple of issues:

1. On some pages, I'm seeing the script block that I'm trying to load with head.js loaded 3-4 times on the page.
2. On all pages, I'm seeing a substantial period of unstyled content (FOUT). The styling does eventually load.

Here's some sample code that illustrates each issue:

1. 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="ISO-8859-1">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  6. <title>Main Menu</title> 

  7. <!-- JQM CSS -->
  8. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

  9. <!-- Custom Theme CSS -->
  10. <link rel="stylesheet" href="themes/cayce.css" />

  11. <!-- Custom CSS -->
  12. <link rel="stylesheet" href="css/custom.css" />

  13. <script src="js/head.load.min.js"></script>
  14. <script>
  15. head.js("http://code.jquery.com/jquery-1.8.2.min.js", "js/custom.js", "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js");
  16. </script>

  17. </head>  
  18. <body>
  19. <div data-role="page" id="landing">

  20. <div data-role="header">
  21. <h1>Main Menu</h1>
  22. <div class="header-sub">
  23. <div class="logo">
  24. <a href="WebCatPageServer.exe?Landing">
  25. <img src="themes/images/logo.png" width="100" height="49" alt="Company Logo">
  26. </a>
  27. </div>
  28. </div>

  29. <!-- Search Bar-->
  30. <div class="ui-body ui-body-b">
  31. <fieldset>
  32. <form name="Search" id="searchform" method="post" action="WebCatPageServer.exe">
  33. <input name="Action" type="hidden" value="Search"/>
  34. <input name="PrevSearchText" type="hidden" value="" />
  35. <input name="Start" type="hidden" value="1" />
  36. <input name="New" type="hidden" value="YES" />
  37. <input name="Refine" type="hidden" value="NO" />
  38. <label for="search-basic"></label>
  39. <input type="search" name="Search Term" id="search-basic" placeholder="Enter Part #'s or Keywords" tabindex="1"/>
  40. </form>
  41. </fieldset>
  42. </div><!-- /Search Bar -->

  43. </div><!-- /header -->

  44. <div data-role="content">
  45. <ul data-role="listview" data-inset="true">
  46. <li><a href="SPI_TOCLink" data-theme="c">Browse Products</a></li>

  47. <!-- SPI_HTML_ShowSearchMenu -->
  48. <li><a href="SPI_SearchLink" id="SPI_CurrMenuSearch" data-prefetch>SPI_SearchMenuText</a></li>
  49. <!-- SPI_HTML_ShowSearchMenu -->
  50.     
  51. <!-- SPI_HTML_AllowKits -->
  52. <li><a href="SPI_KitsLink" data-theme="c" id="viewjobs" data-prefetch>View Jobs</a></li>
  53. <!-- SPI_HTML_AllowKits -->

  54. <!-- SPI_HTML_AllowOrderPlacement -->
  55. <li><a href="SPI_ShopingCartLink" data-theme="c" data-prefetch>Shopping Cart</a></li>
  56. <!-- SPI_HTML_AllowOrderPlacement -->

  57. <!-- SPI_HTML_AllowSales -->
  58. <li><a href="SPI_SalesLink" id="SPI_CurrMenuSales" data-prefetch>SPI_SalesMenuText</a></li>
  59. <!-- SPI_HTML_AllowSales -->

  60. <!-- SPI_HTML_ShowMyAccountMenu -->
  61. <li><a href="SPI_MyAccountLink" data-theme="c" data-prefetch>SPI_MyAccountMenuText Dashboard</a></li>
  62. <!-- SPI_HTML_ShowMyAccountMenu -->

  63. <li><a href="SPI_LogoutLink">Logout</a></li>

  64. </ul><!-- /listview -->
  65. </div><!-- /Content--> 

  66. <div data-role="footer">

  67. </div><!-- /footer -->
  68. </div><!-- /page -->
  69. </body>
  70. </html>
2.
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="ISO-8859-1">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  6. <title>Login</title> 

  7. <!-- JQM CSS -->
  8. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

  9. <!-- Custom Theme CSS -->
  10. <link rel="stylesheet" href="themes/cayce.css" />

  11. <!-- Custom CSS -->
  12. <link rel="stylesheet" href="css/custom.css" />

  13. </head>  
  14. <body>
  15. <div data-role="page" id="login">

  16. <div data-role="header">
  17. <h1>Login</h1>
  18. <div class="header-sub">
  19. <div class="logo">
  20. <a href="WebCatPageServer.exe?Landing">
  21. <img src="themes/images/logo.png" width="100" height="49" alt="Company Logo">
  22. </a>
  23. </div>
  24. </div>
  25. </div>

  26. <div data-role="content">
  27. <div class="ui-bar text-center">
  28. <p>Please enter your <strong>Username</strong> and <strong>Password</strong> below to log in to the SPI_Cname Mobile Web Store.</p>
  29. </div>

  30. <!-- SPI_HTML_UnknownLogin
  31. <div class="ui-bar ui-bar-e text-center">
  32. <br>
  33. <h2>Please Try Again</h2>
  34. <p>Either the Username or Password you entered doesn't match our records. Please try logging in again.</p>
  35. </div>
  36. <br>
  37. SPI_HTML_UnknownLogin -->

  38. <!-- SPI_HTML_ExpiredLogin
  39. <div class="ui-bar ui-bar-e text-center">
  40. <br>
  41. <h2>Please Log In Again</h2>
  42. <p>Either your session has expired or you logged in on another computer. Please log in again.</p>
  43. </div>
  44. <br>
  45. SPI_HTML_ExpiredLogin -->

  46. <!-- SPI_HTML_SessionLogout
  47. <div class="ui-bar ui-bar-e text-center">
  48. <br>
  49. <h2>You've Logged Out.</h2>
  50. <p>You have successfully logged out of SPI_Cname online.</p>
  51. </div>
  52. <br>
  53. SPI_HTML_SessionLogout -->

  54. <div class="ui-body ui-body-c">
  55. <form name="Form" method="post" action="WebCatPageServer.exe">
  56. <input name="Action" type="hidden" value="Login" class="hidden" />
  57. <input name="Request" type="hidden" value="SPI_PageRequest" />

  58. <div data-role="fieldcontain">
  59. <label for="username">Username</label>
  60. <input type="text" name="username" id="username" tabindex="1" value=""/>
  61. </div>

  62. <div data-role="fieldcontain">
  63. <label for="password">Password</label>
  64. <input type="password" name="password" id="password" tabindex="2" value=""/>
  65. </div>

  66. <div data-role="controlgroup" style="width:100%; text-align:center">
  67. <input name="loginbutton" type="submit" data-theme="b" style="width:100%;" value="Sign In" tabindex="3"/>
  68. </div>

  69. </form>
  70. </div><!-- /ui-body ui-body-c -->

  71. <br>

  72. <ul data-role="listview" data-inset="true">
  73. <!-- SPI_HTML_GuestLogin
  74. <li><a href="href="javascript:document.Form.Username.value='guest';document.Form.Password.value='guestpassword';document.Form.submit();">Guest Login</a></li>
  75. SPI_HTML_GuestLogin -->
  76. <li><a href="tel://SPI_CPNum">Call Us: SPI_CPNum</a></li>
  77. <li><a href="WebCatPageServer.exe?Account_Request" id="accountrequest">Request Online Account</a></li>
  78. </ul><!-- /listview -->

  79. </div><!-- /content -->

  80. <div data-role="footer">

  81. </div><!-- /footer -->

  82. <!-- Start headjs -->
  83. <script src="js/head.load.min.js"></script>
  84. <script>
  85. head.js("http://code.jquery.com/jquery-1.8.2.min.js", "js/custom.js", "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js", function() {
  86. $('#login').on('pageshow', function () {
  87. $(':input:visible:enabled:first').focus();
  88. });

  89. });<!-- End headjs -->
  90. </script>  
  91. </div><!-- /page -->
  92. </body>
  93. </html>
A few things to note:

1. I have ajax disabled globally.
2. I'm using a single page template (multiple pages).

Thanks!