Assets loaded using AJAX based jQuery Mobile's page navigation model have wrong URL
Summary:
Assets have wrong url when I load them using AJAX based jQuery Mobile's page navigation model.
Scenario:
2 websites:
- mydomain.com -> normal site (no problem here, forget it)
- mydomain.com/mobile -> mobile site
Implementation:
All the mobile pages have a clean URL like mydomain.com/mobile/page i.e: mydomain.com/mobile/home , mydomain.com/mobile/aboutus , mydomain.com/mobile/contact ,...
So all the mobile pages have inside their "head" seccion a base URL like
<base href="mydomain.com/mobile/" />
in order for all assets to work with relative (and clean) URLs.
What works:
When accessing pages using the full URL, or disabling jQuery Mobile's page navigation model ($.mobile.ajaxEnabled = false) everything (links,assets) works like a charm.
The problem:
When I don't disable jQuery Mobile's page navigation model, the first mobile page I open works fine, but after that, whenever I follow a link in the page, the new page is loaded via Ajax and injected into the DOM, but all the assets/links with relative (and clean) URL stop working. They have a wrong URL.
Example:
When I visit mydomain.com/mobile/aboutus the "aboutus" has a logo image with the relative url logo.png (the absolute would be mydomain.com/mobile/logo.png) that is properly displayed. But when I visit mydomain.com/mobile/home and I click a link to mydomain.com/mobile/aboutus, the "aboutus" page is loaded but the logo image url is changed to aboutlogo.png instead of the correct one logo.png
Reference: http://jquerymobile.com/test/docs/pages/docs-navmodel.html
Another key ingredient to jQuery Mobile's page navigation model is the base element, which is injected into the head and modified on every page change to ensure that any assets (css,images,js,etc) referenced on that page will be requested from a proper path. In browsers that don't support dynamic updates to the base element (such as Firefox 3.6), jQuery Mobile loops through all of the referenced assets on the page and prefixes their href and src attributes with the base path.
Question:
¿Am I doing it wrong?¿is that a bug or I missunderstood the documentation¿how can I get the assets loaded via AJAX to have the right url?.
I want to use jQuery Mobile's page navigation model in order to have the fancy transitions in the mobile browsers.
Show me the code!:
mydomain.com/mobile/home code:
<!DOCTYPE html>
<head>
<base href="http://mydomain.com/mobile/" />
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css">
<script src="http://code.jquery.com/jquer开发者_运维百科y-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.min.js"></script>
...
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">Foo</div><!--header -->
<div data-role="content">
<a href="about">About us</a>
</div><!--content -->
<div data-role="footer">Bar</div><!--footer -->
</div><!--page -->
</body>
</html>
mydomain.com/mobile/about code:
<!DOCTYPE html>
<head>
<base href="http://mydomain.com/mobile/" />
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.min.js"></script>
...
</head>
<body>
<div id="about" data-role="page">
<div data-role="header">Foo</div><!--header -->
<div data-role="content">
<img src="logo.png" alt=""/><!--broken when loaded via AJAX-->
<a href="home" data-role="button" data-rel="back">Back</a><!--broken when loaded via AJAX-->
</div><!--content -->
<div data-role="footer">Bar</div><!--footer -->
</div><!--page -->
</body>
</html>
I was having the same problem and i think i have found a solution
i belive jQuery Mobile messes with the base url, i found some old documentation that talks about its "base url management sistem"
http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-navmodel.html
If you use URLs that are relative to your root directory (with a "/" at the beginning) all the images load correctly..
in your case using the following code should work:
<img src="/mobile/logo.png" alt=""/>
i know it would be better to have clean relative URL's but i don't think jquery mobile supports them right now
Hope this helps
Create a global function on the server-side that takes a relative asset as an argument and outputs the full path to the file. In PHP, something like:
function abso($asset){
return "http://ydomain.com/mobile/" . $asset;
}
Then, in your jQuery Mobile page, you could write:
<img src="<?= abso('mobile/logo.png');?>" alt=""/>
If you happen to be using a framework, there's probably already a function for you. In CodeIgniter, it's site_url().
加载中,请稍侯......
精彩评论