I'm trying to use jquery mobile with local file links but it's not working correctly for me. I can load the initial page fine when opening the page from finder. in the address bar i see the full file path
file://localhost/Users/me/[pathToMyApp]/www/index.html#/page1
However, when I press refresh in chrome, or simply copy page url into another window, I get the error
Error loading Ajax Page
Is there a basic step I'm missing?
Here is my page:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>
<script language="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.ajaxLinksEnabled = false;
});
</script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-resource.js"></script>
<script type="text/javascript" src="js/myApp.js"></script>
</head>
<body>
<div data-role="page">
<div ng-view></div>
<div data-role="footer" data-id="myFooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-ajax="false">link1</a></li>
<li><a href="#" data-ajax="false">link2</a></li>
<li><a href="#" data-ajax="false">link3</a></li>
</ul>
</div><!-- /navbar -->
</div>
</div>
The basic step that you're missing is serving your pages with http server.
It's intentional Chrome's behavior, which restricts ajax calls to files on filesystem.
To be able to normally and effectively develop your jQM application just install and use one of the web servers. There are plenty of them for any platform.
It's not recommended but you can force chrome to allow you this by starting it with flags
--allow-file-access-from-files --disable-web-security
Ok, after some investigation, The issue is because JQuery and AngularJS was not working well together.
AngularJS uses hash tags to delimit routes for its controller.
jQueryMobile tries to be smart about handling hashes, which totally messes up the urls.
it's working now after I patched jquery mobile with my private fix. (as in disable hash handling).. It's working now.