I have a real problem with jQuery Mobile, I've tried to fix but I've failed :-(
I have a Navigation to browse trough my app and if I click on a link which is related to a site, which has a .js file for doing some functions, the .js file is lost. If I look at firebug, I can't see my specified "get-marker-id.js" in the <head>-section of my <html>-code. If I refresh the page, the .js file appears and all is fine, all functions were found and work perfectly.
As a workaround I figuered out that to give the <a>-Tag of the Navigation an rel=external attribute solves this problem because the site is loaded pletely and not from an ajax call.
Now I want to know if I can solve the problem with an better workaround ? Because if I use the "rel=external" the mobile Safari opens a new Tab, if I had saved the Page to my homescreen and this is what my customers not want =(. I'm very thankful for help :-)
I have a real problem with jQuery Mobile, I've tried to fix but I've failed :-(
I have a Navigation to browse trough my app and if I click on a link which is related to a site, which has a .js file for doing some functions, the .js file is lost. If I look at firebug, I can't see my specified "get-marker-id.js" in the <head>-section of my <html>-code. If I refresh the page, the .js file appears and all is fine, all functions were found and work perfectly.
As a workaround I figuered out that to give the <a>-Tag of the Navigation an rel=external attribute solves this problem because the site is loaded pletely and not from an ajax call.
Now I want to know if I can solve the problem with an better workaround ? Because if I use the "rel=external" the mobile Safari opens a new Tab, if I had saved the Page to my homescreen and this is what my customers not want =(. I'm very thankful for help :-)
3 Answers
Reset to default 3If we presume that we're starting from the simple, single page template from jquery mobile, there is a key bit of information that is left out. If you want to have globally available functions and variables and be able to alter the defaults of the framework, you need to add your custom script between the jquery.js and the jquerymobile.js as show on their global configurations page.
<head>
...
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
...
</head>
As you go from one page to the next with the built in ajax based navigation, everything in the custom-scripting.js will still be available to you and can even be used to manipulate the pages as their ing in.
If, however, you place a script inside of your <div data-role="page"> you will have access to execute only so long as that page is in place. Once you navigate to another page, that initial page would be removed from the DOM and thus your script. You would therefore need to either call in your script on every page or put it into the custom-script.js. Using the global script would be a far more performant option since http requests in mobile are what cause most of the slowdowns.
If you link to the .js file is outside the jquery-mobile "role-page" element in the page your're loading, it will not be parsed at all when loading the page via ajax. I'm not sure regarding links inside the "role-page" element, but I do know that inline scripts do get parsed. Try moving the script inside the page element.
I see 2 things here and cannot decide what is better for a mobile app?
1) Putting your custom.js between jquery & jquerymobile in the head section of index.html.
This way you would have one larger .js file with all the page trigger (pageshow, pageinit..) inside and this file would only be loaded once (fewer http requests)
PROBLEM I HAVE: when you click the browsers reload button in the middle of your app on a page somewhere, dynamic things like ajax etc which are located in your custom.js will not load. Result: empty page. (the same counts for bookmarks to a page in your single page jqm app)
2) Including your custom coding page specific - on every JQM page in your single page template inside the data-role=page div.
- I presume now when reloading trough browsers button the code would also reload (it's there) but again, bigger are the pages.
My question is: How to have solution like in 1) but then again supporting the page reload
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745058530a4608819.html
评论列表（0条）