title: JQuery Mobile + PhoneGap for Android - Error loading index.html
body: <p>I am trying to get a basic <strong>PhoneGap + JQuery Mobile</strong> program running for <strong>Android platform 2.2</strong>, but I am getting an Application Error "The Connection to the server was unsuccessful (file:///android_asset/www/index.html)" in the Android Emulator when I try to run the application in Android Emulator platform 2.2 on <strong>Windows XP</strong>, with <strong>Eclipse 3.7</strong>. </p>
  
  <p>The file loads if I remove all references and syntax of JQuery Mobile from the HTML file, so I am certain that my project is fine but there's something I am missing with initialization of JQuery Mobile. I am using <strong>PhoneGap 0.9.6</strong> with <strong>JQuery Mobile version *<em>1.0b1</em>*</strong> with <strong>JQuery version 1.6.1</strong> (I also tried with JQM Version 1.0a2 with JQuery 1.4.4 but with the same error).</p>
  
  <p>If I remove all references to JQuery Mobile from my HTML file then I am able to load the program in the emulator without errors. </p>
  
  <p>I looked at several examples on the web and tried them as they are, but all of them show the same error. My files are as:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=320; user-scalable=no" /&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;PhoneGap With JQM&lt;/title&gt;
        &lt;link rel="stylesheet" href="jquery.mobile-1.0b1.min.css" type="text/css" charset="utf-8" /&gt;
          &lt;script src="jquery-1.6.1.min.js"&gt;&lt;/script&gt;
            &lt;script type="text/javascript" charset="utf-8" src="phonegap.0.9.6.js"&gt;&lt;/script&gt;
            &lt;script type="text/javascript" charset="utf-8" src="main.js"&gt;&lt;/script&gt;  
            &lt;script src="jquery.mobile-1.0b1.min.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body onload="init();"&gt;
      &lt;div data-role="page" data-theme="e"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;PhoneGap with JQM&lt;/h1&gt; 
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;h1&gt;My Content&lt;/h1&gt;  
          &lt;/div&gt;
          &lt;div data-role="footer"&gt;
              &lt;h1&gt;My Footer&lt;/h1&gt;  
          &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The main.js file has only:</p>
  
  <pre><code>function init()
  {   
      document.addEventListener("deviceready", deviceInfo, true);             
  }       
  </code></pre>
  
  <p>What am I missing?</p>