I want to develop a cordova app with multiple views using a single page with the aid of handlebars javascript library. I created a simple app with phonegap as a start under the name MyFirstApp and went to edit the index.html file under the www directory. But nothing shows when i run the app in internet browser. Anybody sees where i am doing it wrongly?
index.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=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="mainpage">
<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="address-template" type="text/x-handlebars-template">
<p>You can find me in {{city}}. My address is {{number}} {{street}}.</p>
</script>
<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
</div>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/handlebars-v4.0.2.js"></script>
<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>
index.js
var app = {
initialize: function() {
this.bindEvents();
},bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},onDeviceReady: function() {
// Grab the template script
var theTemplateScript = $("#address-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
"city": "London",
"street": "Baker Street",
"number": "221B"
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
}
};
Use this as your index.js:
var app = {
initialize: function() {
this.bindEvents();
},bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},onDeviceReady: function() {
// Grab the template script
var theTemplateScript = $("#address-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
"city": "London",
"street": "Baker Street",
"number": "221B"
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
}
};
Related
I have some mysterious behaviour with my javascript code in my cordova android app. The javascript execution becomes anyhow not right executed. The intervals,conditions, timeouts and clearTimeout gets manipulated I think. You can see a demo here In my browser without the phonegap ready all works well. What can cause this behaiviour I have not only with these app.
index.js file
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
index.html
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Einstellungen zur Defintion als WebApp -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="ui-content" id="bak" style="width:100%;height:100%;position: absolute;">
<div class="header1">
<p class="score" style="white-space: normal" id="score"></p>
</div>
<p class="go" style="white-space: normal" id="number"></p>
</div>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function gameplay() {
window.location.href='main1.html';
}
function onDeviceReady() {
here is the js code you can see in the fiddle
}
</script>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
This AngularJS code works while located in the HTML file:
<!DOCTYPE html>
<html lang="en" ng-app="ChgReqApp">
<head>
<link rel="shortcut icon" href="IM/Coins.png" />
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Change to min -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
angular.module('ChgReqApp', []);
angular.module('ChgReqApp').controller('MainController', function ($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
</script>
<script src="JS/MainController.js"></script>
</head>
<body ng-cloak ng-controller="MainController">
</body>
</html>
The MainController.js file looks like this and the alert dialog works as expected:
// MainController.js
$(function () {
alert("MainControllerFile");
});
Now, when I move the controller code to the MainController.js file, I get an error:
<!DOCTYPE html>
<html lang="en" ng-app="ChgReqApp">
<head>
<link rel="shortcut icon" href="IM/Coins.png" />
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Change to min -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
angular.module('ChgReqApp', []);
</script>
<script src="JS/MainController.js"></script>
</head>
<body ng-cloak ng-controller="MainController">
</body>
</html>
//MainController.js
$(function () {
angular.module('ChgReqApp').controller('MainController', function ($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
});
The error is:
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
http://errors.angularjs.org/1.4.8/ng/areq?p0=MainController&p1=not%20a%20function%2C%20got%20undefined
at ...
I have searched for a solution to this problem but all the discussions I have found relate to some other issue not applicable to the above code. The external js file is valid and the scripts are in the correct order. Any help on this is greatly appreciated.
There is no need for $(function() {}) because Angular has its own "Document Ready business" (just to simplify to the max :P).
The problem is that Angular can't run its "Document Ready Business" because you are putting Angular stuff inside jQuery's "Document Ready" shorthand and that stops the Angular framework from working properly.
You can read more about this in Angular's documentation
Angular initializes automatically upon DOMContentLoaded event or when
the angular.js script is evaluated if at that time document.readyState
is set to 'complete'. At this point Angular looks for the ng-app
directive which designates your application root.
I think you can see how this conflicts with what you are trying to do.
Also as an additional suggestion go like this:
angular.module('ChgReqApp', []).controller('MainController', function($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
or like this (my preference)
var app = angular.module('ChgReqApp', []);
app.controller('MainController', function($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
(function() {
angular
.module("ChgReqApp", [])
.controller("MainController", MainController);
MainController.$inject = ["$scope"];
function MainController($scope) {
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
};
})();
you can read more information here : https://github.com/johnpapa/angular-styleguide
This is what I found that FIXED my problem...
the CHROME browser was CACHING the (MainController.js)
I found this out by looking at (Chrome devtools, Network tab,
MainController.js file, Response TAB) (* THE CODE WAS DIFFERENT
*)
OPEN A NEW TAB in Chrome (fixed the cached MainController.js file)
I was having the same problem. I was just trying to put some VALUES in a MainController.js file EXTERNALLY.
<script src="./js/controllers/MainController.js"></script>
For some reason it wasn't working (from this file)...
But...
when I tested directly from the HTML file (it worked)
app.controller('MainController', ['$scope', function($scope) {
// SCOPE
$scope.test = "test(HTML FILE)";
$scope.test2 = 'test2(HTML FILE)';
}]);
...but NOT IN THE EXTERNAL FILE?
DISABLE CACHE (CHROME)
open CHROME, (DevTools), Networks tab, CLICK (ON) (Disable Cache)
try this
<!DOCTYPE html>
<html lang="en" ng-app="ChgReqApp">
<head>
<link rel="shortcut icon" href="IM/Coins.png" />
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Change to min -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="JS/MainController.js"></script>
</head>
<body ng-cloak ng-controller="MainController">
</body>
</html>
//MainController.js
angular.module('ChgReqApp').controller('MainController', function ($scope) {
alert('in main controller');
$scope.ClientInfo = {};
$scope.ChangeRequests = [];
});
I'm having some problems getting jquery mobile to work properly. I'm using the anatomy of a page and this stackoverflow example.
The output I'm expecting is for jqm to only show the contents of the first data-role in the code. However, what's actually happening is after jqm loads, it sets the view to the size of the browser window, but still shows the contents of the second data-role plus the words "loading" beneath it.
I'm pretty sure I'm missing something very simple. Any help will be greatly appreciated.
I'm using PhoneGap and RequireJS.
Here is the code:
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, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<title>Student Picker</title>
</head>
<body>
<div data-role="page" id="test1">
Goto Test2
</div>
<div data-role="page" id="test2">
Goto Test1
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
require.config({
baseUrl: 'js',
paths: {
'jquery': 'jquery',
'jquery.mobile.config': 'jquery.mobile.config',
'jquery.mobile': 'jquery.mobile',
'app': 'app'
},
map: {
'*': {'jquery': 'jquery-private'},
'jquery-private': { 'jquery': 'jquery' }
},
shim: {
'jquery.mobile.config': ['jquery'],
'jquery.mobile': ['jquery', 'jquery.mobile.config']
}
});
require(['jquery', 'app', 'jquery.mobile'], function(jq, app) {
jq(function() {
//app.initialize();
});
});
jquery.mobile.config
define(['jquery'], function (jq) {
jq(document).on("mobileinit", function () {
jq.mobile.ajaxEnabled = false;
jq.mobile.linkBindingEnabled = false;
jq.mobile.hashListeningEnabled = false;
jq.mobile.pushStateEnabled = false;
});
});
Picture of the output:
The results are the same with or without the jqm config file. If you need any more information, please feel free to leave a comment :)
CSS file corresponding to the JQM file is missing in the code.
Add CSS file and it should work because "data-role" works as a CSS selector.
I'm trying to print an alert with Cordova and it only works if I emulate my app with Ripple Chrome extension.
In my Samsung Galaxy S3, nothing happens when I click the button.
I'm using Cordova 3.6.3-0.2.13.
I've added to my project the following plugins:
org.apache.cordova.dialogs and
org.apache.cordova.vibration.
(if I type "cordova plugins ls" they both appear)
<html>
<head>
<script type="text/javascript" charset="utf-8">
function getInfo() {
navigator.notification.alert(
'Model: ' + device.model, // message
null, // callback
'Info', // title
'Ok' // buttonName
);
}
</script>
<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" />
<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>
<button id="gobutton" type="button" onclick="getInfo()">CLICK ME</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
While my index.js is:
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
Could you help me? Thanks in advance
Dawson's comment should work.
As you can see at the Cordova documentation page:
http://docs.phonegap.com/en/2.2.0/cordova_notification_notification.md.html#notification.alert
The code:
navigator.notification.alert
is AFTER loading the cordova library.
i have downloaded plugin FileOpener
and added in m,y project like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>sample</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" href="css/adidas.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/data_en.js"></script>
<script src="js/data_sp.js"></script>
<script src="js/adidas.js"></script>
<script src="js/cordova.js"></script>
<script src="js/video.js"></script>
<script src="js/fileopener.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" class="my-page" id="video">
<video id="video_player" src="#" controls="controls"></video>
</div>
</body>
in js file
$(document).on('pagebeforeshow',"#video", function () {
var xyz = document.getElementById('video_player');
alert("values xyz:" + xyz);
var x = window.plugins.fileOpener.open("file:///android_asset/www/videos/1974.mp4");
xyz.src = window.plugins.fileOpener.open("file:///android_asset/www/balls/1970.png");
alert("opener:" + x);
window.plugins.videoPlayer.play(x);
alert("xyz after src:" + xyz);
});
i am failed to open any video file/ images from assets/www/videos/abcd.mp4 and similar for images
now everything is working fine but this is alert when trying to hit play button :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>sample</title>
<script src="js/cordova.js"></script>
<script src="js/video.js"></script>
<script src="js/fileopener.js"></script>
<script src="js/ADD_ANY_JQUERY.MIN.JS"></script>
<script>
function openFile(filePath)
{
window.plugins.fileOpener.open(filePath);
}
</script
</head>
<body>
<div data-role="page" data-theme="a" class="my-page" id="video">
<img src="img/b_img1.png" onclick="openFile('file:///android_asset/www/videos/1974.mp4')"/>
</div>
</body>
Edited
Fileopener.js will be like this:
cordova.define("cordova/plugin/fileopener",
function(require, exports, module) {
var exec = require("cordova/exec");
var FileOpener = function () {};
FileOpener.prototype.open = function(url) {
exec(null, null, "FileOpener", "openFile", [url]);
};
FileOpener.prototype.setTAG = function(tag) {
exec(null, null, "FileOpener", "setTAG", [tag]);
};
var fileOpener = new FileOpener();
module.exports = fileOpener;
});
/**
* Load Plugin
*/
if (!window.plugins) {
window.plugins = {};
}
if (!window.plugins.fileOpener) {
window.plugins.fileOpener = cordova.require("cordova/plugin/fileopener");
}
"js/ADD_ANY_JQUERY.MIN.JS"
in this line add a any jquery.min.js
Lastly check that Cordova.js folder is in your js folder of your application.. And let me know if it is not working what's your logcat saying...
i was using cordova 2.9.0 , jquery 1.9.1 ,jqm-1.3.2 and android-sdk-version:14 after adding code i was getting error:logcat is:
01-06 19:36:53.132: D/PluginManager(9420): exec() call to unknown plugin: FileOpener
01-06 19:36:53.202: D/CordovaLog(9420): file:///android_asset/www/js/fileopener.js: Line 20 : Class not found
01-06 19:36:53.202: I/Web Console(9420): Class not found at file:///android_asset/www/js/fileopener.js:20
the solution of this problem is i have done mistake in config.xml and in plugin.xml:
config.xml replace this:
<feature name="videoplayer">
<param name="android-package" value= "com.adidas.football.app.videoPlayer.VideoPlayer"/>
</feature>
with:
<feature name="VideoPlayer">
<param name="android-package" value= "com.adidas.football.app.videoPlayer.VideoPlayer"/>
</feature>
plugin.xml replace this:
<plugin name="videoplayer" value= "com.adidas.football.app.videoPlayer.VideoPlayer"/>
with:
<plugin name="VideoPlayer" value= "com.adidas.football.app.videoPlayer.VideoPlayer"/>
a minor mistake of CAPITAL LETTER but it removes all error and finally i have no error except last one alert which i added in my edited question "cannot play video"