Geek Answers Handbook

JavaScript in jQuery mobile does not work unless I update

I have a jQuery mobile page with JavaScript inside. The problem is that JavaScript does not work if the page does not refresh. Here is my code:

jQuery(function($) { var url = window.location.search.substring(1); $('#mydiv').load('real_news.asp?' + url); });
+7
source share
5 answers

To understand this problem, you need to understand how jQuery Mobile works.

Your first problem is where you are trying to initialize JavaScript. From your previous answers, I see that you are using multiple HTML / ASP pages, and all of your javascript is initialized on the <head> page. This is the main problem. Only the first HTML file must contain JavaScript placed in the <head> content. When jQuery Mobile loads other pages in the DOM, it only loads the <div> with the data-role="page" attribute. Everything else, including <head> , will be discarded.

This is because the currently loaded page already has <head> . It makes no sense to load other <head> pages. This is even more. If you have several pages in the second HTML file, only the first will be loaded.

I will not try to invent warm water here, so there are links to my other answers that discuss this issue. There you can find several solutions:

There is more than enough information to give you an idea of ​​what to do.

The main solutions to this problem are:

  • Put all your JavaScript in the first HTML / ASP file
  • Move JavaScript to <body> ; more precisely, move it to the <div> using data-role="page" . As I pointed out, this is the only part of the page that will be loaded.
  • Use rel="external" when switching between pages, because this will cause a full page to refresh. Basically, you are jQuery mobile that the page will act like a regular web application.

As Archer pointed out, you should use page events to initialize your code. But let me tell you more about this issue. Unlike regular regular web pages, when working with jQuery Mobile, the finished document usually starts before the page is fully loaded / reinforced inside the DOM.

This is why page events were created. There are several of them, but if you want your code to be executed only once (for example, if the document is ready), you should use the pageinit event. In any other case, use pagebeforeshow or pageshow .

If you want to learn more about page events and why they should be used instead of a finished document, look at this article in my personal blog. Or find here .

+10
source

Your question is not full of pointers and tips, so I'm going to what immediately arose when I saw it.

The finished document does not work when changing the page using jQuery Mobile because of the "hijack", their method of "ajaxifying" all the links. Try this instead ...

 $(document).on("pageshow", function() { var url = window.location.search.substring(1); $('#mydiv').load('real_news.asp?' + url); });
+3
source

Try pageinit like this

 $(document).delegate("body", "pageinit", function() { // Use body or page wrapper id / class var url = window.location.search.substring(1); $('#mydiv').load('real_news.asp?' + url); });
+1
source

it seems like nothing ever worked for me. I tried many different fixes, but I made the site too dirty that even the position of some javascript files would not make the site work. Just talk, that's what I came up with. // write it at the top of all javascripts

 <script type="text/javascript"> $(document).ready(function() { // stops ajax load thereby refreshing page $("a,button,form").attr('data-ajax', 'false'); // encourages ajax load, hinders refresh page (in case if you want popup or dialogs to work.) $("a[data-rel],a[data-dialog],a[data-transition]").attr('data-ajax', 'true'); }); </script>
0
source

All java script code is placed in:

 $(window).on("load", function() { ........ ........ });

With jQuery, you use $ (document) .ready () to do something when loading the DOM and $ (window) .on ("load", handler) to do something when all other things are also loaded.

0
source

More articles:


All Articles