I am trying to develop a Mobile App using the PhoneGap technology.
By using a ajax call, I would like to send/receive data to/from a server.
I have read many articles about how to develop a mobile app and it does not work for me.
I have developed the app and it runs perfect as a web app.
When I try to convert it into a mobile app using the Adobe PhoneGap Build, and after I install it on my android phone, the mobile app does not trigger the ajax api call.
Please help, this is my fiorst mobile app, and I feel that I am missing something, maybe some specific rights, configs ...
This is my html/js/jquery/ajax code:
<!DOCTYPE html>
<html>
<head>
<title>Mobile App</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<h1>Mobile App V 1.0.0</h1>
<p>Description for the mobile app.</p>
<div data-role="page" id="home">
<div data-role="header" data-theme="b">
<h1>Mobile App</h1>
</div>
<div data-role="main">
<div id="api_result"></div>
</div>
<div data-role="footer" style="text-align:center;" data-theme="b">
<p>© Mobile App</p>
</div>
</div>
<script type="text/javascript" src="res/js/main.js"></script>
</body>
</html>
and the js/jquery/ajax code :
$(document).ready(
function () {
$.ajax(
{
type: "POST",
url: "http://192.168.1.101/phone-gap/apis/apps/digital-menu/digital-menu-api-v-1.0.1/",
crossDomain: true,
beforeSend: function () {
$.mobile.loading('show')
},
complete: function () {
$.mobile.loading('hide')
},
data: {},
dataType: 'json',
success: function (response) {
//console.error(JSON.stringify(response));
//alert('Works!');
$("#api_result").html('abc');
},
error: function () {
//console.error("error");
//alert('Now working!');
$("#api_result").html('def');
}
}
);
}
);
Related
So I have a basic cordova app created. I added jquery and am trying to make a request to a url.
The target is to post data, but I'm testing with a GET method.
The problem is that the response is "Failed to load resource: the server responded with a status of 404 (Not Found)", but when I open the url from a browser, the response is displayed.
I've been at this for a day and a half, I've gone through alot topics on the internet and tried different things, but couldn't get the job done. If you have any ideas it would be great!
My goal is to create an android app, in which you fill several fields with text, save them on the device, and when connected to wifi tap a button to push the data in the file to a server. So if you have any suggestions on what other I can use instead of cordova, I`d appreciate it.
EDIT - here is the code:
So as I said, plain app created with cordova.
This is the index.html and the default index.js at which end I added the ajax:
$.ajax({
type: 'GET',
url: 'url',
headers: {
'Access-Control-Allow-Origin': '*'
},
success: function(response) {
console.log(response);
},
error: function(req, err) {
console.log(req);
console.log(err);
}
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
jQuery provide a way to connect Server.(i.e)HTTP asynchronous HTTP (Ajax) request.All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.
This is the simple method to connect your server.
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});
use this method.No need to add headers in the client side. please add it in the back end to support cross platform issues(CORS).
[To know more please refer ][1]
http://api.jquery.com/jquery.ajax/
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 am developing an application using jQuery mobile 1.1.0 RC1 and phonegap 1.5.0
I have a single HTML page which contains all the pages in it as a div(through data-role="page")
here is my code
<!DOCTYPE HTML>
<html>
<head>
<title>Index Page</title>
<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8"
src="cordova/cordova-1.5.0.js"></script>
<!-- Adding jQuery mobile and jQuery scripts & CSS -->
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet"
href="jquerymobile/jquery.mobile-1.1.0-rc.1.min.css" />
<script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript"
src="jquerymobile/jquery.mobile-1.1.0-rc.1.min.js"></script>
<link rel="stylesheet" href="css/colors.css">
<script type="text/javascript">
function page1(){
$.mobile.changePage("#page2", {
transition : "slide"
});
}
function page2(){
$.mobile.changePage("#page1", {
transition : "slide"
});
}
$("#page1").live("pageshow", function(e) {
$.ajax({
type : 'GET',
cache : false,
url : "http://192.168.1.198:9051/something.xml"
+ "?time=" + Date.now(),
data : {
key : "value"
},
dataType : "xml",
success : function(xml) {
console.log("Success Page1");
},
error : function(xhr) {
}
});
});
$("#page2").live("pageshow", function(e) {
$.ajax({
type : 'GET',
cache : false,
url : "http://192.168.1.198:9051/something.xml"
+ "?time=" + Date.now(),
data : {
key : "value"
},
dataType : "xml",
success : function(xml) {
console.log("Success Page2");
},
error : function(xhr) {
}
});
});
</script>
<body>
<div data-role="page" id="page1">
<div data-role="header">Page 1</div>
<div data-role="content">
<input type="text" name="page1GetTime" id="page1GetTime" value="" /> Go to Page 2
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">Page 2</div>
<div data-role="content">
<input type="text" name="page2GetTime" id="page2GetTime" value="" />Go to Page 1
</div>
</div>
</body>
Now when i click to "Go to page2" then page2 will be shown along with one ajax request .. If i keep on moving from one page to another then a ajax request is made.. This request stops responding after 4 to 5 request... Why is it happening?
If your pages become so heavy that ajax requests timeout or stop working, you may want to separate them in to different actual pages. If they still perform poorly, you can easily force ajax off to test if that is the issue.
data-ajax="false"
Also, does this limitation change from one mobile device to the next or on a desktop browser? Because your ajax becomes unresponsive at "4 or 5", it makes me think its a memory issue.
I sorted it out. There is a Bug in Phonegap 1.5.0. To rectify it,either we need to downgrade to phonegap 1.4.1 or upgrade to phonegap 1.6.0rc1
Try to add data-ajax="false" rel="external" to your links to disable ajax paging. I found it always causes issues with PhoneGap.
Yes，I faced this problem too. The problem in the cordova-1.5.0.js. If included this lib, jquery ajax will fail when reenter the ajax page and use the ajax. And It is Ok in phonegap 1.4 or not include cordova-1.5.0.js in phonegap1.5
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.
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);
}
});
});