Adding scripts to the external pages in jquery mobile other than the home file

I want to add scripts to the external pages in jquery mobile other than the home file(where the source for jquery mobile is being called).Here is my code of the two files

The code inside index.php

 <head> 
        <title>My Web Application</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;"  />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link rel="stylesheet" href="view/css/mobile.css" />
        <link rel="stylesheet" href="view/css/reset.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="view/js/light.js"></script>

    </head>
    <body>

        <div data-role="page" class="page">
            <div data-role="header" id="index-header" data-theme="b">
                <div id="logo">
                    <a href="#"><img src="view/images/Milan.png" alt="logo" height="80"></a>    
                </div>
            </div>
            <div id="color-bar"></div>  
            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-theme="b">

                    <li><a href="#" title="theme"><img src="view/images/1.png" />Security</a></li>
    <li><a href="light.php" title="calendar"><img src="view/images/2.png" />Info</a></li>
    <li><a href="light.php" title="theme"><img src="view/images/3.png" />Lighting</a></li>
    <li><a href="light.php" title="calendar"><img src="view/images/4.png" />Comfort</a></li>
    <li><a href="light.php" title="theme"><img src="view/images/5.png" />Music</a></li>
    <li><a href="light.php" title="calendar"><img src="view/images/6.png" />Media</a></li>
                </ul>               
            </div><!-- /content -->
    </div><!-- /page -->
</body>

Here , onclicking on my anchor tag the page will be redirected to say light.php.In light.php i was unable to add any external scripts. If i want to use any scripts inside light.php it wants me to add it inside index.php. But i want to add my script inside light.php and make it run for light.php only.This is what the script i want to add inside light.php

<script type="text/javascript">
    var auto_refresh = setInterval(
            function ()
            {
            window.location = "index.php?page=lighting";
            }, 1000);
    </script>

And when i refresh my light.php file, the script seems to work but i want to make it work without refreshing.

Solution

How jQuery Mobile handles page changes

To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.

First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.

Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).

Solutions:

In your second page, and every other page, move your SCRIPT tag into the BODY content, like this:
Move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded.
Use rel="external" in your buttons and every elements you are using to change page. Because of it ajax is not going to be used for page loading and your jQuery Mobile app will behave like a normal web application.

More informations

More information with working examples can be found in my blog ARTICLE or even HERE.