i am very new to this mobile dev field and i have a question that have been bothering me for days. i have look up the reference from here. below are the code that he/she used. but unfortunately, when i applied it to mine, the code doesnt work. is it because i access it wrong or there is anything else i missed.
function close_window() {
if (confirm("Exit?")) {
navigator.app.exitApp();
}
}
here is my html to acccess the script
<div>
<ul>
<li><a data-role="button" data-icon="delete" onclick="close_window();">Exit</a></li>
<ul>
</div>
hopefully my problem can be solved.thank you
Try this one, but i haven't test it, the source is from here
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}
function exitFromApp()
{
navigator.app.exitApp();
}
</script>
</head>
<body onload="onLoad();">
<button name="buttonClick" onclick="exitFromApp()">Click Me!</button>
</body>
</html>
Related
In a nutshell, I've built an app using HTML/CSS/JS and Phonegap. It's still in testing phase. I have all my app's images saved in Google Cloud Storage (GCS). I have image tags (divs) within my app that needs to pull those images from GCS to the specific div. However, this method of just adding the direct URL only seems to work on iOS devices. What I need to know is, what is the correct method of pulling those images from GCS to my app so that it works on all platforms (iOS, Android, BlackBerry etc)? Do I need to add a line of code in the head of my index.html or does it have something to do with the config.xml? I've been looking for answers on the net, but nothing could give me clear-cut results that works across all platforms.
I'm still fairly new to the whole "app building game", please be gentle.
Here is some code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1"/>
<title>App Name</title>
<link href="simple-flat.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile-1.3.1 /jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link href="General.css" rel="stylesheet" type="text/css"/>
<link href="owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="maps.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/raleway:n1:default.js" type="text/javascript></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("offline", onOffline, false);
}
function onOffline() {
navigator.notification.alert('Please check your internet connection', function()
{ },'Connection Failure','OK');
window.location = "index.html#offline";
}
</script>
</head>
<body onload="onLoad()">
<div id="cultures" data-role="page" data-theme="a" >
<div data-role="header" id="header" data-theme="a" data-position="fixed">
<h1>Headline</h1>
<div id="image" data-theme="c">
<img src="http://commondatastorage.googleapis.com/about_namibia%2FHimba.jpg" width="100%"/></div>
<div class="headline_bar"><h3>Cultures</h3></div>
</div>
<div data-role="content">
<p>Some copy goes here.</p>
</div>
<div data-role="footer" id="footer" class="ui-bar" data-position="fixed">
</div>
</div>
</body>
</html>
I'm very new to jQtouch. I'm following this tutorial. But because of this updated version of jQtouch I'm not being able to follow it exactly. I'm using eclipse to develop an app on android. Now, this is the code I'm trying to run
<html>
<head>
<!--<style type="text/css" media="screen">#import "themes/css/jqtouch.css";</style>
<link type="text/css" media="screen" rel="stylesheet" href="themes/css/jqtouch.css" />
<script src="src/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>-->
<style type="text/css" media="screen">#import "themes/css/jqtouch.css";</style>
<script src="src/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
<script src="extensions/jqt.floaty.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
statusBar: 'black-translucent',
preloadImages: []
});
<title>Kilo</title>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Kilo</h1>
</div>
<ul class="edgetoedge">
<li class="arrow">Dates</li>
<li class="arrow">About</li>
</ul>
</div>
</body>
</html>
Now, I'm getting no error in eclipse. The activity is working fine. But due to some unknown reason I'm getting an empty page. Also being new to jQtouch I can switch to anything else like jquery framework directly if I can have problems with jQtouch in complex tasks.
Thanks. :)
You are not closeing the script tag
<script type="text/javascript" charset="utf-8">
var jQT = $.jQTouch({
icon: 'jqtouch.png',
statusBar: 'black-translucent',
preloadImages: []
});
</script><!-- Close it -->
UPDATE
Get rid of the new .
Follow the example you're making up stuff of your own.
If you insist on using constructor that is the proper way:
var jQT = new jQTouch({
option: value
});
I am trying to make basic app with angularjs and phonegap in android. But it doesn't seem to be working. Below are my source code files:
index.html
<!DOCTYPE html>
<html ng-app="main-app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
</head>
<body>
<div class="body-content" ng-controller="MainCtrl">
<div class="loader-ajax" ng-show="isViewLoading"></div>
<div ng-view></div>
</div>
<script src="js/angular.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
main.js
var mobileApp = angular.module("main-app", []);
mobileApp.config(function ($routeProvider,$compileProvider) {
$routeProvider
.when("/",
{
templateUrl: "partial/home.html",
controller: "homeController"
})
.when("/home",
{
templateUrl: "partial/home.html",
controller: "homeController"
});
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
mobileApp.controller("MainCtrl",function($scope){
alert('Coming here');
$scope.isViewLoading=true;
});
mobileApp.controller("homeController",function($scope){
alert('Home Coming here');
});
index.js
var app = {
initialize: function() {
this.bind();
},
bind: function() {
document.addEventListener('deviceready', this.deviceready, false);
},
deviceready: function() {
// note that this is an event handler so the scope is that of the event
// so we need to call app.report(), and not this.report()
app.report('deviceready');
angular.bootstrap(document, ['main-app']);
},
report: function(id) {
console.log("report:" + id);
}
};
When the app is getting load, router doesn't seem to work as its not getting into Homecontroller.
From what I have ready everywhere else, this code should work. Any help would be greatly appreciated.
I had the same problem, which I just found a solution to. Take a look at Angular ng-view/routing not working in PhoneGap
Move app.initialize(); to PhoneGap's deviceready event
I had this problem - I was stuck on it for 3 evenings - eventually I compared the template names in the routing to the actual file names - make sure the case matches.
I am developing an android application. In that, I am trying to get the image in the javascript, but its not loading. Can someone help me to get the image in the javascript in the phone gap android app...
Code:
<img src="img/nextIcon.png" /></span>'
why the end span tag ?
Basically your file should look something like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Something</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
}
</script>
</head>
<body onload="onLoad()">
<img src="img/nextIcon.png" />
</body>
</html>
And then of course you should have included the image in a folder called img which is in you www folder
I'm new to phonegap and android. I am trying to create a project which fetch pages/data from webserver but it is not working. The code i have used is shown below, facing problem in appending data from ajax call.
when application starts in emulator it shows the alert with all data fetched from local server but its not appending to #resultBlock
here's my code
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script>
function onDeviceReady() {
$('#resultBlock').html('Loading');
$.ajax({
url: 'http://192.168.1.2/user/welcome/',
success: function(data) {
$('#resultBlock').html(data);
alert(data);
}
});
}
$(document).ready(function() {
document.addEventListener("deviceready", onDeviceReady, true);
});
</script>
</head>
<body >
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<h3>Result</h3>
<p id="resultBlock"></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Thanks
hake sure the js files are included correctly and that the path is correct. then use
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'http://192.168.1.2/user/welcome/functions.php',
data: { get_param: 'candidates' },
dataType:'json',
success: function (data) {
$('#resultBlock').html(data);
alert(data);
},
error: function () {
console.log(XMLHttpRequest.errorThrown);
}
});
});