I am new to phonegap and I have created the following app in node.js and I have ran the app on a samsung galaxy 1. But cant get the deviceready event to trigger. Have I missed a step?
<head>
<meta 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" />
<!-- <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" /> -->
<meta name="msapplication-tap-highlight" content="no" />
<title>Hello World</title>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.1.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="js/main.js"></script> -->
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("123");
}
</script>
</head>
<body>
<div>
<input type="button" id="addButton" value="Click To Add"/>
</div>
<div>
<input type="button" id="testButton" value="Test Data" />
</div>
<div>
<input type="button" id="deleteButton" value="Delete Data"/>
</div>
<div id="result">
</div>
</body>
I have tried running the javascript in a separate file and using init() onload but still doesnt fire?
Any ideas?
#tau can you check if there is file name called cordova.js in the folder www under <Your Project Name>\platforms\android\assets. If yes than replace that name js/phonegap-1.4.1.js to "cordova.js" in the html file.
Where is cordova.js in your project . Include cordova.js in hTML . remove this phonegap-1.4.1.js
If you have cordova project
Related
I get this error with a Parse.com JS App:
ReferenceError: Parse is not defined.
I really don't know why. Everything looks good to me. The files are linked correctly; I've checked this a few times. Is it not true, that I have to put my own JS right below Parse and it should work? This is what I've read here: Github Project
I use Chrome with the ripple extension. I serve the app via cordova serve
Any help much appreciated!
Here is index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css" />
<title>Zone</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-latest.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<img src="../img/site-logo.png" rel="external" class="logo">
<!-- <div class="site-menu">
<i class="fa fa-angle-double-left"></i><p class="title"></p><i></i>
</div> -->
<img src="img/suche.jpg" class="icon">
<img src="img/essentrinken.jpg" class="icon">
<img src="img/einkaufen.jpg" class="icon">
<img src="img/kultur.jpg" class="icon">
<img src="img/dienstleistungen.jpg" class="icon">
<img src="img/nuetzlich.jpg" class="icon">
<img src="img/nummern.jpg" class="icon">
<img src="img/sport.jpg" class="icon">
<img src="img/verwaltung.jpg" class="icon">
<img src="img/hotel.jpg" class="icon">
<img src="img/neuzuzuger.jpg" class="icon">
<div class="adad"></div>
<script type="text/javascript" src="../cordova.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And here the JS file.
$(document).ready(function () {
Parse.initialize("", "");
var Ad = Parse.Object.extend("Ads");
function getPosts() {
var query = new Parse.Query(Ad);
query.find({
success: function (results) {
console.log("hello");
var output = "";
for (var i in results) {
var name = results[i].get("location");
if (name == 10) {
output += "<img src = '" + imageurl + "' class='media-object' height='60' width='100'>"
}
}
$("#adad").html(output);
console.log(output);
},
error: function (error) {
console.log("Query error:" + error.message);
}
});
}
getPosts();
});
I'm sorry, I have no experience with Cordova, but in general I've seen problems like these being caused by live reloading of files or by asynchronous loading, which could be caused by cordova/gulp/nodejs.
Maybe you should use a require statement as shown on the Parse quick start guide: var Parse = require('parse');
When I try your html and javascript in jsfiddle it just works, so it should have something to do with the order of loading js files in your local "webserver".
The problem could be that the parse CDN was not found i.e . download the SDK and host it yourself instead
Just run into the same issue. You are most likely missing the reference to parse.min.js.
The reference is typically in your index.html file, inside the header:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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" />
<meta http-equiv="Content-Security-Policy"/>
<script type="text/javascript" src="cordova.js"></script>
<! ---- LOOK HERE --------->
<script src="js/parse.min.js"></script>
<! ---- LOOK HERE --------->
<link rel="stylesheet" type="text/css" href="css/one.css" />
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
I'm playing around with App Development by means of playing around with PhoneGap (HTML, CSS, JavaScript). I'm stuck trying to implement Instagram authentication via OAuth.io. Here's my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>X</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="lib/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div data-role="page" id="pageone" class="pagewrapper">
<div data-role="panel" id="rightpanel" data-position="right">
<p>hej</p>
</div>
<div data-role="panel" id="leftpanel" data-position="left">
<p>hej</p>
</div>
<div data-role='header' id="header" data-id='pheader' data-position='fixed' data-transition='none'>
<span id="right-menu-toggle"><img src="img/menu-toggle.png" width="25px" height="25px"/></span>
<span id="left-menu-toggle"><img src="img/settings-toggle.png" width="25px" height="25px"/></span>
</div>
<div role="main" class="ui-content">
<button type="bytton" onclick="oAuthfct()">Instagram!</button>
<p id="test">hej</p>
</div>
</div>
<script src="cordova.js"></script>
<script src="../plugins/com.oauthio.plugins.oauthio/www/oauth.js"></script>
<script src="lib/jquery-2.1.1.min.js"></script>
<script src="js/app.js"></script>
<script src="lib/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>
JavaScript:
function oAuthfct() {
document.getElementById("test").innerHTML = "Paragraph changed!";
OAuth.initialize('utBjpWgXLntpPoz3t2Tg_9pzOLB');
OAuth.popup('instagram', function(error, success){
// See the result below
});
}
The Paragraph is changing, so I'm sure that my JavaScript file is loaded. But nothing else happens. I'm testing it in the PhoneGap Developer emulator.
I've tried testing it in Firefox as well, where I get the following errors:
ReferenceError: module is not defined module.exports = { oauth.js
(line 76, col 1)
ReferenceError: OAuth is not defined
OAuth.initialize('utIjrESXUntpPfz5t2tg_3pzODM'); app.js (line 26, col
2)
Did you try to add 'OAuth' as dependency in your app module?
.controller('LoginController', ['OAuth',function(OAuth)
...
]
I am following this tutorial:
http://www.indiageeks.in/phonegap-jquery-ajax-example-jsonjavascript-object-notation-response/
but when I press the buttons the request not sent
this is my code
and when check the console I get this
it iays thet my function " connect is not defined "
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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" type="text/css" href="css/index.css" />
<link href="jQueryMobile/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="jQueryMobile/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<title>Taha king</title>
<script charset="utf−8" type="text/javascript">
function connect(e){
alert("mmmmmmmmmmmm");
var term= {button:e};
$.ajax({
url:'http://www.indiageeks.in/tutorials/reply.php',
type:'POST',
data:term,
dataType:'json',
error:function(jqXHR,text_status,strError){
alert(“no connection”);
},
timeout:60000,
success:function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}
});}
</script>
</head>
<body>
<div data-role="header">
<h1>Your resource app</h1>
</div>
<div dara-role="content">
<center><b>Bikes or Cars</b></center>
<center><input onclick="connect(this.value)" type="button" value="cars" /></center>
<center><input onclick="connect(this.value)" type="button" value="bikes" /></center>
<center><b>Results</b></center>
<ul id="result"></ul>
</div>
<div dara-role="footer">
<h4>© carsRent.ps</h4>
</div>
<!-- <script type="text/javascript" src="cordova.js"></script>-->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Try to remove this:
charset="utf−8"
from your script tag.
If you want utf-8 encoding there is no need for that since you are using:
<meta charset="utf-8">
connect() function was not exist. You forgot to insert it. please recheck again.
I have these 2 html files (simplified to show the problem i'm having):
Index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.3.css">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body onload="app.initialize();">
My Calendar
</body>
</html>
calendar.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.3.css">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.js"></script>
</head>
<body onload="app.initialize();">
Index
</body>
</html>
index.js:
var app = {
initialize: function() {
this.bindEvents()
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false)
},
onDeviceReady: function() {
app.receivedEvent('deviceready')
},
receivedEvent: function(id){
alert(location.pathname.substring(location.pathname.lastIndexOf("/") + 1))
}
}
Now when the app first starts it alerts with the message "index.html".
But after that, everytime I click the links to bounce between the 2 pages, the content is shown (the respective links to the other page) but I get no alert, meaning the javascript is not beeing loaded again. But if I refresh the page the alert shows up. I want this to load the javascript without needing to refresh the page.
Thanks,
This is happening because the device is already ready by the time you've selected the next page and thus it won't fire the "deviceready" event again.
I'd change the structure of both pages to:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.3.css">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
My Calendar
</body>
</html>
Note I've moved index.js underneath jQuery mobile and removed the "onload" event.
Then I'd take advantage of the pagecreate event from jQuery mobile to trigger the alert
$(document).ready(function(){
app.initalize();
});
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
$(document).on("pagecontainershow", app.onDeviceReady);
},
onDeviceReady: function() {
app.receivedEvent('deviceready')
},
receivedEvent: function(id){
alert($.mobile.pageContainer.pagecontainer('getActivePage').data('url'));
}
}
I am using Phonegap and i want to use zoom in / out option on pinch using jquery mobile.
I have tried jgesture and hammer plugins for zooming it. Where i am wrong in this code?
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.1.min.css" />
<title>Hello World</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.metaViewportContent = "width=device-width, minimum-scale=1, maximum-scale=2";
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.4.1.min.js"></script>
</head>
<body>
<div class="app">
<h1>PhoneGap</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="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Use hammer.js pinch, pinchin, pinchout
Here's the event documentation for their API on github:
https://github.com/EightMedia/hammer.js/wiki/Getting-Started
ALSO you've essentially made it not user scalable...:
initial-scale=1, maximum-scale=1, minimum-scale=1,
This line:
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"/>
And then you use jquery to set it again:
$.mobile.metaViewportContent = "width=device-width, minimum-scale=1, maximum-scale=2";
No good, read up on it here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta