I am using phonegap for creating the apk file for android application. Below is the code of my index.html
<html>
<head><title>Test application</title>
<script src="Scripts/jquery.js"></script>
<script>
$(document).ready(function(){
$("#submitValue").on("click",function(){
alert("");
getServerResponse($("#userValue").val());
});
});
function getServerResponse(userValue){
var serverUrl="http://xxx.site.net/xxx/Hello/"+ userValue +"?format=json";
$.ajax({
url:serverUrl,
type:"GET",
contentType:"application/json",
dataType:"jsonp",
success:function(data){
alert("Success");
$("#serverResponse").html(data.Result);
},
error:function(){
alert("error");
}
});
};
</script>
</head>
<body>
<div>
<h3>Enter your name and click submit</h3>
</div>
<div>
<input type="text" placeholder="Enter your Name" id="userValue"/>
<input type="button" id="submitValue" value="Submit"/>
</div>
<div id="serverResponse"></div>
</body>
This works perfectly when i open using a browser, but when the app is opened and submit is clicked, i get the alert for click, but nothing happens after that. neither success alert not error alert comes when i click the submit button via android app
You need to give permission for INTERNET in AndroidManifest.xml file.
Include the line below to the AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>
Related
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.
I've this simply google-plus login page.
When I login from the android chrome browser all works correctly but when I try to login from the Android Captive Portal after the login I see only a blank page on the captive portal and the function onSignIn isn't executed.
<html>
<head>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="xxx.apps.googleusercontent.com">
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
alert('Name: ' + profile.getName());
alert('Email: ' + profile.getEmail());
document.getElementById("login").click();
}
</script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<form name="loginform" action="http://10.10.10.1/login" method="post">
<input type="hidden" name="username" value="testwifi">
<input type="hidden" name="password" value="teswifi">
<input type="submit" name="login" value="log in" id="login" style="visibility:hidden;">
</form>
</body>
I've debugged the android when the captive loads
it seems like it fail on this one:
[INFO:CONSOLE(20)] "Uncaught Error: sessionStorage is not available in the current environment.", source: https://ssl.gstatic.com/accounts/o/1096633630-storagerelay.js (20)
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
}
});
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.
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