$.mobile.changepage not loading external .JS file

$.mobile.changepage not loading external .JS file

I am having a weird problem when trying to load an external JS file in a page which is loaded using $.mobile.changepage().

Following is my directory structure: 
|_ /html 
| |_ conflist.html 
| |_ newpage.html 
|_ /common 
| |_ jquery-1.7.2.min.js 
| |_ jquery.mobile-1.2.0.min.js 
| |_ jquery.mobile-1.2.0.min.css 
|_ /platform 
 |_ dummy.js










Here are the codes for conflist.html and newpage.html.

First, conflist.html:
  1.     <!DOCTYPE HTML>
        <html>
        <head>
            <title>ConferenceToGo</title>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <link rel="stylesheet" href="../common/jquery.mobile-1.2.0.min.css" />
            <script type="text/javascript" charset="utf-8" src="../common/jquery-1.7.2.min.js"></script>
            <script type="text/javascript" charset="utf-8" src="../common/jquery.mobile-1.2.0.min.js"></script>
            <script type="text/javascript" charset="utf-8">
                function changePage() {
                    $.mobile.changePage("newpage.html", { transition: "slide" });
                }
            </script>
        </head>
        <body>
        <div id="firstpage" data-role="page">
            <div data-role="content">
                <input type="button" onclick="changePage()" value="Change Page (JQM)" /><br />
            </div><!-- /content -->
       
        </div><!-- /page -->
       
        </body>
        </html>
























Next, newpage.html:
  1.     <!DOCTYPE HTML>
        <html>
        <head>
            <title>ConferenceToGo</title>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <link rel="stylesheet" href="../common/jquery.mobile-1.2.0.min.css" />
            <script type="text/javascript" charset="utf-8" src="../common/jquery-1.7.2.min.js"></script>
            <script type="text/javascript" charset="utf-8" src="../common/jquery.mobile-1.2.0.min.js"></script>
        </head>
        <body>
        <div id="newpage" data-role="page">
            <script type="text/javascript" charset="utf-8" src="../platform/dummy.js"></script>
            <script type="text/javascript" charset="utf-8">
                console.log("Inside test_newpage.html");
                var objDummy = new Dummy();
                objDummy.toString("test param");
            </script>
            <div data-role="content">
                <p>This is a new page !!</p>
            </div><!-- /content -->
       
        </div><!-- /page -->
       
        </body>
        </html>



























Finally, dummy.js:
  1. var Dummy = function () { };
    Dummy.prototype.toString = function (param) {
     console.log("String representation of 'Dummy', got param: " + param);
    };

    console.log("Loaded dummy.js");






Problem:
- If I load conflist.html (directly, using FF16.0.2 or IE9, not through a webserver), and click the button to load newpage.html using changePage(), I get an error saying: "ReferenceError: Dummy is not defined". Essentially, dummy.js is not read.
- If I move dummy.js to the same folder as the html files, and modify the path accordingly in newpage.html, things work fine and I get all the outputs.

Wondering, why do I see this behavior? Why isn't the external js file loaded when it is placed in another folder and the relative path is given? Or am I missing something else?