I'm taking my first steps in PhoneGap with Android (How come you have to pick a platform, anyway? It's supposed to be cross-platform!). I'm trying to call a RESTful service, get some JSON in return and put it on the screen. Tutorials for this are incredibly hard to find. I'm using the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>JSON Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$.getJSON('http://MyServerIP/json/GetJobDetails/717/MyKey?callback=?', {
success:function(data)
{
data = evalJSON(data);
$('body').append('<strong>X </strong>');
},
error: function()
{
$('body').append('<strong>Error </strong>');
}
});
</script>
</head>
<body>
test 10
</body>
</html>
...But I get no response, neither success nor error. The server reports that it has been hit though, and returned the data. Browsing to the same URL also returns data. How come nothing appears in the emulator?
You can find a good tutorial about Android + jquery mobile here in the official wiki of PhoneGAP here:
http://wiki.phonegap.com/w/page/36868306/UI%20Development%20using%20jQueryMobile
For your problem Make sure this line is in phonegap app manifest file:
< uses-permission android:name="android.permission.INTERNET" >< /uses-permission >
Plus, you can set the server headers to: 'Access-Control-Allow-Origin: *'
Good Luck!
For some reason the success: and error: were killing it, ie this works:
<script type="text/javascript">
$.getJSON('http://MyServerIP/json/GetJobDetails/717/MyKey?callback=?', function(data)
{
data = evalJSON(data);
$('body').append('<strong>X </strong>');
});
</script>
Related
Now I am developing a time reminder application where I need to display an alert message every hour. The alert must also be displayed when the application is running in background and in offline mode as well.
It should work for both Android and iOS platforms.
Please help me out this. Thanks in Advance.
Try using this Local Notification Plugin. Your code needs to look something like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
function onDeviceReady() {
// Now safe to use device Plugins
cordova.plugins.notification.local.schedule({
id: 1,
text: 'My first notification',
every: 'hour',
firstAt: next_monday,
data: { key:'value' }
});
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
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 am trying to make a mobile app in html 5 using PhoneGap.
For this i am going to use button(like the menu button)
When i am searching in google i can find code, but it seems to me that only doesnt work for me.
My code so far from what i have tried(copied and not working):
http://pastebin.com/0U6ipFa7
Is there something wrong in the code?
Do i need to change something in the config so this will work?
document.write() can only be used when your script is inline with the HTML, for example:
<html>
<head>
<title>Foo</title>
</head>
<body>
<script language="javascript">
document.write("bar");
</script>
</body>
</html>
In your case you should use innerHTML:
<html>
<head>
<title>Foo</title>
<script language="javascript">
function onMenuKeyDown() {
document.getElementById("barCntr").innerHTML += "<h1>Menu</h1>";
}
</script>
</head>
<body>
<div id="barCntr"></div>
</body>
</html>
document.addEventListener("deviceready", function () {
document.addEventListener("menubutton", menuKeyDown, true);
}, false);
function menuKeyDown() {
alert('Menu button pressed.');
}
Refer this phonegap link for reference.
You should install phonegap plugins first.
Follow this tutorial here.
Install phonegap/cordova here and even in Eclipse IDE install phone-gap plugin by going to help --->eclipse market
for getting menu option in the mobile on click on mobile option you are supposed to get like setting ,logout....
menu option...
I'm developing an html5/JqueryMobile/Phonegap app. I have to detect the device language to redirect to a specific html. I'm trying to use Phonegap's navigator.globalization.getPreferredLanguage. On an iOS device it works fine.
The code below detects the language "onDeviceReady" and performs the redirect. This code should be universal for iOS and Android but when I try it on an Android device it doesn't work. The screen freezes. What might cause this?
<!DOCTYPE HTML>
<html>
<head>
<title>Language</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.globalization.getPreferredLanguage(
function (language)
{
if(language.value == "it")
{window.location.replace("index_it.html");}
else if (language.value == "ar")
{window.location.replace("index_ar.html");}
else
{window.location.replace("index_en.html");}},
function ()
{
alert('Error getting language\n');
}
);
}
</script>
</head>
<body>
</body>
</html>
Problem here, is that language received from Android will have different format, for example instead of Russian with code ru it will return русский
I am using phonegap and sqlite to develop cross-platform mobile app for android,ios,blackberry.For reference i am using http://docs.phonegap.com/en/1.0.0/phonegap_storage_storage.md.html. My index.html is below
1.i have got phonegap.jar in lib
2.got phonegap.js in assests/wwww
3.got sqlite browser and sql shell downloaded in my hardisk
4.got jquery.min.js
I would like to know how to give the location of my sqlite from index.html so that it can make a connection with it. If I just pass in phonegap.js it is not making connection to sqlite.
<head>
<title>Contact Example</title>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.0.js"> </script>
<script type="text/javascript" src="js/jquery.min.js"/></script>
<script type="text/javascript" src="js/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
var db = window.openDatabase("Dummy_DB", "3.0", "Just a Dummy DB",200000);
alert("db="+db); //not printing
}
function onDeviceReady(){
navigator.notification.alert("doo");//only printing this
}
<body onload="c()">
<h1>n Example</h1>
<p>Database</p>
</body>
There are couple of possible problems:
When you call openDatabase the document has loaded, but phonegap
has not. The problem is that you call the method c() onBodyLoad
not onDeviceReady as advised in the phonegap tutorial. See
here.
Please also check you add the javascript accordingly. A very good way
to check is to add the eventListener for deviceready. If it gets
fired the javascript is loaded ok.