jquery mobile displays centered grey circle on chrome

Question

I am working with a phonegap application and I want to build it with jquery mobile, my code works perfectly in IE and Firefox but shows a centered grey circle on chrome browser. I have searched alot but couldn't find an answer yet.

Here is my code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.js"></script>
<script src="jquerymobile.js"></script>
<link rel="stylesheet" href="jquerymobile.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">       </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<script src="jquerybootpag.js"></script>
</head>
<body>

<div data-role="page">
<div data-role="header">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">Home</a>  
<h1> | Smart FCPS | </h1>       
<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left" data-transition="pop"  data-position-to="window">Search</a>
</div>
<div data-role="navbar">
  <ul>
    <li><a data-icon="home" name="Sports" onclick=LoadMCQs(this)>Sports</a>  </li>
    <li><a data-icon="arrow-r" name="Movies" onclick=LoadMCQs(this)>Movies</a></li>
    <li><a data-icon="arrow-l"  name="Music" onclick=LoadMCQs(this)>Music</a></li>      
  </ul>
</div>
<div id="content" data-role="main" class="ui-content">    
<p>Welcome</p>
<p>Please Select.</p>

<div data-role="popup" id="myPopup" data-overlay-theme="b">
<a id="close" href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>       
  <div data-role="header">
    <h1>Search</h1>
  </div>

  <div data-role="main" class="ui-content">
    <input id=search type=search placeholder="search here" />
        <select id="catagory">
        <option value=Sports>Sports</option>
        <option value=Movies>Movies</option>
        <option value=Music>Music</option>
        </select>
      <a class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left " onclick=Search()>Search</a>
  </div>

</div>

</div>

<div data-role="footer">
<div id="page-selection" style="text-align:center; display:none;">      
</div>
</div>
</body>
</html>

Can you please share jquerybootpag.js file code... I have try with your code it give me "LoadMCQs" undefined error — Mitul, Oct 13 '15 at 04:13
LoadMCQs is my own method sorry i forgot to add here, but I am shown nothing except a grey circle in center.. do you see Front End in chrome? — Saddam Ranjhani, Nov 01 '15 at 16:40

score 1 · Answer 1 · edited May 23 '17 at 10:27

Are you displaying your page directly from a file:/// URL? If so, you can see in Chrome console this security warning:

Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///C:/temp/temp.html' cannot be created in a document with origin 'null'.

Which is relative to a recent security policy change in Chrome. To solve your problem and to debug locally your website you have to use a local HTTP web server. My suggestions (under Windows):

use Python: open a command prompt, cd to you folder and call python.exe -m SimpleHTTPServer 8080
Mongoose web server (altough in my opinion does not work well with JQM)

Edit: it seems that you can fix this issue also adding a script (tested, worked for me)

jquery mobile displays centered grey circle on chrome

1 Answers1