We Keep Coding

pdf document opening issue with angularjs mobile app. with cordova build

Currently i am working on opening pdf document in angularjs w.r.t. desktop/ mobile also.
i have followed this ref.:
Open a PDF in a new window of the browser with angularjs
there similar implementation i have done :
code is as follows
**$http.get('generatePdfUrl')
.then(function (data) { // data is your url
var file = new Blob([data], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
});**
even i have applied responsetype : 'arraybuffer' as well,
in the angularjs web application this url points to
blob://http://localhost:8080/126gyesdfsdfadjf,
its is opening pdf document properly with window.open(fileURL),
but the same is not working for the angularjs mobile application using cordova build,
there application url points out to blob:file///126gyesdfsdfadjf,
but unable to open pdf document,
can anybody have suggestions on this.
regars,
vasu.

For this, you need to install a plugin for opening the pdf document.
function writePDFToFile(fileName, data){
try{
window.resolveLocalFileSystemURL(cordova.file.externalApplicationStorageDirectory, function(directoryEntry){
directoryEntry.getFile(fileName, { create: true }, function(fileEntry){
fileEntry.createWriter(function(fileWriter){
fileWriter.onwriteend = function(e){
cordova.plugins.fileOpener2.open(cordova.file.externalApplicationStorageDirectory + fileName, 'application/pdf',{
error: function(e){
console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
},
success: function () {
console.log('file opened successfully');
}
});
};
fileWriter.onerror = function(e){
alert(e);
};
var blob = new Blob([data], { type: 'application/pdf' });
fileWriter.write(blob);
}, function onerror(e){
alert(e);
});
}, function onerror(e){
alert(e);
});
},function onerror(e){
alert(e);
});
}catch(e){
alert(e);
}
}
above implementation worked for me.
Check this link for plugin.

How can I put javascript variable into Url.Action

I have a post that work well when I run from VS2015 debug:
$("#DisplayChartType").bind("change", function () {
$.post("../Employee/ChangeDisplayChartType", { displayChartType: $("#DisplayChartType").val() }, function (data) {
iDependOnMyParameter(data);
})
});
But post does not work once I have published to IIS. I tried using ../, / and ~/ in the post but none work. I searched web and found the approach below but I still get ARG1 being sent as a parameter instead of my javascript variable.
$("#DisplayChartType").bind("change", function () {
$.post("#Html.Action("ChangeDisplayChartType", "Employee", new { displayChartType = "ARG1" })".replace("ARG1",$("#DisplayChartType").val()) , function (data) {
iDependOnMyParameter(data);
})
});
How should I do this? I really would like to stay with $.post approach as that works nicely in VS.

You can try this code.
$("#DisplayChartType").bind("change", function () {
var chartType = $("#DisplayChartType").val();
var url="#Url.Action("ChangeDisplayChartType", "Employee", new { displayChartType = "ARG1" })";
$.post(url.replace("ARG1", chartType), function (data) {
iDependOnMyParameter(data);
})
});

So add it to the url
$.post("../Employee/ChangeDisplayChartType?displayChartType=" + encodeURIComponent($("#DisplayChartType").val()), function(){});
or change your original code to GET and the value will be added to the querystring.

You can use window.location.origin or document.location.origin to get the origin of your website, whether running in VS 2015 debug or on IIS.
So instead of doing
$.post("../Employee/ChangeDisplayChartType"
You can try
$.post(document.location.origin + "/Employee/ChangeDisplayChartType"

#OJ Raqueno put me on the right path.
At top of script I now declare "myPath". My website URL ends with "secure" so this test gives me the right path:
var myPath = document.URL;
if (!myPath.endsWith("secure")) {
myPath = "";
}
Then I do this:
$("#DisplayChartType").bind("change", function () {
$.post(myPath + "/Employee/ChangeDisplayChartType", { displayChartType: $("#DisplayChartType").val() }, function (data) {
alert($("#DisplayChartType").val());
iDependOnMyParameter(data);
})
});

Cordova or phonegap : saving file catcher

I curently develop an app in javascript and I want to use cordova or phonegap to adapt my code to android, Iphone, etc. But in my app I save my file with this function :
function save(){
var myFileJSON = JSON.stringify(myFile);
try{
var blob = new Blob([myFileJSON], {type: "text/plain;charset=utf-8"});
saveAs(blob, "myFileJSON.txt");
} catch (e){
console.log('bug');
}
}
So with my phone application I want to save my file in a specific folder. Can I catch the save event and, for exemple, redirect immediately the path?

function saveCourseToFile() {
console.log("checkpoint 1");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFSSuccess, onFSError);
}
function onFSSuccess(fileSystem) {
console.log("checkpoint 2");
console.log("Opened file system: " + fileSystem.name);
fileSystem.root.getFile("readme.txt", {create:true, exclusive:false}, gotFileEntry, onFSError);
}
function gotFileEntry(fileEntry) {
console.log("checkpoint 3");
fileEntry.createWriter(gotFileWriter, onFSError);
}
function gotFileWriter(writer) {
writer.onwrite = function(evt) {
console.log("checkpoint 4: write success!");
};
writer.write("test test test");
}
You can also check this link for your reference.

Preloading all images using $ImageCacheFactory

I have created a mobile application using ionic framework.It contains many images.I need to load all the images with out flickering.So i used $ImageCacheFactory for preloading all the images by refering this blog.
I used below code.The problem is that app contains 100 png images,So i have to refer all the png files.
.run(function($ImageCacheFactory) {
$ImageCacheFactory.Cache([
"img/user.png",
"img/profile.png",
"img/logo.png",
"img/splash.png",
"img/map.png",
"img/shop.png",
"img/country.png",
"img/place.png"
]).then(function(){
console.log("Images done loading!");
},function(failed){
console.log("Error..!!!");
});
})
Is there any easy method for refering all the png images with single line code(All the images are in www/img folder).Thanks

Create an angular factory as follows
.factory("$fileFactory", function($q) {
var File = function() {};
File.prototype = {
getEntries: function(path) {
var deferred = $q.defer();
window.resolveLocalFileSystemURI(path, function(fileSystem) {
var directoryReader = fileSystem.createReader();
directoryReader.readEntries(function(entries) {
deferred.resolve(entries);
}, function(error) {
deferred.reject(error);
});
}, function(error) {
deferred.reject(error);
});
return deferred.promise;
}
};
return File;
});
Then to get list of all file using getEntries()
.run(function($ImageCacheFactory, $ionicPlatform, $fileFactory ) {
var fs = new $fileFactory();
$ionicPlatform.ready(function() {
fs.getEntries('img').then(function(result) {
var files = result;
files = files.unshift({
name: "[parent]"
}).map(function(i, v) {
return 'img/' + v.name;
});
$ImageCacheFactory.Cache(files).then(function() {
console.log("Images done loading!");
}, function(failed) {
console.log("Error..!!!");
});
})
});
});
You need to install dependencies Apache Cordova File
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git
Reference : Helpful tutorial

Im sorry i dont have a n answer yet. But i know why it isnt working.
Using a Web Browser
Don't do it. If you even attempt to open this project in a web browser you're setting yourself up for failure. This application uses native device plugins that the web browser is unfamiliar with. In turn this will give strangeness and errors.

How to change settings with Uploadify after control has already been created

I initialize Uploadify using the following code:
$('#file1').uploadifive({
'buttonClass': 'upload-btn',
'uploadScript': '/Upload/',
'fileObjName': 'files',
'fileType': 'text/xml',
'formData': { 'uploadType': 'Crew' },
'onUploadComplete': function(file, data) {
var results = $.parseJSON(data);
if (results.error) {
var info = file.queueItem.find('span.fileinfo');
if (info) info.text(' - ' + results.error);
return;
}
window.location.href = '#Url.Content("~/Upload/Checkdata/")' + results.id;
}
});
This works, however I need to modify the formData property when a radio checkbox changes. So, I've tried this:
$('input[name=UploadType]:radio').change(function () {
$('#file1').uploadifive({ 'formData': this.value });
});
However, when that code runs, it breaks the Uploadify control (it now no longer uploads anywhere). I'm guessing because it completely re-initializes the control with all new settings.
How can I update just this one setting? I've read the Uploadify docs and none of them say anything about updating settings; just initializing and calling methods. Thanks!

I've figured out one solution, but not sure if it's the right way to do things (i.e., it might break in future versions of Uploadify).
Basically, it appears you can keep a reference to your configuration around, and update that object at any time:
var uploadifySettings = {
'buttonClass': 'upload-btn',
'uploadScript': '/Upload/',
'fileObjName': 'files',
'fileType': 'text/xml',
'formData': { 'uploadType': 'Crew' },
'onUploadComplete': function(file, data) {
var results = $.parseJSON(data);
if (results.error) {
var info = file.queueItem.find('span.fileinfo');
if (info) info.text(' - ' + results.error);
return;
}
window.location.href = '#Url.Content("~/Upload/Checkdata/")' + results.id;
}
}
$('input[name=UploadType]:radio').change(function () {
uploadifySettings.formData.uploadType = this.value;
});
$('#file1').uploadifive(uploadifySettings);