Input text not rendering with Windows Phone 8.1

Input text not rendering with Windows Phone 8.1

Hi.

I am currently developing a hybrid Cordova app that is using jQuery Mobile for UI. Right now, I have an issue with jQuery Mobile that it does not behave correctly on Windows Phone 8.1. Mine version of JQM is 1.4.5 and I am using jQuery 2.1.3. If I include the reference to the jquery.mobile-1.4.5.js, then the input text would not be rendered at all. Without loading the mobile script, the app loads the input field correctly. The app is working correctly on both Android and iOS, and per the support page, JQM 1.4.5 is supported for Windows Phone 8 and 8.1 is basically having more supports than 8 so I assumed it should work correctly.

I do not know what I did wrong but the problem seems like from JQM. I've included my code below.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>TestCordovaApp</title>

  7.     <!-- TestCordovaApp references -->
  8.     <link href="css/index.css" rel="stylesheet" />
  9.     <link rel="stylesheet" href="Content/jquery.mobile-1.4.5.css" />
  10.     <!-- jQuery references -->
  11.     <script src="scripts/jquery-2.1.3.min.js"></script>
  12.     <!--<script src="scripts/jquery.mobile-1.4.5.js"></script>-->  <!--This causes the issue-->
  13. </head>
  14. <body>        
  15.     <div data-role="page" id="loginPage" data-theme="b" data-corners="false">
  16.         <div data-role="header"><h1>Asset Tracking Login</h1></div>
  17.         <div data-role="content" class="ui-content">
  18.             <input type="text" name="loginId" id="loginId" value="">
  19.             
  20.             <a class="ui-btn" id="loginButton" onclick="" data-corners="false">Log in</a>
  21.             
  22.             <div data-role="popup" id="dialog" class="ui-content" data-corners="false">
  23.                 <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
  24.                 <div id="dialogContent"></div>
  25.             </div>
  26.         </div>       
  27.     </div>-->
  28.     <!-- Cordova reference, this is added to your app when it's built. -->
  29.     <script src="cordova.js"></script>
  30.     <script src="scripts/platformOverrides.js"></script>

  32.     <script src="scripts/index.js"></script>
  33. </body>
  34. </html>

Thanks.