CODEWITHSUNDEEP
javascriptjqueryandroidmobilecordova
Rags
Rags

Reputation: 231

JQuery Mobile + PhoneGap for Android - Error loading index.html

I am trying to get a basic PhoneGap + JQuery Mobile program running for Android platform 2.2, 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 Windows XP, with Eclipse 3.7.

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 PhoneGap 0.9.6 with JQuery Mobile version *1.0b1* with JQuery version 1.6.1 (I also tried with JQM Version 1.0a2 with JQuery 1.4.4 but with the same error).

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.

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:

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap With JQM</title>
      <link rel="stylesheet" href="jquery.mobile-1.0b1.min.css" type="text/css" charset="utf-8" />
        <script src="jquery-1.6.1.min.js"></script>
          <script type="text/javascript" charset="utf-8" src="phonegap.0.9.6.js"></script>
          <script type="text/javascript" charset="utf-8" src="main.js"></script>  
          <script src="jquery.mobile-1.0b1.min.js"></script>

  </head>
  <body onload="init();">
    <div data-role="page" data-theme="e">
        <div data-role="header">
            <h1>PhoneGap with JQM</h1> 
        </div>
        <div data-role="content">
            <h1>My Content</h1>  
        </div>
        <div data-role="footer">
            <h1>My Footer</h1>  
        </div>
  </body>
</html>

The main.js file has only:

function init()
{   
    document.addEventListener("deviceready", deviceInfo, true);             
}

What am I missing?

Upvotes: 23

Views: 13765

Answers (2)

Roy M J
Roy M J

Reputation: 6948

The above solution is for java based code. However OP is for javascript/jquery and phonegap. The following has helped me solve the issue.

In config.xml, add :

<preference name="splash-screen-duration" value="25000" /> 
<!-- Increase the value until the error is solved-->

The REAL problem here is that PhoneGap has an initial page load timeout of 20 seconds. If your page takes more than that ammount of time, you get this message. 

Application Error - The connection to the server was unsuccessful.   
(file:///android_asset/www/index.html)

Upvotes: 0

Moog
Moog

Reputation: 10193

The problem is likely due to the speed of the emulator so the network is too slow complete the communication in a timely fashion.

Set a 60 second timeout in PhoneGap by adding the following property to src/com/phonegap/xxx.java:

super.setIntegerProperty("loadUrlTimeoutValue", 60000);

References:

phonegap 0.9.3 onReceivedError: Error code=-6 Description=The connection to the server was unsuccessful

http://The%20connection%20To%20The%20Server%20Was%20Unsuccessful%20-%20Android%202.2,%20jquerymobile,%200.9.5.1

Upvotes: 25

Related Questions