title: Phonegap, jQueryMobile And Web service
body: <p>I created a native Android app using the Android SDK and java packages, using a ASP.Net Web service created by me, and it works fine. But now I want to make this cross-platform. I heard that Phonegap and jQuery Mobile will help with this, but I am still a bit confused.</p>
  
  <ol>
  <li>Is it necessary to host the HTML file that uses Javascript to work properly?
  OR</li>
  <li>Can I include the HTML and js file in my application and call the web service methods?</li>
  </ol>
  
  <p>Can somebody please guide me?</p>
  
  <p>MY Demo Code is</p>
  
  <p>JAVA SCRIPT</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8" src="phonegap.js"&gt;&lt;/script&gt;
   &lt;script src="jquery-1.7.2.min"&gt;&lt;/script&gt;
   &lt;script src="jquery.mobile-1.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8"/&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" src="jquery.mobile-1.1.1.min.css"/&gt;
    &lt;script type="text/javascript"&gt;
  
  
  function onDeviceReady() {}
  document.addEventListener("deviceready", onDeviceReady, false);
  
  function LoginButton_onclick() {
      $.ajax({
  type: "POST",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
      url:    "http://182.72.192.18/webservicedemo/service.asmx/HelloWorld",
      data: '{}',
      success: function(msg) {
     jsonArray = $.parseJSON(msg.d);
      var $ul = $( '&lt;ul id="details"&gt;' );
      for(i=0; i &lt; jsonArray.length; i++)
      {
    $("#details").append('&lt;li id="'+i+'" name="head" &gt;'+jsonArray[i].name+'&lt;/li&gt;' );
  } $('#details').listview('refresh');
      },
      error: function(msg) {
           alert("Error");
      }
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <p></p>
  
  <pre><code>&lt;div data-role="page" id="Page1"&gt;
  &lt;h1&gt;DEMO PAGE&lt;/h1&gt;
  
  &lt;div id="DEMO"&gt; 
  &lt;input id="LoginButton" type="button" value="GET DATA" onclick="LoginButton_onclick()" /&gt;&lt;/div&gt;
  
  &lt;div id="divList" data-role="content"&gt;
  &lt;ul id="details" data-role="listview" data-inset="true"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;     
  &lt;/body&gt;
  </code></pre>
  
  <p>and my ASP.NET Web Service is</p>
  
  <pre><code>[WebService(Namespace = "http://tempuri.org/")]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  [System.Web.Script.Services.ScriptService]
  public class Service : System.Web.Services.WebService{
  JavaScriptSerializer serializer = new JavaScriptSerializer();
  public Service () {}
  
  [WebMethod]
  [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
  public string HelloWorld() {
  
      List&lt;clsDetails&gt; deailsList = new List&lt;clsDetails&gt;{
      new clsDetails(1,"BOY","SCHOOL"),
      new clsDetails(2,"GIRL","COLLEGE"),
      new clsDetails(3,"MAN","OFFICE")};
  
      string detail = serializer.Serialize(deailsList);
      return detail;
  }
  }
  </code></pre>
  
  <p>if i host the html file along with my web-service it provide me result .
  but when i try to call using a local html file from android app it fails. 
  i can't figure out what went wrong.</p>
  
  <p>Can anyone tell me what went wrong here?
  Look here is the response i get from web-service and i parse that to JSON</p>
  
  <p><img src="https://i.stack.imgur.com/OUlGq.jpg" alt="HTML HOSTED ALONG WITH WEBSERVICE"></p>
  
  <p>phonegap.xml</p>
  
  <pre><code>&lt;phonegap&gt;  
  &lt;access origin="http://182.72.192.18" /&gt; 
  &lt;/phonegap&gt;
  </code></pre>