JavaScript in jQuery mobile not working unless I refresh

javascript jquery ajax jquery-mobile

16,450

Solution 1

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

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

This is because currently loaded page has a <head> already. No point in loading another pages <head> content. This goes even further. If you have several pages in a second HTML file, only the first one is going to be loaded.

I will not try to invent warm water here so here are links to my other 2 answers discussing this problem. Several solutions can be found there:

There's more then enough information there to give you an idea what to do.

The basic solutions to this problem are:

Put all of your JavaScript into a first HTML/ASP file
Move your JavaScript into <body>; to be more precise, move it into a <div> with data-role="page". As I already pointed out, this is the only part of a page that is going to be loaded.
Use rel="external" when switching between pages because it will trigger a full page refresh. Basically, you jQuery mobile that the page will act as a normal web application.

As Archer pointed out, you should use page events to initialize your code. But let me tell you more about this problem. Unlike classic normal web pages, when working with jQuery Mobile, document ready will usually trigger before page is fully loaded/enhanced inside the DOM.

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

If you want to find out more about page events and why they should be used instead of document ready take a look at this article on my personal blog. Or find it here.

Solution 2

Your question isn't exactly overflowing with pointers and tips, so I'm going with the thing that immediately sprung to mind when I saw it.

Document ready does not fire on page change with jQuery Mobile, due to "hijax", 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);
});

Solution 3

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);
});

16,450

user2522201

Updated on September 15, 2022

Comments

user2522201 over 1 year
I'm having a jQuery mobile page with JavaScript inside. The problem is the JavaScript doesn't work unless the page is refreshed. Here is my code:
```
jQuery(function($) {
    var url = window.location.search.substring(1);
    $('#mydiv').load('real_news.asp?' + url);
});
```
- Bergi almost 11 years
  
  Please describe "doesn't work". Also, where is this using jQuery mobile?
Mathletics almost 11 years

pageinit might be a better event to bind to, at least in terms of user experience.
Reinstate Monica Cellio almost 11 years

Yep, good point. I guess it depends on what he's trying to do. I found pageshow more suited to my needs when trying to find the equivalent to document.ready, but I agree he should try both.
Mathletics almost 11 years

In either case, the gist of your answer seems right; OP needs to hook into the jQm event system.
user2522201 almost 11 years

using this code :$(document).on("pageshow", function() { var url = window.location.search.substring(1); $('#mydiv').load('real_news.asp?' + url); doesn't even make it work when you refresh the page
Reinstate Monica Cellio almost 11 years

If the code you just posted is a copy and paste then you need to check that you've correctly terminated it with });, as you haven't done above.
user2522201 almost 11 years

this's my page:<html> <head> </head> <body> <div data-role="page" id="page"> <div data-role="header"> <h1>Header</h1> </div> <div id="mydiv" data-role="content">Content</div> </div> </body> <script language="javascript" type="text/javascript"> $(document).on("pageshow", function() { var url = window.location.search.substring(1); $('#mydiv').load('real_news.asp?' + url); }); </script> </html> </head> <body> </body> </html>
Manoj Yadav almost 11 years

Code updated, use pageinit with body or page wrapper id / class
user2522201 almost 11 years

i've now manage to make it work and it's working properly. but now the problem is the android emulator fails to run the javascript which make the page not to load
Reinstate Monica Cellio almost 11 years

@user2522201 What version of Android are you running on the emulator? Earlier versions of the browser were pretty poor when it comes to javascript.
user2522201 almost 11 years

i use the latest version of the android emulator, i even used ripple emulator to test it and it doesn't work. but when i test in all browser it does works cos the problem is the final work will be deployed on smartphones.
user2522201 almost 11 years

i used this code and it still didn't load unless i refresh it. it does works fine on the browser but not in chrome's ripple emulator and an android emulator.
Manoj Yadav almost 11 years

If you are wrapping the above code in $(document).ready(function() { then remove it from there and add it at the end of file. In jQuery Mobile $(document).ready(function() { will work on page refresh or first time page load, so don't use $(document).ready(function() {, use (document).delegate("body", "pageinit", function() {
user2522201 almost 11 years

i've used 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); });) and i still have to refresh before the details shows up. the emulator can't just recieve the passed parameter unless u refresh.
user2522201 almost 11 years

Here is the code of the page that passes the url parameter: <td bgcolor="#eaeaea"><img src="images/new_imgs/<%=(rs_news.Fields.Item("img_1").Value)‌%>" alt="" width="39" height="39" align="left" /><a href="sources/news_main.html?<%= Server.HTMLEncode(MM_keepURL) & MM_joinChar(MM_keepURL) & "news_id=" & rs_news.Fields.Item("news_id").Value %>"><%=(rs_news.Fields.Item("headline").Value)%></a></td>