Phonegap, jQueryMobile And Web service
Solution 1
You have to use a local html and get the server data using XHR calls to your webservice, and then show the data of your webservice in your html.
Edit after seeing the code:
The problem is the url. You can't use localhost, because if you test on a device, localhost is the device, and the device doesn't have the webservice, you have to use the local iP of your machine. http://192.168.1.XXX:1000/WebSite2/Service.asmx/HelloWorld
Edit 2:
I just tested your code and got it working for me, just change this.
The jsonArray[i].Result didn't work for me, it return undefined, but you can access to every attribute of the json object, in the example I used the name.
And put the refresh outside the for, you only have to refresh when you finish, not every time, and put the ; at the end.
for(i=0; i < jsonArray.length; i++)
{
$("#details").append('<li id="'+i+'" name="head" >'+jsonArray[i].name+'</li>' );
}
$('#details').listview('refresh');
If it still don't work, check if you whitelisted the domain phonegap whitelist guide
Full working code
<!DOCTYPE html>
<html>
<head>
<title>DEMO</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<title>DEMO</title>
<script type="text/javascript" charset="utf-8">
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 = $( '<ul id="details">' );
for(i=0; i < jsonArray.length; i++)
{
$("#details").append('<li id="'+i+'" name="head" >'+jsonArray[i].name+'</li>' );
}
$('#details').listview('refresh');
},
error: function(msg) {
alert("Error");
}
});
}
</script>
</head>
<body>
<div data-role="page" id="Page1">
<h1>DEMO PAGE</h1>
<div id="DEMO">
<input id="LoginButton" type="button" value="GET DATA" onclick="LoginButton_onclick()" /></div>
<div id="divList" data-role="content">
<ul id="details" data-role="listview" data-inset="true"></ul>
</div>
</div>
</body>
</html>
Solution 2
The problem that you have it's that you can't access your webservice from your mobile device, only when you run your program with your computer's emulator. You must do this:
- Have your webservice in a server, not in localhost.
-
Edit res/xml/cordova.xml for no crossdomain problems.
<!-- <access origin="https://example.com" /> allow any secure requests to example.com --> <!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www --> <!-- <access origin=".*"/> Allow all domains, suggested development use only -->
With these steps your program will function perfectly.
Edit
I've seen that the type you're returning in your WS is not in JSON style. Your response is something between XML and JSON. When you get the correct return value of the WebMethod everything will go OK.
You must use last version of Cordova and jQM. See that your jQM CSS and JS don't match in versions.
Solution 3
You need to include the HTML file showing the data + JS calling the web service with your app. Through data injection (e.g. JSON or XML through XHR calls), you can pull the data from your web service. This means that your web service should output the requested data in JSON or XML so that your HTML + JS will be able to process and show the data from your web service. You can do this with PhoneGap SDK or even PhoneGap Build.
A simple example that I personally like can be found here: http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/. Instead of ASP.NET, it works with PHP / MySQL, but the concept is basically the same, I would think.
Solution 4
This is a good example I found http://www.idesigncity.co.uk/how-to-fetch-json-data-from-phonegap Usually JSON or XML call will be your answer. Download the zip in there
edwin
Updated on February 05, 2020Comments
-
edwin about 4 years
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.
- Is it necessary to host the HTML file that uses Javascript to work properly? OR
- Can I include the HTML and js file in my application and call the web service methods?
Can somebody please guide me?
MY Demo Code is
JAVA SCRIPT
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script src="jquery-1.7.2.min"></script> <script src="jquery.mobile-1.1.1.min.js"></script> <script type="text/javascript" charset="utf-8"/></script> <link rel="stylesheet" src="jquery.mobile-1.1.1.min.css"/> <script type="text/javascript"> 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 = $( '<ul id="details">' ); for(i=0; i < jsonArray.length; i++) { $("#details").append('<li id="'+i+'" name="head" >'+jsonArray[i].name+'</li>' ); } $('#details').listview('refresh'); }, error: function(msg) { alert("Error"); } }); </script>HTML
<div data-role="page" id="Page1"> <h1>DEMO PAGE</h1> <div id="DEMO"> <input id="LoginButton" type="button" value="GET DATA" onclick="LoginButton_onclick()" /></div> <div id="divList" data-role="content"> <ul id="details" data-role="listview" data-inset="true"></ul> </div> </div> </body>and my ASP.NET Web Service is
[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<clsDetails> deailsList = new List<clsDetails>{ new clsDetails(1,"BOY","SCHOOL"), new clsDetails(2,"GIRL","COLLEGE"), new clsDetails(3,"MAN","OFFICE")}; string detail = serializer.Serialize(deailsList); return detail; } }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.
Can anyone tell me what went wrong here? Look here is the response i get from web-service and i parse that to JSON
phonegap.xml
<phonegap> <access origin="http://182.72.192.18" /> </phonegap>