I'm new to phonegap and android. I am trying to create a project which fetch pages/data from webserver but it is not working. The code i have used is shown below, facing problem in appending data from ajax call.
when application starts in emulator it shows the alert with all data fetched from local server but its not appending to #resultBlock
here's my code
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script>
function onDeviceReady() {
$('#resultBlock').html('Loading');
$.ajax({
url: 'http://192.168.1.2/user/welcome/',
success: function(data) {
$('#resultBlock').html(data);
alert(data);
}
});
}
$(document).ready(function() {
document.addEventListener("deviceready", onDeviceReady, true);
});
</script>
</head>
<body >
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<h3>Result</h3>
<p id="resultBlock"></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Thanks
hake sure the js files are included correctly and that the path is correct. then use
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'http://192.168.1.2/user/welcome/functions.php',
data: { get_param: 'candidates' },
dataType:'json',
success: function (data) {
$('#resultBlock').html(data);
alert(data);
},
error: function () {
console.log(XMLHttpRequest.errorThrown);
}
});
});
Related
i am very new to this mobile dev field and i have a question that have been bothering me for days. i have look up the reference from here. below are the code that he/she used. but unfortunately, when i applied it to mine, the code doesnt work. is it because i access it wrong or there is anything else i missed.
function close_window() {
if (confirm("Exit?")) {
navigator.app.exitApp();
}
}
here is my html to acccess the script
<div>
<ul>
<li><a data-role="button" data-icon="delete" onclick="close_window();">Exit</a></li>
<ul>
</div>
hopefully my problem can be solved.thank you
Try this one, but i haven't test it, the source is from here
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}
function exitFromApp()
{
navigator.app.exitApp();
}
</script>
</head>
<body onload="onLoad();">
<button name="buttonClick" onclick="exitFromApp()">Click Me!</button>
</body>
</html>
I want to display json data from servlet in listview of android phonegap. But it is displaying blank page in android emulator. It is not calling servlet also. Here is my code please help me.
<!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>Auth Demo</title>
<link rel="stylesheet" href="jquery.mobile-1.3.2.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
<script>
$.ajax({
url: 'http://10.0.2.2:7080/example/CaseList',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i, item) {
$('ul').append('<li>' + item.case + '</li>');
});
$('#output').listview("refresh");
},
error: function(){
output.text('There was an error loading the data.');
}
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<ul data-role="listview" data-filter="false" id="output" data-theme="d">
</ul>
</div>
</div>
</body>
</html>
I am not 100% up on ajax calls but I am pretty sure you need to actually call the function after you define it and it doesn't look like you are.
Try putting an onload call in your tag and then wrapping your ajax in a function.
Body tag:
<body onload="getData()">
Function:
function getData(){
//place your ajax call in here
}
I am trying to make basic app with angularjs and phonegap in android. But it doesn't seem to be working. Below are my source code files:
index.html
<!DOCTYPE html>
<html ng-app="main-app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
</head>
<body>
<div class="body-content" ng-controller="MainCtrl">
<div class="loader-ajax" ng-show="isViewLoading"></div>
<div ng-view></div>
</div>
<script src="js/angular.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
main.js
var mobileApp = angular.module("main-app", []);
mobileApp.config(function ($routeProvider,$compileProvider) {
$routeProvider
.when("/",
{
templateUrl: "partial/home.html",
controller: "homeController"
})
.when("/home",
{
templateUrl: "partial/home.html",
controller: "homeController"
});
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
mobileApp.controller("MainCtrl",function($scope){
alert('Coming here');
$scope.isViewLoading=true;
});
mobileApp.controller("homeController",function($scope){
alert('Home Coming here');
});
index.js
var app = {
initialize: function() {
this.bind();
},
bind: function() {
document.addEventListener('deviceready', this.deviceready, false);
},
deviceready: function() {
// note that this is an event handler so the scope is that of the event
// so we need to call app.report(), and not this.report()
app.report('deviceready');
angular.bootstrap(document, ['main-app']);
},
report: function(id) {
console.log("report:" + id);
}
};
When the app is getting load, router doesn't seem to work as its not getting into Homecontroller.
From what I have ready everywhere else, this code should work. Any help would be greatly appreciated.
I had the same problem, which I just found a solution to. Take a look at Angular ng-view/routing not working in PhoneGap
Move app.initialize(); to PhoneGap's deviceready event
I had this problem - I was stuck on it for 3 evenings - eventually I compared the template names in the routing to the actual file names - make sure the case matches.
I have read about this issue and have tried every possible solution online but nothing worked..
Here is my html code...
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script>
$( document ).bind( "mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
console.log("made cors changes");
//$.mobile.ajaxEnabled = true;
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script src="cordova-2.3.0.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header" data-position="fixed" >
<h4>
JLT
</h4>
</div>
<div data-role="content" >
<p>
Send data to server?
</p>
<a data-role="button" id="transportYES" data-inline="true">
Yes
</a>
<a data-role="button" id="transportNO" data-inline="true">
No
</a>
</div>
</div>
<script>
$( "#transportYES" ).bind( "click", function(event, ui) {
console.log('clicked');
$.ajax({
type: "GET",
url: "http://api.wordnik.com//v4/word.json/recant/definitions",
data: "includeRelated=false&includeTags=false&useCanonical=false&api_key=7741b711eec09c12e05070046d60da6b92e03750359859fde",
dataType: "json",
beforeSend:function(){
console.log('before sending');
},
success: function(msg){
alert( msg[0].word );
},
error: function(xhr, ajaxOptions, thrownError){
console.log(xhr);
alert( 'error' );
}
});
});
</script>
</body>
</html>
If i run this code from chrome i get the response from the server, but when packaged with phonegap it doesnt work from the android emulator..
I have even allowed all domain as follows <access origin=".*"/> in the config.xml file..
Have been stuck on this issue for a long time..please help..!!!!
It works on the device the problem was on the emulator.....couldn't get hold of a testing device earlier.. could have saved so much time...... :)
Your mobileinit event work work unless you put this code in a file between jQuery and jQuery Mobile.
You have to do as below(just an example)
<script src="js/external/jquery-1.8.2.min.js"></script>
<script src="js/configs.js"></script>
<script src="js/external/jquery.mobile-1.2.0.js"></script>
Inside your configs.js just place your mobileinit
$( document ).bind( "mobileinit", function() {
//your code
});
I want to make a native Android application for a website.
The first problem is how to login in a website using an Android native app, (without any change on the existent webservice site), the Android app should remain connected until a click on a logout button. I have to ask about this matter and some people suggested Json.
I have downloaded JSON and GSON library and I tried to see some tutorial for login in this website with Android app with no success.
Now the access page of the website has this code
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="templates/images/favicon.ico" />
<link rel='stylesheet' href='templates/css/base.css?1330075048' type='text/css' />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/srte.js"></script>
<script type='text/javascript' src='js/jquery.form.js'></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-000000000-1']);
_gaq.push(['_setDomainName', 'domainname.it']);
_gaq.push(['_trackPageview']);
</script>
<title>Nomes - Login</title>
</head>
<body class='login' style='background: #fff;'>
<div id="headwrapper" style='height:80px;'>
<div id="head">
<div class="logo" dir="ltr"><a href='http://www.domainname.it'><img src='templates/images/image.jpg'/></a></div>
<div class='banner'><img src='templates/images/banner-head.jpg'/></div>
</div>
</div>
<div id="theadwrapper">
<div id="tabhead">
</div>
</div>
<div id='background_wrapper'>
<div id="wrapper">
<div id="messages"></div>
<div><h5>Email</h5><input id='email' type='text' name='email' /></div>
<div><h5>Password</h5><input id='password' type='password' name='password' /></div>
</div>
<div class='rememberme'><input type='checkbox' name='remember' id='remember_me'>Ricordami</div>
<div class='submit'>
<button type='submit' name='post' class='medium green'>Accedi</button><br/>
<p>o <a href='register.php'>Iscriviti</a></p>
</div>
</form>
<div id='reset_pass'>Hai dimenticato la password? Clicca <a href='resetpwd.php'>qui</a></div>
</div>
<div class='advert'>
<br/><br/><img src='templates/images/sfumatura-orizzontale.jpg' />
<div class='circles'></div>
</div>
<script>
$(document).ready(function(){
$('#login_form').submit(function(e){
e.preventDefault();
if ( ($('#login_form #email').val() == "")
|| ($('#login_form #password').val() == "") ) return;
$('#login_form').attr("disabled", "disabled").css({opacity:0.5});
$(this).ajaxSubmit({
dataType: "json",
success: function(data) {
if (data.isError) {
Bore.error(data.errorMessage);
$('#login_form').removeAttr("disabled").css({opacity:1});
}
else {
window.location.replace(data.data.defaultPage);
}
},
error: function() {
$('#login_form').removeAttr("disabled").css({opacity:1});
console.log('error');
}
});
});
});
</script>
<div class='circle'></div>
</div><!-- login_content -->
<div style='clear:both; padding: 10px;'></div>
</div><!-- wrapper -->
</div> <!-- bg_rapper -->
You should access the server interface with the parameters that your server accepts.
Access the site parsing the PHP and using the nested function in the PHP code, is a really bad idea.