Function only runs after page refresh

Question

I have JavaScript embedded in my jQuery mobile page, and the problem is the JavaScript doesn't work unless you refresh the page.

Any solution on how to make this work once the page loads?

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.3.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body,td,th {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #000;
}
</style>
<link href="../jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css" />
<link href="../jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="../jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>

<html>
<head>
</head>
<body>

<script language="javascript" type="text/javascript">


     $(document).ready(function(){
                //JQuery code for getting current URL
                var URL = $(location).attr('href');
      $('#mydiv').load('real_news.asp?'+URL);

});

</script>

<div data-role="page" id="try">
  <div data-role="header">
    <h1>Header</h1>
  </div>
  <div id="mydiv" data-role="content"></div>
</div>
</body>
</html>

</head>

<body>

</body>
</html>

Please use proper capitalization in the title (and in your question). Thank you! Also explain what exactly "does not work". What happens and what do you expect to happen? — Felix Kling, Jul 02 '13 at 15:36
Have you tried putting the script inside the `` node? Also, you can use the abbreviated version: `$(function() { // jquery code here });`, instead of `$(document).ready(function() { // jquery code here });`. — DevlshOne, Jul 02 '13 at 15:37
Yeah, you need to put it in the head. The way I understand it, the head will only run once the scripts have been loaded. But if you have it in the body, it will run immediately. Do you get a javascript error the first time you load the page? — Dan Grahn, Jul 02 '13 at 15:39
Your HTML has *WAY* too many ``, ``, and `` tags. You might wanna fix that. It should look like: ``. — gen_Eric, Jul 02 '13 at 15:39
@screenmutt - That is not the case. I generally put all my script like this at the bottom of the page without issue. — webnoob, Jul 02 '13 at 15:41
Really? I would still be interested to see if it works. Come to think about his code. It may be the jQuery things the DOM is ready once the first set of tags finishes. — Dan Grahn, Jul 02 '13 at 15:42
what i mean is i have a javascript code on my page that can only run when you refresh the page — user2522201, Jul 02 '13 at 15:42
@screenmutt: That's not quite true. Script tags will run one by one, as they are parsed, no matter where they are. They will pause execution, however, if they need to download an external file. — gen_Eric, Jul 02 '13 at 15:42
@user2522201: I'm surprised this page loads at all with how badly invalid the HTML is. — gen_Eric, Jul 02 '13 at 15:44
@webnoob Yeah, I'm wrong. [Here's the proof](http://stackoverflow.com/a/8996894/1669208). Don't know why I had that backwards. — Dan Grahn, Jul 02 '13 at 15:44
P.S.: You can (and should) use `location.href` compared to `$(location).attr('href')`. — gen_Eric, Jul 02 '13 at 15:52

score 3 · Accepted Answer · answered Jul 02 '13 at 15:50

Your HTML is invalid. You have way too many <html>, <head>, and <body> tags.

Try to create a valid HTML file, and see if that makes your scripts work properly. Also, try putting your scripts in your <head> tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.3.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <style type="text/css">
            body,td,th {
                font-family: Tahoma, Geneva, sans-serif;
                font-size: 12px;
                color: #000;
            }
        </style>
        <link href="../jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css" />
        <link href="../jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css" />
        <script src="../jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
        <script src="../jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                //JQuery code for getting current URL
                var URL = $(location).attr('href');
                $('#mydiv').load('real_news.asp?'+URL);
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="try">
            <div data-role="header">
                <h1>Header</h1>
            </div>
            <div id="mydiv" data-role="content"></div>
        </div>
    </body>
</html>

i've copied and pasted and till i have to refresh the browse before the page will load — user2522201, Jul 02 '13 at 15:57
That's odd. Do you see any errors in your console? Have you tried clearing your cache, maybe that's causing an error? I don't know what else to tell you. — gen_Eric, Jul 02 '13 at 16:01
i guess there might be a problem somewhere cause i've cleared the browser's cache and it's still not loading. but thanks anyway God bless u. one last question do u think it will run perfectly after compling with phonegap on android phones even though the pages fail to load in the browser? — user2522201, Jul 02 '13 at 16:11
@ rocket please do you have a Skype id so i can share my search with you so u know what i'm trying to do — user2522201, Jul 02 '13 at 16:34
@user2522201: Why not share your research with everyone here? I don't have time to personally help you, sorry. — gen_Eric, Jul 02 '13 at 16:57

Function only runs after page refresh

1 Answers1