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

Question

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.

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

Thanks for the help.I tried with the three solutions, it is working great. — raduns, Jul 11 '13 at 10:41
quite good explanation, thanks. I only remembered that JQM moves all html-pages to one single before running, this is why he needed to declare the js-file on first page. but your explanation is best :) — dotchuZ, Jul 11 '13 at 11:19

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

1 Answers1

How jQuery Mobile handles page changes

Solutions:

More informations