I am very new to phonegap as well as javascript and I'm trying to make a simple Contact Adder application but for some reason nothing happens when I try to add a contact. No alerts even appear. By the way, I am using an android emulator within eclipse to test my application. Can someone tell me what I am doing wrong? Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Add Contacts</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady()
{
document.getElementById("save").addEventListener("click",addContact, false);
alert("READY!");
}
function addContact()
{
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
<body onload = "deviceIsReady()">
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
This code working for me:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="jquery.mobile-1.3.2.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script src="jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
</script>
<script src="jquery.mobile-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<title>Add Contacts</title>
<script>
function loaded(){
document.addEventListener("deviceready", deviceIsReady, false);
}
function deviceIsReady()
{
document.getElementById("save").addEventListener("click", addContact, false);
alert("READY!");
}
function addContact()
{
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
</head>
<body onload = "loaded()">
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
I tried in eclipse with android sdk, and I get the alerts on the emulator and after I add a new contact I sow it on the contacts. Before you try this code watch out for the script and style link. (rewrite it, or download the newest)
Your script tag is in-between the head and body tags. Try moving it into the body tag.
Your window load event also probably won't work. Just remove it, and simply attach the device ready event, so your script looks like this:
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady() {
document.getElementById("save").addEventListener("click",addContact, false);
alert("READY!");
}
function addContact() {
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
just remove the
<body onload = "deviceIsReady()">
and make a simple
<body>
you also need to put your
<script>
in head or body, but not between them!
you need to catch the event ondevice ready, but not on bodylaod. so try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady(){
alert("READY!");
}
</script>
</head>
<body>
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
it should works (for me, it works!). if not, check the manifest, maybe you do something wrong with it
Related
i have this problem, I would like to load a text inside a div with .innerHTML but after the event click the text inside the div diseappers:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Anagrafica</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>My Document</h1>
<input type="submit" value="submit" id="submit">
<div id="myDiv"></div>
<script src="js/app.js"></script>
</body>
</html>
app.js
window.addEventListener('load',function(){
document.getElementById('submit').addEventListener('click',function({
document.getElementById('myDiv').innerHTML= 'hello';
});
You have syntax error , )} missing .
addEventListener('click', function({
Looks like callback but you need just function(){} to attach.
window.addEventListener('load',function(){
document.getElementById('submit').addEventListener('click', function(){
document.getElementById('myDiv').innerHTML= 'hello';
}, false);
}, false);
<input type="submit" value="submit" id="submit">
<br/>
<br/>
<div id="myDiv" style="background-color:black;color:lime;width:300px" > ... </div>
On html
<button type='submit'></button>
On js
var Button = document.querySelector("button");
Button.addEventListener("click", onClickButton, false);
function onClickButton(){
// to do something here
}
I wanted save value in inputbox to JS variable, but when i save it, doesn't appear in console, why? thanks for advice
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Color Picker</title>
<link href="color-picker.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
</head>
<body>
<p><input type="text"></p>
<script src="color-picker.min.js"></script>
<script>
var picker = new CP(document.querySelector('input'));
picker.on("change", function(color) {
this.target.value = '#' + color;
})
function colorpick() {
var el = document.querySelector('input');
console.log(el);
}
</script>
<input onclick="colorpick()" type="button" class="button" value="Submit">
</body>
</html>
I am not sure what are you trying to accomplish but colorpick function is only selector of the input element itself. You need console.log(el.value) instead.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var x=document.f1.tt1.value;
alert(x);
</script>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
</body>
</html>
*the alert message does not appear , what is the problem?
thanks for your help :) :)
*
In addition to other answers your document may not be ready.
In your script tag have:
$(document).ready(function(){
var x = document.f1.tt.value;
})
A nicer way might be to give your input an id.
<input type="text" name="tt" id="myInput" value="jawadi" />
$(document).ready(function(){
var x = $("#myInput").val();
})
The problem with your script is you are trying to get the value of element which has not been created in the DOM yet. So you are getting the null value because it does not exist. One thing you can do is include the script at the bottom of the page so that it gets the value
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
</body>
<script type="text/javascript">
var x=document.f1.tt.value;//the name of textbox is tt
alert(x);
</script>
</html>
Second thing that you can try if you are comfortable with jquery is use .ready function, so it will get the value after page load.
$(document).ready(function(){
var x=document.f1.tt.value;//the name of textbox is tt
alert(x);
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
<script type="text/javascript">
var x=document.f1.tt.value;
alert(x);
</script>
</body>
</html>
because javacript not found f1 try this
Replace
var x=document.f1.tt1.value;
with
var x=document.f1.tt.value;
Modified code: DEMO
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function alertX(){
var x=document.f1.tt.value;
alert(x);
}
</script>
</head>
<body onload='alertX();'><!-- call alertX on body load-->
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</body>
</html>
i am using following code using dojo to have tooltipdialog ,, by using this code the dialog box is visible below the textbox , but i want to see on above to textbox ..
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script language="JavaScript" src="dojo/dojoroot/dojo/dojo.js" type="text/javascript">
</script>
<script language="JavaScript" src="dojo/dojoroot/dijit/TooltipDialog.js" type="text/javascript" >
</script>
<link rel="stylesheet" href="dojo/dojoroot/dijit/themes/claro/claro.css" />
<script>
dojo.require("dijit.TooltipDialog");
dojo.ready(function(){
var myTooltipDialog = new dijit.TooltipDialog({
id: 'myTooltipDialog',
style: "width: 100px;",
content: "<p>Nitin.",
onMouseLeave: function(){
dijit.popup.close(myTooltipDialog);
}
});
dojo.connect(dojo.byId('thenode'), 'onmousedown', function(){ dijit.popup.open({popup: myTooltipDialog, around: dojo.byId('thenode')}) ;});
});
</script>
</head>
<body class="claro">
<br/>
<br/>
<input type="text" id="thenode"/>
</body>
</html>
please give me some solution ..
specify 'orient' property in dijit.popup.open function's argument object.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="./dojo-release-1.7.3-src/dojo/dojo.js"></script>
<link rel="stylesheet" href="./dojo-release-1.7.3-src/dijit/themes/claro/claro.css" />
<script>
require([ "dojo/ready", "dijit/TooltipDialog" ], function(ready, TooltopDialog) {
ready(function(){
var myTooltipDialog = new TooltopDialog({
id : 'myTooltipDialog',
style : "width: 100px;",
content : "<p>Nitin.</p>",
onMouseLeave : function() {
dijit.popup.close(myTooltipDialog);
}
});
dojo.connect(dojo.byId('thenode'), 'onmousedown', function() {
dijit.popup.open({
popup : myTooltipDialog,
around : dojo.byId('thenode'),
orient: ['above']
});
});
});
});
</script>
</head>
<body class="claro">
<br />
<br />
<br />
<br />
<input type="text" id="thenode" />
<br />
<br />
<br />
<br />
</body>
</html>
dojo/dijit/popup.js:252 in Dojo 1.7.3 release.
orient = args.orient || ["below", "below-alt", "above", "above-alt"],
I am upgrading a Phonegap App to Phonegap 1.1.0 (from 9.4) and building with the new iOS5 SDK and Xcode 4.2.
The same happens when trying PhoneGap 1.0.0 as well.
The app has an about button that launches a notification dialog, but it is not firing after upgrading.
Here is the HTML from the Phonegap App
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap.1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8">
function onDeviceReady(){
//do something
}
function OnPageLoad(){
document.addEventListener("deviceready",onDeviceReady,false);
}
function alertDismissed() {
// do something
}
function onAlertBtn()
{
navigator.notification.alert("Test Alert Message", alertDismissed, "Test Alert", "Done");
}
</script>
</head>
<body onload="OnPageLoad()">
<div align="center">
<FORM>
<INPUT type="button" style="font-size: 18px;" value="About" onClick="onAlertBtn();" >
</FORM> </div>
</body>
</html>
Any assistance would be appreciated.
Thanks
Ok, after considerable trial and error, a fix has been found!
Modify the source to be...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" media="screen" type="text/css">
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onDeviceReady(){
//do something
}
function OnPageLoad(){
document.addEventListener("deviceready",onDeviceReady,false);
}
function alertDismissed() {
// do something
}
function onAlertBtn()
{
navigator.notification.alert("Test Alert Message", alertDismissed, "Test Alert", "Done");
}
</script>
</head>
<body onload="OnPageLoad()">
<div align="center">
<FORM>
<INPUT type="button" style="font-size: 18px;" value="About" onClick="onAlertBtn();" >
</FORM> </div>
</body>
</html>