I'm new to android programming and I'm trying to use Phonegap and jQuery Mobile.
I have configured Eclipse, Android SDK and Phonegap and this is working correctly but I have trouble with jQuery.
Here is my test page for jQuery:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
$('#title2').html('THIS WORK');
deviceReadyDeferred.resolve();
}
$(document).one("mobileinit", function () {
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
function doWhenBothFrameworksLoaded() {
$('#title2').html('THIS WORK');
}
</script>
</head>
<body>
<table width=100% height="50" border ="0">
<tr>
<td>
<div id="title">TEST</div>
<div id="title2">TEST2</div>
</td>
</tr>
</table>
</body>
</html>
I expected to get "TEST2" replace by "THIS WORK" but this is not the case when I launch the Android emulator.
May someone help me to find out what I'm doing wrong?
Thanks a lot for your help
Best Regards.
Florent
I confirm that I missed to include jQuery library.
Adding it solved my issue:
<script type="text/javascript" charset="utf-8" src="jquery-1.8.3.js"></script>
Related
I'm making an app in cordova. I've installed some plugins, but problem is that I cannot use those plugins as when I try to call them like window.plugins.googleplus.login then it says property 'plugins' does not exists on window. So I searched from solution and they said use window['plugins'] I tried that too, but now it says undefined.
I tried cordova plugins ls and it lists all my plugins. Also checked available plugins in android.json, all plugins are there. Can anyone help me why it is undefined? My index.html looks like below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scrmbl</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<base href="./">
<script type=”text/javascript” src="cordova.js"></script>
</head>
<body>
<app-root>
<center>
<div style="margin-top: 200px;">
<img src="./assets_v2/images/icon.png" alt="" >
<br><br>
<img src="./assets_v2/images/preloader.gif" alt="">
</div>
</center>
</app-root>
</body>
</html>
Any help will be highly appreciated.
cordova --version
8.0.0
I think you are calling it without deviceready. None of the googleplus methods should be called before deviceready has fired. The plugin should be called when everything's ready for the plugin to be called.
Example:
document.addEventListener('deviceready', deviceReady, false); function deviceReady() {
console.log('Device is ready!'); window.plugins.googleplus.trySilentLogin(...); }
Reference visit here
I have just started working with phone gap and I am experiencing some issues. As I understand there have been some recent updates to phone gap so some of the info is a bit out dated.
I am trying to play an MP4 video stream.
I have tried this on both Windows 7 and Linux Ubuntu Server. Currently I am working with Ubuntu 14.04 Server and Bluestacks Android Emulator on Windows.
I followed the following install guide: http://dasunhegoda.com/installrun-phonegap-ubuntu/797/
I then created my app like so:
cd /root
phonegap create myapp
cd myapp
I have then tried to install the video player using:
phonegap plugin add https://github.com/moust/cordova-plugin-videoplayer.git
This install some directories in the plugins directory.
I have then modified the index.html file of www to the following between the body tags
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device MY APP</p>
<p class="event received">Device is Ready MY APP</p>
<p>Play File Now<p/>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function playVideo(vidUrl)
{
VideoPlayer.play(
vidUrl,
{
volume: 0.5,
//scalingMode: VideoPlayer.SCALING_MODE.SCALE_TO_FIT_WITH_CROPPING
},
function () {
console.log("video completed");
},
function (err) {
console.log(err);
}
);
}
</script>
</body>
Whenever I try to click the play video link I can see in the console VideoPlayer not defined. I am accessing the app using the phone gap app on my Bluestack Android emulator. I have however, used jsconsole.com to log issues in the code, so I also have this in the head
<script src="http://jsconsole.com/remote.js?C2624EAC-3434-46D2-A3C5-C57D1C5584C8"></script>
I cannot see further instruction regarding installing the plugin, it seems the one command should be sufficient. Many people mention adding features to the config.xml file. I however do not have /res/xml/config.xml, I only seem to have one config file outside off www in the project root.
Can anyone point me in the right direction?
Update
Full index.html
<!DOCTYPE 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 -->
<script src="http://jsconsole.com/remote.js?4AF41FCD-34CB-482B-ADD9-D966BB408076"></script>
<!-- <script type="text/javascript" src="js/VideoPlayer.js"></script>-->
<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>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<p>Play File Now<p/>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="js/VideoPlayer.js"></script>-->
<script type="text/javascript">
app.initialize();
function init()
{
console.log("Trying to show uuid");
var uuid = device.uuid;
console.log("UUID is: " + uuid);
play_video("http://techslides.com/demos/sample-videos/small.mp4");
}
function play_video(URL)
{
VideoPlayer.play(URL);
}
</script>
</body>
Use this Plugin for Play Video.
Try to install from below git link.
cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git
Then create function for Play Video.
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
Call this funciton to your button div.
<p>Play File Now<p/>
Copy JS File from plugin folder to your JS folder.
And modify in your Index.html.
<script src="js/video.js"></script>
For reference you can check below link.
https://github.com/dawsonloudon/VideoPlayer
Edit 1:
Modify your VideoPlayer.js file as below.
cordova.define("cordova/plugin/videoplayer",
function(require, exports, module) {
var exec = require("cordova/exec");
var VideoPlayer = function () {};
/**
* Starts the video player intent
*
* #param url The url to play
*/
VideoPlayer.prototype.play = function(url) {
exec(null, null, "VideoPlayer", "playVideo", [url]);
};
var videoPlayer = new VideoPlayer();
module.exports = videoPlayer;
});
if (!window.plugins) {
window.plugins = {};
}
if (!window.plugins.videoPlayer) {
window.plugins.videoPlayer = cordova.require("cordova/plugin/videoplayer");
}
Edit 2
Modify your Index.html Give it a try.
Add js file before head tag completion as below.
<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/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/VideoPlayer.js"></script>
<title>Hello World</title>
</head>
And also change play_video function as below.
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
It is working for me well in my app.
Hope this will help you.
I'm have trouble using the widget dojox.mobile.TextBox in my Android app.
Here is the simple html file:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="dojo/dojox/mobile/themes/custom/custom.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="js/cordova-2.6.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
}
</script>
</head>
<body onload="onLoad();">
<div>
<input data-dojo-type="dojox.mobile.TextBox" placeHolder="Enter LAST name" />
</div>
<script type="text/javascript" charset="UTF-8" src="dojo/dojo/dojo.js" ></script>
<script type="text/javascript" charset="UTF-8">
// Load the widget parser and mobile base
require([
"dojox/mobile/parser",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile",
"dojox/mobile/TextBox"
], function(parser, deviceTheme) {
// Parse the page for widgets!
parser.parse();
});
</script>
</body>
</html>
And Here is the error I get:
06-04 15:22:52.304: E/Web Console(28791): Uncaught Error: declare dojox.mobile.TextBox: mixin #1 is unknown. Did you use dojo.require to pull it in? at file:///android_asset/www/dojo/dojo/dojo.js:15
I also tried with dojox.mobile.app.TextBox but then I get:
06-04 15:46:16.192: E/Web Console(29566): Uncaught TypeError: Cannot read property 'dynamic' of undefined at file:///android_asset/www/dojo/dojo/dojo.js:15
I made sure I have the last version of dojo.
If anybody has an answer it would really help me.
Thanks.
I would start by moving:
<script type="text/javascript" charset="UTF-8" src="dojo/dojo/dojo.js" ></script>
<script type="text/javascript" charset="UTF-8">
// Load the widget parser and mobile base
require([
"dojox/mobile/parser",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile",
"dojox/mobile/TextBox"
], function(parser, deviceTheme) {
// Parse the page for widgets!
parser.parse();
});
into the head tag area and add "dojo/domReady!" to you dojo require block. You should probably add another thing in the head to configure dojo properly:
<script>dojoConfig = {
async: true,
parseOnLoad: true
}
</script>
You should study all the examples located here:
http://download.dojotoolkit.org/release-1.9.0/dojo-release-1.9.0/dojox/mobile/tests/
So i've gotten jQuery 1.8.2 working with Phonegap no problem, but as soon as I add in jquery.mobile.1.2.0, the default Phonegap example breaks. the deviceready event stops firing.
index.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" 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>
</div>
<input type="text" name="firstname" id="firstname" />
Say Hello
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function displayHello(){
var name = document.getElementById("firstname").value;
navigator.notification.alert("My name is "+ name);
}
</script>
</body>
</html>
index.js
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 explicity 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);
}
};
So this is the default code example Phonegap comes with, and i've only added
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
in index.html.
Not sure what is going on as it seems other people have gotten Phonegap and jQuery Mobile to work just fine together.
I've tried dumbing the js down and just calling the deviceready event.
And I've tried following this solution and the other posted below it to no avail.
Correct way of using JQuery-Mobile/Phonegap together?
But the same thing happens. With jQuery Mobile deviceready never fires, without it, it fires fine.
Any help would be appreciated! Maybe i'm just missing something simple here.
I have also tried different version combinations of jQuery and jQuery Mobile with no luck.
I was running the Android Phonegap version and cordova-2.3.0. I recently tried upgrading to cordova-2.4.0 to see if that would help but nothing...
Update: No errors are thrown in the LogCat/DDMS
I had the same issue a while ago and I ended up throwing out the launcher of phonegap.
I suggest doing it like so :
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// your functions here
}
</script>
I hope it helps
Try putting scripts above jquery mobile library.:
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function displayHello(){
var name = document.getElementById("firstname").value;
navigator.notification.alert("My name is "+ name);
}
</script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
updates:
<script type="text/javascript">
$(document).on('pageinit', function($){
app.initialize();
});
</script>
I noticed that the browser does not work, but using the emulator or PhoneGap build ondeviciready event and the same example works!
I had the exact same problem even after adding the libraries to the head, but as soon as I moved cordova.js below jquery-mobile, deviceready started firing again.
<head>
<script type="text/javascript" src="jqueryMobile/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jqueryMobile/jquery.mobile-1.4.3.min.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>
</head>
I followed official Sencha learning tutorial to setup my first phonegap app with sencha touch give on this link.
And here's my index.html code -
<!DOCTYPE html>
<html>
<head>
<title>Contacts</title>
<script type="text/javascript" src="lib/touch/sencha-touch-debug.js"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="cordova-1.8.1.js"></script>
<script type="text/javascript">
/* Ext.application({
name : "DemoApp",
launch : function() {
console.log("App launch");
}
}); */
</script>
<script type="text/javascript">
document.addEventListener("deviceready", DemoApp.launch, false);
</script>
</head>
<body>
</body>
</html>
And my app/app.js contains -
Ext.application({
name: 'DemoApp',
launch: function() {
this.launched = true;
this.mainLaunch();
},
mainLaunch: function() {
if (!device || !this.launched) {return;}
console.log('mainLaunch');
}
});
All the paths to the script are absolutely correct but still I get following error.
Uncaught ReferenceError: DemoApp is not defined at file:///android_asset/www/index.html:19
I also tried putting app.js in index.html itself but above error still persists. Sencha js and css are included correctly as I'm not getting any error regarding Ext not defined etc etc.
What else could be the reason. Any help is highly appreciated.
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="cordova-1.8.1.js"></script>
should be
<script type="text/javascript" src="cordova-1.8.1.js"></script>
<script type="text/javascript" src="app/app.js"></script>