title: load Js file in HTML
body: <p>My first PhoneGap application includes 2 HTML files. </p>
  
  <p>The first one is named <code>index.html</code> which uses <code>index.js</code>. This file will display a list item. When I click an item in that list, it brings me to <code>detail.html</code> file by this:</p>
  
  <pre><code>   $.mobile.changePage("detail.html", { transition: "slideup"}); 
  </code></pre>
  
  <p>OR</p>
  
  <pre><code>   location.href = "detail.html";
  </code></pre>
  
  <p>On the <code>detail.html</code> page, I load <code>detal.js</code>. However it did not work. I could not use functions in <code>detail.js</code>.</p>
  
  <p>Please give me your advise and there are any example ?</p>
  
  <blockquote>
    <p>
        
             Capture Photo </p>
  
  <pre><code>    &lt;link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.min.css" /&gt;
      &lt;link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" /&gt;
      &lt;link rel="stylesheet" href="css/getAbstract.min.css" /&gt;
      &lt;script src="js/jquery-1.9.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.mobile-1.3.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.ba-dotimeout.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.dst.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div data-role = "page" data-theme = "a" id = "pageContainer"&gt;
          &lt;!--Start Page Header --&gt;
          &lt;div data-role = "header" id = "pageHeader" data-nobackbtn = "true" data-position = "fixed"&gt;
              &lt;h1&gt;Camera&lt;/h1&gt;
          &lt;/div&gt;
          &lt;!--End Page Header --&gt;
  
          &lt;!--Start Page Content--&gt;
          &lt;div data-role = "content" id= "pageContent"&gt;
              &lt;a data-role = "button" id = "btnCaptureEdit" href = ""&gt;Capture Edit&lt;/a&gt;
              &lt;a data-role = "button" id = "btnLibraryPhoto" href = ""&gt;Get Photo From Library&lt;/a&gt;
              &lt;a data-role = "button" id = "btnAlbumPhoto" href = ""&gt;Get Photo From Album&lt;/a&gt;
          &lt;/div&gt;
          &lt;!--End Page Content--&gt;
  
          &lt;!--Start Page Footer--&gt;
          &lt;div data-role = "footer" id = "pageFooter"&gt;
          &lt;/div&gt;
          &lt;!--End Page Footer--&gt;
  
      &lt;/div&gt;
      &lt;script src="js/detail.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  </blockquote>