Develop Reference

What is wrong with fileOpener2?

This question is edit for better undersatnding:
I am trying to use the cordova fileOpener2 plugin to open pdf files in my app's assets.
I obtain the file's uri thanks to lines 14 and onward of code below.
The uri is then stored as a varialbe (nonencodeduri).
However when I try to use the variable in the second part of the code where FileOpener2 needs the path to the file (from line 58), it stalls.
This is surprising because if I write hardcode the path to the same file line 58 (var uri = var uri = encodeURI("path to file in the assets of the app"), it works.
Thanks for helping me resolve this.
Here is the full code (credits: Ghandi)
var entry, documentname, documentid, referenceID, callLogID, filePath, blob,cdr,fileObject;
var filename = "test.pdf";
$(document).ready(function() {
document.addEventListener("deviceready", onDeviceReady, false);
});
var fileURL = "";
var imagePath = "";
function onDeviceReady() {
sessionStorage.platform = device.platform;
var fileTransfer = new FileTransfer();
$('a[href$=\\.pdf]').click(function()
{
try {
alert('Hi boys');
var urinonencoded = this.href;
alert(urinonencoded + ' and voila');
if (sessionStorage.platform.toLowerCase() == "android") {
window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory,onFileSystemSuccess, onError);
}
else {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,onFileSystemSuccess, onError);
}
}
catch(err) {
alert("ER - " + err.message);
}
});
function onError(e) {
alert("onError");
};
function onFileSystemSuccess(fileSystem) {
var entry="";
if (sessionStorage.platform.toLowerCase() == "android") {
entry=fileSystem;
}
else {
entry=fileSystem.root;
}
entry.getDirectory("Cordova", {create: true, exclusive: false}, onGetDirectorySuccess, onGetDirectoryFail);
};
function onGetDirectorySuccess(dir) {
dir.getDirectory("Sample_App", {create: true, exclusive: false}, onGetDirectorySuccess1, onGetDirectoryFail);
};
function onGetDirectorySuccess1(dir) {
cdr = dir;
dir.getFile(filename,{create:true, exclusive:false},gotFileEntry, errorHandler);
};
function gotFileEntry(fileEntry) {
/*var uri = encodeURI(myref);*/
var uri = urinonencoded;
alert (uri);
alert("dest - " + cdr.nativeURL+filename);
fileTransfer.download(uri,cdr.nativeURL+filename,
function(entry) {
openFile();
},
function(error) {
alert("download error source " + error.source);
alert("download error target " + error.target);
alert("upload error code" + error.code);
alert("error");
},
true);
};
function openFile() {
alert("URL - " + cdr.nativeURL+filename);
cordova.plugins.fileOpener2.open(
cdr.nativeURL+filename,
'application/pdf',
//'text/plain',
{
error : function(e) {
alert('Error status: ' + e.status + ' - Error message: ' + e.message);
},
success : function () {
}
}
);
};
function onFileSystemSuccessDelete(fileSystem) {
var entry="";
if (sessionStorage.platform.toLowerCase() == "android") {
entry=fileSystem;
}
else {
entry=fileSystem.root;
}
entry.getDirectory("Cordova/Sample_App", {create: true, exclusive: false}, onGetDirectorySuccessDelete, onGetDirectoryFail);
};
function onGetDirectorySuccessDelete(dir) {
dir.getFile(filename,{create: true, exclusive:false},gotFileEntryDelete, fail);
};
function gotFileEntryDelete(fileEntry) {
fileEntry.remove();
var uri = encodeURI("http://SERVER_IP:PORT/test.pdf");
fileTransfer.download(uri,cdr.nativeURL+filename,
function(entry) {
console.log("download complete: " + entry.toURL());
openFile();
},
function(error) {
alert("download error source " + error.source);
alert("download error target " + error.target);
alert("upload error code" + error.code);
alert("error");
},
true);
};
function fail(error){
alert("ec - " + error.code);
};
function errorHandler(e) {
var msg = '';
switch (e.code) {
case FileError.QUOTA_EXCEEDED_ERR:
msg = 'QUOTA_EXCEEDED_ERR';
break;
case FileError.NOT_FOUND_ERR:
msg = 'NOT_FOUND_ERR';
break;
case FileError.SECURITY_ERR:
msg = 'SECURITY_ERR';
break;
case FileError.INVALID_MODIFICATION_ERR:
msg = 'INVALID_MODIFICATION_ERR';
break;
case FileError.INVALID_STATE_ERR:
msg = 'INVALID_STATE_ERR';
break;
default:
msg = e.code;
break;
};
alert("Msg - " + msg);
};
function onGetDirectoryFail(error) {
alert("onGetDirectoryFail");
};
$('#delete').click(ClearDirectory);
function ClearDirectory() {
alert("delete");
if (sessionStorage.platform.toLowerCase() == "android") {
window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory,onFileSystemDirSuccess, fail);
}
else {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,onFileSystemDirSuccess, fail);
}
}
function onFileSystemDirSuccess(fileSystem) {
var entry = "";
if (sessionStorage.platform.toLowerCase() == "android") {
entry=fileSystem;
}
else {
entry=fileSystem.root;
}
entry.getDirectory("Cordova",{create : true, exclusive : false},
function(entry) {
entry.removeRecursively(function() {
console.log("Remove Recursively Succeeded");
}, fail);
}, getDirFail);
}
function getDirFail(error){
alert("getDirFail - " + error.code);
};
}
I used:
<script>
$('a[href$=\\.pdf]').click(function() {
var myuri = this.href ;
alert(this.href);
/*alert just to make sure I got the right uri (which works fine)*/
cordova.plugins.fileOpener2.open(
'this.href', // You can also use a Cordova-style file uri: cdvfile://localhost/persistent/Download/starwars.pdf
'application/pdf',
{
error : function(e)
{
alert('Error status: ' + e.status + ' - Error message: ' + e.message);
},
success : function ()
{
alert('file opened successfully');
}
}
);
return false;
});
</script>
and it hangs (i have the plugin declared in the config.xml file and present in the assets.
Can you pinpoint my error(s)?
Many thanks

Basically the issue is with the way you pass the file path paramter you pass to fileopener's open function and nothing wrong with the plugin as such.
If you pass this object inside single quote like 'this.href', it will be treated as a plain string and that's the issue. So you can use the approach as Joerg suggested in his answer.
Do check out this basic working sample app that demonstrates Cordova file operations. It should help you get started.

'this.href' is wrong, try it this way:
$('a[href$=\\.pdf]').click(function () {
var myuri = this.href;
alert(this.href);
/*alert just to make sure I got the right uri (which works fine)*/
cordova.plugins.fileOpener2.open(
myuri, // You can also use a Cordova-style file uri: cdvfile://localhost/persistent/Download/starwars.pdf
'application/pdf',
{
error: function (e) {
alert('Error status: ' + e.status + ' - Error message: ' + e.message);
},
success: function () {
alert('file opened successfully');
}
}
);
return false;
});

To sum up the answers for this complex problem:
first: fileopener2 will not work on its own, it needs other plugins to fit the purpose of opening pdf files on android. The other plugins needed are mentioned in Gandhi's excellent demo app available here.
Second: it is esssentiel to use Gandhi's app.js file that combines the different calls to plugins.
Third there are a number of functions involved in that file. In it the path is hard-coded, so everything seems to work well. But if you must use a dynamic path, then it must be stated globally (in other words, do not use "var" but simply myvar = this.href.
Although I found the last bits on my own, all the credit goes to Gandhi's excellent demo app which is a treasure trove for new plugin users he made available on github. +1 :-)

Push Notification in status bar Android Cordova

I have this code in "index.js" file.
Communication takes place , show me thenotification , but how can I do to display the notification in the status bar when the app is closed ? Thanks for the help.
var pushNotification;
function onDeviceReady() {
$("#app-status-ul").append('<li>deviceready event received</li>');
document.addEventListener("backbutton", function(e)
{
$("#app-status-ul").append('<li>backbutton event received</li>');
if( $("#home").length > 0)
{
// call this to get a new token each time. don't call it to reuse existing token.
//pushNotification.unregister(successHandler, errorHandler);
e.preventDefault();
navigator.app.exitApp();
}
else
{
navigator.app.backHistory();
}
}, false);
try
{
pushNotification = window.plugins.pushNotification;
$("#app-status-ul").append('<li>registering ' + device.platform + '</li>');
if (device.platform == 'android' || device.platform == 'Android' || device.platform == 'amazon-fireos' ) {
pushNotification.register(successHandler, errorHandler, {"senderID":"615604299101","ecb":"onNotification"}); // required!
} else {
pushNotification.register(tokenHandler, errorHandler, {"badge":"true","sound":"true","alert":"true","ecb":"onNotificationAPN"}); // required!
}
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.message + "\n\n";
alert(txt);
}
}
// handle GCM notifications for Android
function onNotification(e) {
$("#app-status-ul").append('<li>EVENT -> RECEIVED:' + e.event + '</li>');
switch( e.event )
{
case 'registered':
if ( e.regid.length > 0 )
{
$("#app-status-ul").append('<li>REGISTERED -> REGID:' + e.regid + "</li>");
// Your GCM push server needs to know the regID before it can push to this device
// here is where you might want to send it the regID for later use.
console.log("regID = " + e.regid);
}
break;
case 'message':
// if this flag is set, this notification happened while we were in the foreground.
// you might want to play a sound to get the user's attention, throw up a dialog, etc.
if (e.foreground)
{
$("#app-status-ul").append('<li>--INLINE NOTIFICATION--' + '</li>');
// on Android soundname is outside the payload.
// On Amazon FireOS all custom attributes are contained within payload
var soundfile = e.soundname || e.payload.sound;
// if the notification contains a soundname, play it.
// playing a sound also requires the org.apache.cordova.media plugin
var my_media = new Media("/android_asset/www/"+ soundfile);
my_media.play();
}
else
{ // otherwise we were launched because the user touched a notification in the notification tray.
if (e.coldstart)
$("#app-status-ul").append('<li>--COLDSTART NOTIFICATION--' + '</li>');
else
$("#app-status-ul").append('<li>--BACKGROUND NOTIFICATION--' + '</li>');
}
$("#app-status-ul").append('<li>MESSAGE -> MSG: ' + e.payload.message + '</li>');
//android only
$("#app-status-ul").append('<li>MESSAGE -> MSGCNT: ' + e.payload.msgcnt + '</li>');
//amazon-fireos only
$("#app-status-ul").append('<li>MESSAGE -> TIMESTAMP: ' + e.payload.timeStamp + '</li>');
break;
case 'error':
$("#app-status-ul").append('<li>ERROR -> MSG:' + e.msg + '</li>');
break;
default:
$("#app-status-ul").append('<li>EVENT -> Unknown, an event was received and we do not know what it is</li>');
break;
}
}
function tokenHandler (result) {
$("#app-status-ul").append('<li>token: '+ result +'</li>');
// Your iOS push server needs to know the token before it can push to this device
// here is where you might want to send it the token for later use.
}
function successHandler (result) {
$("#app-status-ul").append('<li>success:'+ result +'</li>');
}
function errorHandler (error) {
$("#app-status-ul").append('<li>error:'+ error +'</li>');
}
document.addEventListener('deviceready', onDeviceReady, true);

It should appear with this code. Are you sending the notification with message and title? If they are missing, the notification doesn't appears

The notification shows in the status bar when the app is closed or inactive
if (e.coldstart)
// Your code when the user clicks on the notification.
}

My cordova application don't want to run, I don't know why

I'm developing an application in Cordova. This app should be able to capture a video when you press the capture button, and then upload it on a specific server.
But I have a problem with the capture API. When I run it on emulator or a physical device, nothing happens, and on ripple, an error is returned.
My HTML code is here
<div class="button">
<div class="button1">
<button id="captureVideo" class="btn btn-lg btn-primary">launch a capture</button>
</div>
</div>
And my js
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("captureVideo").addEventListener("click", function () {
document.addEventListener("deviceready", onDeviceReady, false);
});
})
function onDeviceReady() {
console.log(navigator.device.capture);
navigator.device.capture.captureVideo(captureSuccess, captureError, { limit: 1 });
console.log("Record launched !");
}
// Called when capture operation is finished
function captureSuccess(mediaFiles) {
navigator.notification.alert("Capture Success");
/*var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}*/
}
// Called if something bad happens
function captureError(error) {
navigator.notification.alert("Capture failed");
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
// Upload files to server
/*function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
ft.upload(path,
"http://my.domain.com/upload.php",
function (result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
},
function (error) {
console.log('Error uploading file ' + path + ': ' + error.code);
},
{ fileName: name });
}*/
Thanks a lot for your answer :)
As demanded, I put my code directly here instead of pastebin.

Finally found ! It was cause my plugin wasn't loaded in the app.

"Error: A reference already exists for the specified id" how do I hide/fix this alert?

I'm developing a music app and if I were to go onto the page where you can play sounds, leave that page and then immediately revisit I get this error.
I've googled the problem and I can't seem to find anything similar at all.
I'm using the cordova media player and LowLatencyAudio plugin for my application.
Below is the code on the specified page and an image of the error I receive.
Any help would be greatly appreciated as I'm well and truly stuck!
<div class="drum" id="bass" ontouchstart="play('bass');" ontouchend="touchEnd(event);">Bass</div>
<div class="drum" id="highhat" ontouchstart="play('highhat');" ontouchend="touchEnd(event);">High Hat</div>
<div class="drum" id="snare" ontouchstart="play('snare');" ontouchend="touchEnd(event);">Snare</div>
<div class="drum" id="bongo" ontouchstart="play('bongo');" ontouchend="touchEnd(event);">Bongo</div>
<script type="text/javascript">
var lla;
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
if( window.plugins && window.plugins.LowLatencyAudio ) {
lla = window.plugins.LowLatencyAudio;
lla.preloadFX('assets/bass.mp3', 'assets/bass.mp3', function(msg){}, function(msg){ alert( 'Error: ' + msg ); });
lla.preloadFX('assets/snare.mp3', 'assets/snare.mp3', function(msg){}, function(msg){ alert( 'Error: ' + msg ); });
lla.preloadFX('assets/highhat.mp3', 'assets/highhat.mp3', function(msg){}, function(msg){ alert( 'Error: ' + msg ); });
lla.preloadFX('assets/bongo.mp3', 'assets/bongo.mp3', function(msg){}, function(msg){ alert( 'Error: ' + msg ); });
}
}
function play(drum) {
document.getElementById(drum).className = 'drum touched';
lla.play('assets/' + drum + '.mp3');
}
function touchEnd(event) {
event.target.className = 'drum';
}
</script>
Error: A reference already exists for the audio id.

It looks like it is having an issue with lla.preloadFX being called for the same asset more than once. After reading the plugin doc, and the actual java code, This error is real a warning/notice and not an error. I have reformatted my example to show how I would ignore this message as it will not affect your application.
Here is an example:
function onDeviceReady() {
if( window.plugins && window.plugins.LowLatencyAudio) {
lla = window.plugins.LowLatencyAudio;
lla.preloadFX('assets/bass.mp3', 'assets/bass.mp3', function(msg){}, function(msg){ if(msg != 'A reference already exists for the specified audio id.') { alert( 'Error: ' + msg ); } });
}
}
Using this code, you will see an error if there is a 'real' error, otherwise it will ignore the message about the resource already being loaded. This should resolve the issue.

actually deviceready event call function lla.preloadFX whenever you start the Application and preloadFx() try to load asset again those already loaded. so you can unload the assets on application exit by just handling backbutton event.
function onBodyLoad() {
document.addEventListener("backbutton", onBackButton, false);
}
function onBackButton() {
var assets=['bass','snare','highhat','bongo'];
for (x in assets) {
lla.unload(assets[x], function (msg) {}, function (msg) {});
}
navigator.app.exitApp();
}

Converting an MVC4 Web API Application to Phonegap Android Application

I have an MVC4 Web API application where i have my Api Controller and Code-First EF5 database and some JavaScript functions for the functionality of my app including my Ajax Calls for my Web Api Service.I did the project on MVC because i was having trouble installing Cordova in VS2012, so i have decided to use Eclipse/Android Phonegap platform.Is there a way where i can call my web api service and be able to retrieve my database data designed EF5(MVC4) in my Android Phonegap application without having to start from the beginning the same thing again.I know phonegap is basically Html(JavaScript and Css) but i am having trouble calling my service using the same HTML markup that i used MVC4.I am a beginner please let me know if what i am doing is possible and if not please do show me the light of how i can go about this. T*his is my Html code*
<script type="text/javascript" charset="utf-8" src="phonegap-2.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="barcodescanner.js"></script>
<script type="text/javascript" language="javascript" src="http://api.afrigis.co.za/loadjsapi/?key=...&version=2.6">
</script>
<script type="text/javascript" language="javascript">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
//initialize watchID Variable
var watchID = null;
// device APIs are available
function onDeviceReady() {
// Throw an error if no update is received every 30 seconds
var options = { timeout: 30000 };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'<hr />' + element.innerHTML;
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
}
//declare a global map object
var agmap = null;
// declare zoom control of map
var zoomCtrl = null;
function initAGMap() {
agmap = new AGMap(document.getElementById("MapPanel"));
//TODO: must retrieve coords by device location not hard corded.
agmap.centreAndScale(new AGCoord(-25.7482681540537, 28.225935184269), 5); // zoom level 5 heres
// making zoom controls for map
var ctrlPos = new AGControlPosition(new AGPoint(10, 10), AGAnchor.TOP_LEFT);
zoomCtrl = new AGZoomControl(1);
agmap.addControl(zoomCtrl, ctrlPos);
}
function removeZoomCtrl()
{
zoomCtrl.remove();
}
//function search() {
// var lat = $('#latitude').val();
// var long = $('#longitude').val();
// $.ajax({
// url: "api/Attractions/?longitude=" + long + "&latitude=" + lat,
// type: "GET",
// success: function (data) {
// if (data == null) {
// $('#attractionName').html("No attractions to search");
// }
// else {
// $('#attractionName').html("You should visit " + data.Name);
// displayMap(data.Location.Geography.WellKnownText, data.Name);
// }
// }
// });
//}
//function GetCoordinate() {
//todo: get details from cordova, currently mocking up results
//return { latitude: -25.5, longitude: 28.5 };
}
function ShowCoordinate(coords) {
agmap.centreAndScale(new AGCoord(coords.latitude, coords.longitude), 5); // zoom level 5 here
var coord = new AGCoord(coords.latitude, coords.longitude);
var oMarker = new AGMarker(coord);
agmap.addOverlay(oMarker);
oMarker.show();
//todo: create a list of places found and display with marker on AfriGIS Map.
}
function ScanProduct()
{
//todo retrieve id from cordova as mockup
//This is mockup barcode
//return "1234";
//sample code using cordova barcodescanner plugin
var scanner = cordova.require("cordova/plugin/BarcodeScanner");
scanner.scan(
function (result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
//Callback function if barcodedont exist
function (error) {
alert("Scanning failed: " + error);
});
}
//Function to display Success or error in encoding.
function encode(type, data) {
window.plugins.barcodeScanner.encode(type, data, function(result) {
alert("encode success: " + result);
}, function(error) {
alert("encoding failed: " + error);
});}
function GetProductDetails(barcodeId,coords)
{
//Ajax Call to my web Api service
$.getJSON("api/products/?barcodeId=" + barcodeId + "&latitude=" + coords.latitude + "&longitude=" + coords.longitude)
.done(function (data) {
$('#result').append(data.message)
console.log(data)
var list = $("#result").append('<ul></ul>').find('ul');
$.each(data.results, function (i, item)
{
if (data.results == null) {
$('#result').append(data.message)
}
else {
list.append('<li>ShopName :' + item.retailerName + '</li>');
list.append('<li>Name : ' + item.productName + '</li>');
list.append('<li>Rand :' + item.price + '</li>');
list.append('<li>Distance in Km :' + item.Distance + '</li>');
//Another Solution
//var ul = $("<ul></ul>")
//ul.append("<li> Rand" + data.results.productName + "</li>");
//ul.append("<li> Rand" + data.results.Retailer.Name + "</li>");
//ul.append("<li> Rand" + data.results.price + "</li>");
//ul.append("<li> Rand" + data.results.Distance + "</li>");
//$("#result").append(ul);
}
});
$("#result").append(ul);
});
}
function ShowProductDetails()
{
//todo: display product details
//return productdetails.barcodeId + productdetails.retailerName + ': R' + productdetails.Price + productdetails.Distance;
}
//loading javascript api
$(function () {
initAGMap();
var coord = GetCoordinate();
ShowCoordinate(coord);
var barcodeId = ScanProduct();
var productdetails = GetProductDetails(barcodeId, coord);
ShowProductDetails(productdetails);
});
</script>

It looks like you're on the right track. The obvious error right now is that it's using a relative URL (api/products/?barcodeId=) to call the Web API. Because the HTML is no longer hosted on the same server as the Web API (even though you might be running them both on your local machine still), this won't work anymore. You need to call the service with an absolute URL (for example, http://localhost:8888/api/products/?barcodeId=).
Where is your Web API hosted right now and how are you running the Cordova code? If the Web API is up and running on your local machine and your Cordova app is running on an emulator on the same machine, you should be able to call the service by supplying its full localhost path.
If it still doesn't work, you'll need to somehow debug the code and see what the errors are.