All geek questions in one place

JQuery Mobile page loses JavaScript file

Hi guys, I have a real problem with jQuery Mobile, I tried to fix it, but I failed :-( I have Navigation to view my application, and if I click on the link associated with a site that has a .js file to execute some functions, the .js file will be lost. If I look at firebug, I don’t see my specified "get-marker-id.js" in my code section. If I refresh the page, the .js file will appear, and everything is fine, all functions were found and work perfectly.

As a workaround, I figured out that to provide -Tag navigation, the rel=external attribute solves this problem because the site is loading completely and not from an ajax call.

Now I want to know if I can solve the problem with the best workaround? Because if I use "rel=external" , mobile Safari opens a new tab if I saved the page on my desktop, and this is what my clients do not want = (. I am very grateful for the help :-)

+4
source share
3 answers

If we start from the fact that we start with a simple, single page template from jquery mobile, there is a key bit of information that is omitted. If you want to have globally accessible functions and variables and be able to change the default values ​​for the framework, you need to add your custom script between jquery.js and jquerymobile.js, as shown in their global configuration pages .

 <head> ... <script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script> ... </head>

When you go from one page to another with integrated ajax-based navigation, everything in custom-scripting.js will still be available to you and can even be used to manage pages as they become available.

If, however, you place the script inside your <div data-role="page"> , you will only have access to execution as long as this page is in place. When you go to another page, that original page will be removed from the DOM and therefore your script. Therefore, you need to either call your script on each page, or put it in a custom script.js. Using a global script would be a much more efficient option, as HTTP requests on mobile devices are the cause of most of the slowdowns.

+3
source

If you link to a .js file, it is outside the jquery-mobile role page element on the page you are loading, it will not be analyzed at all when the page is loaded via ajax. I'm not sure about the links inside the role-page element, but I know that inline scripts get parsed. Try moving the script inside the page element.

+2
source

I see 2 things here and can't decide which is better for a mobile application?

1) Put your custom.js between jquery and jquerymobile in the head.html section.

  • Thus, you will have one larger .js file with the whole page trigger (pageshow, pageinit ..) inside, and this file will be downloaded only once (fewer HTTP requests)

  • THE PROBLEM THERE IS: when you click the reload button of browsers in the middle of your application on any page, dynamic things like ajax etc. that are in your custom.js will not load. Result: blank page. (the same applies to bookmarks per page in one jqm application per page)

2) Including a special encoding page - on each JQM page in a single page template in the data-role = page div section.

  • I assume that now, when the proxy button is reloaded, the code also reloads (there), but again, more pages.

My question is: how to find a solution, as in 1), but then again support reloading the page

0
source

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

More articles:


All Articles