I want to create iPhone app using phonegap Cordova 2.0. Now i wrote Javascript external and HTML code. Then i have put the JavaScript code into the HTML5 file. Now i want to run the HTML file on the web browser. When i run the HTML in the Browser the Javascript is not working. The browser shows whatever in the HTML . So could you please help me to run the HTML5 file with JavaScript on the browser and in XCode Phonegap.
This below coding is JavaScript coding.
var bodyLoaded = function()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is ready
//
function onDeviceReady() {
var options = new ContactFindOptions();
options.filter="";
filter = ["displayName","organizations"];
navigator.contacts.find(filter, onSuccess, onError, options);
}
// onSuccess: Get a snapshot of the current contacts
//
function onSuccess(contacts) {
for (var i=0; i<contacts.length; i++) {
for (var j=0; j<contacts[i].organizations.length; j++) {
alert("Pref: " + contacts[i].organizations[j].pref + "\n" +
"Type: " + contacts[i].organizations[j].type + "\n" +
"Name: " + contacts[i].organizations[j].name + "\n" +
"Department: " + contacts[i].organizations[j].department + "\n" +
"Title: " + contacts[i].organizations[j].title);
}
}
};
// onError: Failed to get the contacts
//
function onError(contactError) {
alert('onError!');
}
Below coding is located in my HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contact Example</title>
<script type="text/javascript" charset="utf-8" src="Contectscript.js"></script>
</head>
<body>
<body onload='alert(1);'>
<body onload='bodyLoaded();'>
<h1>Example</h1>
<p>Find Contacts</p>
</body>
</html>
Thanks in advance.
Ok, so you are developing a PhoneGap application.
In PhoneGap there is a special event called “deviceready” which fires when PhoneGap is fully loaded.
It is very important that you don’t call any PhoneGap functions before this event fires. It’s possible that the functions are not loaded yet.
Your problems are:
You are trying to test the javascript in your browser. PhoneGap provides services from your phone to your app. Since you are running it from the web browser there is no phone to provide the services. You cannot simply run your application in the web browser.
You do not have phonegap.js referenced. PhoneGap has a javascript part that must be loaded for your application to work. You should have a line like
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>before your own script (of course the filename can differ depending on the phonegap version you are using, it can be called cordova.js).Your html contains silly things. There are 3 opening body tag. There should be only 1. You need a HTML like this:
How to solve these problems?
Develop in XCode. There is an emulator built in. It also does the plumbing for you. No need for your external web browser. In your question you already said something about XCode, so this might be a good option. Read this article about setting up and running the project there: http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-xcode-for-ios.html
Use the Ripple Emulator. It is an emulator designed for emulating phones in the google chrome browser. It can make your application believe that it is running inside your phone as a PhoneGap app and there is all the features of your phone available like accelerometer, gps, etc. It also emulates the deviceready event for you. 🙂
It’s in like every framework it is an extremely good idea to study the Documentation. There is a very good getting started guide and you can find anwers to your every question about PhoneGap.
Please read and study the links I have provided for you. It will help you understanding what you are trying to do.