Issue calling Web service from Android browser - android

I have been working on calling a simple web service in html5 from Android Browser(Android 2.2). Its not working on Android browser. But, it works if i run it on a PC. Nothing happens when i click the button. I have been on net for couple of weeks now. But, didn't get anything to work. Below is the code of the html page. please help.
<html>
<head>
<title>UseSwap</title>
<script language="JavaScript">
function InitializeService(){
service.useService("http://localhost:2913/WebServicesUsingCSharp/WebService.asmx?wsdl",
"GetAgeService");
}
var StrYear, StrMonth, StrDay;
function GetAge(){
StrYear = document.DemoForm.StringYear.value;
StrMonth = document.DemoForm.StringMonth.value;
StrDay = document.DemoForm.StringDay.value;
service.GetAgeService.callService("GetAge", StrYear, StrMonth, StrDay);
}
function ShowResult(){
alert(event.result.value);
}
</script>
</head>
<body onload="InitializeService()" id="service"
style="behavior:url(webservice.htc)" onresult="ShowResult()">
<form name="DemoForm">
Year : <input type="text" name="StringYear"/>
Month : <input type="text" name="StringMonth"/>
Day : <input type="text" name="StringDay"/>
<button onclick="GetAge()">Get Age</button>
</form>
</body>
</html>
Regards,
Parshant.

your html references a service on the same machine
http://localhost:2913
i dont think that you have the webservice running on your android phone.
replace localhost with the ip of your server

Related

How to page swipe done in apache cordova

I am working on building an mobile application on apache cordova. I am using the latest version 9.0.0 (cordova-lib#9.0.1).
I have created the index.html
The code works great on cordova browser. But it do not run on android device. I have not checked the emulator, because my system do not support emulators (you can say hardware acceleration fails).
So I install the apk on my android phone. But the app do not work.
Here is my code:-
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="js/swipe.js"></script>
</head>
<body>
<div data-role="page" id="firstpage">
<div data-role="header">
<h1>Swipe Left</h1>
</div>
<div data-role="content">
<p>Swipe Left to get to the next page.</p>
</div>
</div>
<div data-role="page" id="secondpage">
<div data-role="header">
<h1>Swipe Right</h1>
</div>
<div data-role="content">
<p>Swipe Right to get to the next page.</p>
</div>
</div>
</body>
</html>
Below is my swipe.js
$(document).delegate("#firstpage", 'pageinit', function (evt) {
$(this).bind("swipeleft", function (e) {
$.mobile.changePage("#secondpage", {
});
});
})
$(document).delegate("#secondpage", 'pageinit', function (evt) {
$(this).bind("swiperight", function (e) {
$.mobile.changePage("#firstpage", {
});
});
});
Could any one would suggest how to achieve the page swipe in apache cordova.
What I want?
I want to go to next page(or div) by swiping my fingers on the mobile screen.
I have done searching all the web, but the code works in browser but not on android device.
Any help would be appreciated.
You should debug the app running on the phone with Chrome Device Inspector.
Anyway, try moving your JS and CSS resources to your local path in order to embed them with the app, probably their download is being blocked due to security policies.

jquery mobile on.('keyup' ...) - works on desktop, but not on Android

The code below works fine on a desktop browsers, where I am able to capture each keystroke. However the same code does not capture keystrokes on Android mobile browser. What could be the reason for this behavior? Thanks in advance
<div data-role="page" id="sphome" >
....
<form action="Tokens" method="GET" id="TokenSubmit" >
<input size="10" type="text" name="BToken" id="token">
....
</form>
</div>
$('#token').on('keyup',function(event){
alert(event.which);
})
Try using document on like;
$(document).on('keyup','#token', function() {
// code
});
This one should work.

required field html 5 dont work on android Web browser

I'm trying to figure out why it does not work for me following code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myTestForm</title>
</head>
<body>
<form action="ok" method="post" id="myform">
<p>
<input name="user_name" type="text" required id="user_name">
</p>
<p>
<input name="user_password" type="password" required id="user_password">
</p>
<input name="sumbit" type="submit" id="sumbit" value="send">
</form>
</body>
</html>
I try to test it with Chrome or Android Dolphin Browser but it does not work
It works only on normal computer In most browsers
Anyone know why it does not work ? Is there a way to solve this problem
The required attribute only works on android versions < 2.3.
http://www.wufoo.com/html5/attributes/09-required.html
Basic javascript validation using jQuery :
$('[required]').on('blur', function () {
if (!$(this).val().length) { // check if the value is empty
// Could do an alert or something else
}
});

jQuery Mobile not working with PhoneGap

I am working on a PhoneGap application and am using jQuery Mobile. The last time I was working on the project it was looking great, but now jQuery Mobile stopped working. What's going on?
Here's my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div id="page" data-role="page" data-theme="b">
<div data-role="content">
<h2>Login To Carpool Mobile</h2>
<p align="right">Don't have an account? →</p>
<form method="post" id="loginForm">
<label for="password">Email:</label>
<input class="required" type="text" name="username" id="username" placeholder="username#target.com">
<label for="password">Password:</label>
<input class="required" type="password" name="password" id="password" placeholder="password">
<input type="button" value="Login" id="submitButton" onClick="handleLogin()">
</form>
</div>
</div>
<script>
$(document).ready(function() {
checkPreAuth();
});
</script>
</body>
</html>
PhoneGap requires you to manually set/allow aspects of your app in your "config.xml" file in the root directory.
The solution you are looking for, I believe, is this line:
<access origin="http://code.jquery.com" subdomains="true" />
You are allowing access to the external resource of "http://code.jquery.com" and allowing all of its subdomains. This means that you have just unlocked jquery mobile, which is what you are going for, as seen by your script tags:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
These "src" attributes are now seen as "subdomains" of http://code.jquery.com, which you have just successfully allowed!
You can't use below one with jQuery Mobile
$(document).ready(function() {
checkPreAuth();
});
You need to use custom jQuery Mobile specific events. You may have to change your code as below.
$('#page').live('pageshow', function(event){
checkPreAuth();
});
Check documentation for more relevant events.
From your code I can notice that you are using very old libraries of both jQuery and jQuery Mobile. I would recommend you to upgrade to the latest library which will enable you to use much more features than what you have in your current version.
Here is an example with latest framework from jsfiddle.
I don't have any problem with your code apart that checkPreAuth(); is not defined. You should also try to update your version of query and jquery mobile.
I will recommend that you download and include should include the JQuery mobile and Jquery files( script files) in your www project directory
Remove the $(document).ready(function() and keep checkPreAuth(); inside the deviceready event of PhoneGap.

phonegap Interface switching slowly

I use Phonegap for development but in the android platform it runs slow what reason is this
This is I write two pages code:
login code:
<script type="text/javascript">
function verify()
{
var myurl = "main1.html" + "?"+ wifiConfig
if($("#devicePassword").val()==jsonObj.dockmatePassword){
window.location.assign(myurl);
}else{
alert("error");
}
}
</script>
<body onLoad="loadpage()">
<form data-role="controlgroup">
<br><label for="userpassword">密码:</label><br>
<input type="password" id="devicePassword" name="userpassword"/>
<input type="button" data-inline="true" value="确认" onClick="verify()"/>
</form>
</body>
mian1.html code:
<script type="text/javascript">
function getConfigInfo(){
var url = location.href;
var t=url.split("?")[1];
var tmp = t.split("$");
wifiConfig=decodeURI(tmp[0]);
}
}
</script>
<body onLoad="getConfigInfo()">
<li id="version"><a>版本<label id="versions"></label</a></li>
The best thing you can do is keeping away from Jquery Mobile for phonegap applications. Definitely jQuery Mobile is the best available mobile framework and may be suitable for mobile web sites. But for me, Jquery Mobile is the worst framework in performance for a phonegap application.
Make both pages in a single HTML file and use frameworks like JQTouch to make it effective as application pages.
If you use different HTML files in phonegap application, transition between pages will be slower.

Categories

Resources