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/
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 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');
}
}
);
}
);
I am developing android apps using phonegap + Jquery mobile. My apps displaying the list in listview div but look and feel of listview not working on 2.3.3 and working fine on version greater than 3.0.
following is the my index.html page. please suggest me answer.
<!DOCTYPE HTML>
<html>
<head>
<title>ListView</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="js/jquery.mobile-1.4.1.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="cordova.js"></script>
<script src="js/jquery.mobile-1.4.1.js"></script>
</head>
<body>
<div data-role="page" id="courseList">
<div data-theme="a" data-role="header">
<h3>
Course List
</h3>
</div>
<div data-role="content">
<!-- <div class="example-wrapper" data-iscroll> -->
<ul data-role="listview" id="output" data-theme="b">
</ul>
<!-- </div> -->
</div>
</div>
</body>
<script>
$(document).ready(function() {
if(window.isphone) {
document.addEventListener("deviceready", onDeviceReady, false);
} else {
onDeviceReady();
}
});
// device APIs are available
function onDeviceReady() {
// Now safe to use device APIs
$.ajax({
url:"http://www.cilibrary.ojaswitech.com/getLatestNews",
// crossDomain: true,
//type : "POST",
dataType: 'json',
async: true,
success: function (result) {
$.each(result, function(i, item) {
$('ul').append('<li><a href="">' + item + '<p></li>');
});
$('#output').listview("refresh");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
})
}
</script>
</html>
following is the two images. first is left side image 2.3.3 and second is right side image 4.2.2
This is a known bug which is introduced in version 1.4.1 and effects Android 2.3.x devices and IE8. The problem is in lines 3195 and 3222 of jquerymobile.js. There's a default property which happens to be a reserved keyword.
You can solve this problem either by modifying these two lines;
duration = $.fn.animationComplete.default; // this
duration = $.fn.animationComplete.defaultDuration; // to this
// and
$.fn.animationComplete.default = 1000; // this
$.fn.animationComplete.defaultDuration = 1000; // to this
or wait until version 1.4.2 is out with the fix for this bug.
Reference
Acctually there might be an even easier way. Try with replacing:
$('#output').listview("refresh");
with this instead:
$('#output').listview("create");
=) Good luck!
Danny
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