All geek questions in one place

Assets loaded using AJAX-based jQuery navigation model have invalid URL

Summary:

Assets have the wrong URL when I load them using the AJAX-based jQuery-based navigation model.

Scenario:

2 websites:

  • mydomain.com → normal site (no problem here, forget about it)
  • mydomain.com/mobile → mobile site

Implementation:

All mobile pages have a clean URL, e.g. mydomain.com/mobile/page i.e. mydomain.com/mobile/home , mydomain.com/mobile/aboutus , mydomain.com/mobile/contact , ...

Thus, all mobile pages have a base URL in their "main" seccion, for example

<base href="mydomain.com/mobile/" />

so that all assets work with relative (and clean) URLs.

What works:

When accessing pages using the full URL or disabling the jQuery Mobile page navigation model ( $.mobile.ajaxEnabled = false ), everything (links, assets) works like a charm.

Problem:

When I do not turn off jQuery Mobile for page navigation, the first open mobile page works fine, but after that, whenever I follow the link on the page, the new page is loaded through Ajax and injected into the DOM, but all assets / links are relative ( and clean) URLs stop working. They have the wrong URL.

Example:

When I am mydomain.com/mobile/aboutus , "aboutus" has a logo image with a relative url logo.png (absolute will be mydomain.com/mobile/logo.png ) that displays correctly. But when I am mydomain.com/mobile/home and I click on the link to mydomain.com/mobile/aboutus , the "aboutus" page is loaded, but the logo url is changed to aboutlogo.png instead of the correct logo.png

Help: http://jquerymobile.com/test/docs/pages/docs-navmodel.html

Another key component of jQuery The model of navigation on mobile pages is the basic element that is introduced into the head and changed on each page to change so that any assets (css, images, js, etc.) that the page links to will be requested from the appropriate track. In browsers that do not support dynamic updates of the base element (for example, Firefox 3.6), jQuery Mobile goes through all the link assets on the page and prefixes their href and src attributes with the base path.

Question:

¿Am I doing it wrong? ¿That the error or I did not understand the documentation. How can I get assets downloaded via AJAX to have the correct URL?

I want to use the navigation model for jQuery mobile pages in order to have fancy transitions in 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/jquery-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>
+4
source share
2 answers

I had the same problem and I think I found a solution

i belive jQuery Mobile messes with base url, I found some old documentation that talks about her strong string management system

http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-navmodel.html

If you use URLs related to your root directory (from the beginning "/"), all images load correctly.

in your case use the following code:

 <img src="/mobile/logo.png" alt=""/>

I know that it would be better to have a clean relative URL, but I don't think jquery mobile supports them right now

Hope this helps

0
source

Create a global server-side function that takes a relative asset as an argument and prints the full path to the file. In PHP, something like:

 function abso($asset){ return "http://ydomain.com/mobile/" . $asset; }

Then on the jQuery Mobile page you can write:

 <img src="<?= abso('mobile/logo.png');?>" alt=""/>

If you are using a framework, you may already have a feature for you. In CodeIgniter, this is site_url() .

0
source

Source: https://habr.com/ru/post/1344089/

More articles:


All Articles