5

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);
});
Ry-
  • 218,210
  • 55
  • 464
  • 476
user2522201
  • 75
  • 1
  • 3
  • 12

4 Answers4

11

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:

  1. Why I have to put all the script to index.html in jquery mobile (or in this blog article)

  2. Link fails to work unless refreshing

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

The basic solutions to this problem are:

  1. Put all of your JavaScript into a first HTML/ASP file
  2. 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.
  3. 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.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
3

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);
});
Reinstate Monica Cellio
  • 25,975
  • 6
  • 51
  • 67
  • 2
    `pageinit` might be a better event to bind to, at least in terms of user experience. – Evan Davis Jul 01 '13 at 13:15
  • 1
    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. – Reinstate Monica Cellio Jul 01 '13 at 13:16
  • In either case, the gist of your answer seems right; OP needs to hook into the jQm event system. – Evan Davis Jul 01 '13 at 13:17
  • 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 – user2522201 Jul 01 '13 at 15:15
  • 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. – Reinstate Monica Cellio Jul 01 '13 at 15:17
  • this's my page:

    Header

    Content
     – user2522201 Jul 01 '13 at 15:18
  • 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 – user2522201 Jul 04 '13 at 20:12
  • @user2522201 What version of Android are you running on the emulator? Earlier versions of the browser were pretty poor when it comes to javascript. – Reinstate Monica Cellio Jul 05 '13 at 10:47
  • 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 Jul 08 '13 at 09:35
1

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);
});
Manoj Yadav
  • 6,560
  • 1
  • 23
  • 21
  • Code updated, use `pageinit` with `body` or page wrapper `id` / `class` – Manoj Yadav Jul 01 '13 at 16:08
  • 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. – user2522201 Jul 08 '13 at 09:36
  • 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() {` – Manoj Yadav Jul 09 '13 at 06:24
  • 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 Jul 09 '13 at 16:11
  • Here is the code of the page that passes the url parameter: " alt="" width="39" height="39" align="left" />"><%=(rs_news.Fields.Item("headline").Value)%> – user2522201 Jul 09 '13 at 16:21
0

seems like nothing ever worked for me. Tried many different fixes, but i made the site too messy, that even position of certain javascript files wouldn't make the site work. Enough talk, here is what i came up with. // write it in head at 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>
MAtt
  • 1