I need to open a PDF in Angular, I have tried using pdf.js and pdf.combined.js directives but unable to display the data. My Angular ver - 1.4.8
Since it shouldn't have downloadable button or PDF URL visible.So i can't use google docs viewer or directly opening it as BLOB Object.
Can someone help me in solving this, sorry bit lengthy but any help is appreciated,Thanks !!
Code -
1) First controller which has method to open a modal window on click -
vm.getCallRates = function() {
ModalService.showModal({
templateUrl: absoluteURL('app/profile/tariff.html'),
inputs: {},
controller: 'tariffController'
});
}
2) tariff.html has a div with ng-pdf and controller like this -
<div ng-controller="tariffController">
<ng-pdf template-url="app/profile/pdfViewer.html" canvasid="pdf-canvas"
scale="1.5" ></ng-pdf>
</div>
3) tariffController -
(function () {
'use strict';
angular
.module('app.profile')
.controller('tariffController', tariffController);
tariffController.$inject = ['$scope'];
function tariffController($scope) {
$scope.pdfUrl = "http://172.16.23.26:3123/images/Invoice.pdf";
//$scope.pdfName = 'Relativity: The Special and General Theory by Albert Einstein';
//$scope.pdfPassword = 'test';
$scope.scroll = 0;
$scope.loading = 'loading';
$scope.getNavStyle = function(scroll) {
if(scroll > 100) return 'pdf-controls fixed';
else return 'pdf-controls';
}
$scope.onError = function(error) {
console.log(error);
}
$scope.onLoad = function() {
$scope.loading = '';
}
$scope.onProgress = function (progressData) {
console.log(progressData);
};
$scope.onPassword = function (updatePasswordFn, passwordResponse) {
if (passwordResponse === PDFJS.PasswordResponses.NEED_PASSWORD) {
updatePasswordFn($scope.pdfPassword);
} else if (passwordResponse === PDFJS.PasswordResponses.INCORRECT_PASSWORD) {
console.log('Incorrect password')
}
};
}
}());
4) pdfViewer.html -
<nav ng-class="getNavStyle(scroll)">
<button ng-click="goPrevious()"><span><</span></button>
<button ng-click="goNext()"><span>></span></button>
<button ng-click="zoomIn()"><span>+</span></button>
<button ng-click="fit()"><span>100%</span></button>
<button ng-click="zoomOut()"><span>-</span></button>
<button ng-click="rotate()"><span>90</span></button>
<span>Page: </span>
<input type="text" min=1 ng-model="pageNum">
<span> / {{pageCount}}</span>
<span>Document URL: </span>
<input type="text" ng-model="pdfUrl">
</nav>
<hr>
{{loading}}
<canvas id="pdf-canvas"></canvas>
Attaching snapshot for response of PDF data load -
Also "pdf" dependency error comes on browser refresh but not on first loading -
My problem was with div. I had not included CSS class for Popup / Modal Window. So overlay window was not showing although data was getting loaded as shown in above logs.
The dependency error got resolved when i added PDF to my app.modules.js base class dependency,hence accessible through out app.
You need to include angular-pdf.js in your HTML, this allows you to use the ng-pdf directive.
You need also to include the directive as a dependency when defining the angular app:
var app = angular.module('app.profile', ['pdf']);
You can see an example of "getting started" at this link: https://github.com/sayanee/angularjs-pdf#getting-started
Related
So on similar sites with different themes, same core functions for laravel there is a view that has
<div class="footer__item footer__item--right"> <div class="footer__item-search"> <span class="search-wrap"><input type="text" placeholder="Search" class="search"></span> </div>
in scripts the only relative javascript code which is also already on the other site
$(document).on('keyup', '.search', function() {
var query = $(this).val().toLowerCase();
doSearch(query);
});
function OnSearch(input) {
var query = input.value.toLowerCase();
doSearch(query);
}
function doSearch(query){
$.getJSON('{{ route('frontend.game.search') }}?category1={{ $category1 }}&q=' + query, function(data) {
$('#games').html(data.data);
});
}```
so copying those makes a box appear but searches nothing
What possibly the javascript is missing to actually be called and call the laravel template view mentioned ?
I'm quite new here so if I do something wrong let me know, ok?
I'm quite new in web development as well.
I'm having a problem here with a post method in ASP.NET.
Please, don't mind the name of the buttons and methods, ok? I'm Brazilian and their names are all in portuguese.
I have a submit button that calls a ng-click (Angularjs) method called AdicionarCliente().
View
<div>
<input type="submit" class="btn btn-info" value="Salvar" ng-click="AdicionarCliente()"/>
</div>
JavaScript
myApp.controller('AdicionarClientesController', function ($scope, $http) {
$scope.NomeCliente = "";
$scope.Telefone1Cliente = "";
$scope.AdicionarCliente = function () {
var promisse = $http.post("/app/AdicionarCliente/", { NomeCliente: $scope.NomeCliente, Telefone1Cliente: $scope.Telefone1Cliente })
promisse.then(function () {
window.location.href = "CadastroPet";
return false;
});
};
It works well until this part. All the times that I hit the submit button, it comes here and enter the function in the variable "promisse".
Now - the problem is here:
Controller
[HttpPost]
public JsonResult AdicionarCliente(string NomeCliente, string Telefone1Cliente)
{
var db = new RexsoftEntities();
db.CLIENTES.Add(new CLIENTES() { NOME = NomeCliente,
TELEFONE1 = Telefone1Cliente});
db.SaveChanges();
var Clientes = db.CLIENTES.ToList();
return Json(Clientes, JsonRequestBehavior.AllowGet);
}
The first time that I hit the submit button, the code here goes until the db.CLIENTES.Add part of the code - then it doesn't run the DB.SAVECHANGES() nor the rest of the code here. The second time it works like a charm. The problems just happen on the first submit hit.
As the return of the controller doesn't happens properly, the final part of the Javascript code does not run as well. This part:
window.location.href = "CadastroPet";
return false;
Can anyone help me?
(All the view is inside this div
<div ng-controller="AdicionarClientesController">
)
UPDATE
I removed the TYPE of the submit button and put the simple button type. It seems to be working now. How can I submit my form then?
First,as per EF best practice, try to wrap the db operation in using() { } block. Thus your controller lokks like
[HttpPost]
public JsonResult AdicionarCliente(string NomeCliente, string Telefone1Cliente)
{
var Clientes = new CLIENTES();
using(var db = new RexsoftEntities())
{
var _Clientes = new CLIENTES()
{
NOME = NomeCliente,
TELEFONE1 = Telefone1Cliente
};
db.CLIENTES.Add(_Clientes);
db.SaveChanges();
Clientes = db.CLIENTES.ToList();
}
return Json(Clientes, JsonRequestBehavior.AllowGet);
}
Secondly, in javascript side, you are using angularjs. window.location.href will not work in angular(see this and this). You have to use $window service (source: using angularjs $window service) or $location service (source: using angularjs $location service). Also avoid using return false;.
In your case the below will work.
promisse.then(function () {
$location.path('/CadastroPet');
});
I removed the TYPE of the submit button and put the simple button type. It seems to be working now.
I created another way to validate my form using the same js script that I mentioned. If the criterias wasn't met, i would return a message and a return false statement.
I am just starting with Angular js. I have a doubt in that. I want to set flash messsage after redirect.
In my case, I have a form and am saving the data through http requst. In the success function I put window.location(). It is another page. I want to set a flash message in that page.
js
$scope.Save_Details = function (id)
{
$http.post(base_url+"sur/sur/save_data/"+id,{data:$scope.Surdata}).
success(function(response) {
// $scope.successTextAlert = "Saved";
// $scope.showSuccessAlert = true;
window.location = "#/surpage/nextpage?show_message= true";
});
}
new update
var messageFlag = $location.search().show_message;
if(messageFlag && messageFlag === 'true'){
alert(messageFlag);
$scope.successTextAlert = "Saved";
$scope.showSuccessAlertMsg = true;
}
view
<div class="alert alert-success" ng-show="showSuccessAlert">
<button type="button" class="close" data-ng-click="switchBool('showSuccessAlert')">×</button> <strong> {{successTextAlert}}</strong>
</div>
Anyone help me?
Put this code in HTML -
<!-- message text -->
<div class=" panel-{{alerts.class}}" ng-show="alerts.messages" >
<div ng-repeat="alert in alerts.messages track by $index" class="panel-body alert-{{alerts.class}}" >{{alert}}</div>
</div>
Put this code in angular model -
$rootScope.alert = function(type,msg){
$rootScope.message.push(msg);
$rootScope.alerts = {
class: type,
messages:$rootScope.message
}
}
For success message -
$rootScope.alert('success',"Success !!!");
For Error message -
$rootScope.alert('danger',"Error.");
You can use toastr JS specially for flash.
http://codeseven.github.io/toastr/demo.html
By using below js code, you can display a flash message.
For success message :
toastr"success";
For Error message :
toastr"success";
EDIT - Adding code
yourAppModule.controller('nextPageController', function($location){
var messageFlag = $location.search().show_message;
if(messageFlag && messageFlag === 'true'){
//show your message
}
});
When you navigate to "nextpage" pass a flag along -> #/surpage/nextpage?show_message= true
In the "nextpage" controller, read the query string value for
"show_message" ( inject $location to your controller and get value
using $location.search().show_message)
if that value == true, show your flash message
Ok, I have struggeled a lot with this thing for some days now and I'm stuck. Here is what I want; I want to change my scope value in a different view by clicking on a button. So if I'm in the index.html view and click on a button I want to change the value of a scope on the index2.html view, and then display that view. Here is an example of my code which is not working
index.html
<div ng-controller="IndexController">
<button class="button button-block button-assertive" ng-click="checkValues()" value="checkitems" >
check values
</button>
</div>
IndexController.js
angular
.module('legeApp')
.controller('IndexController', function($scope, supersonic, $filter) {
$scope.checkValues = function(){
$scope.Diagnose = 'test';
var view = new supersonic.ui.View("legeApp#index2.html");
var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
supersonic.ui.layers.push(view, { animation: customAnimation });
};
});
index2.html
<div ng-controller="IndexController">
<div class="card">
<div class="item item-text-wrap">
Test<b>{{Diagnose}} </b>
</div>
</div>
</div>
I can give the value outside the checkValues method, but I want it to be two different values depending on the button you click. Please help
I tried the code suggested, but I received an error. What am I doing wrong?
I try the code below and receive this error "SyntaxError: Unexpected token ':' - undefined:undefined". I also did not quite understand how and why I want to target the new value with supersonic.ui.views.params.current in the new view. I want to get the new value in the new view, not in a controller?Do I need two different controllers? I just want to update my values in a html view without being in it.
supersonic.ui.layers.push:
( view: view,
options: { params: {$scope.Diagnose : 'test'}
animation: customAnimation
}) => Promise
According to the supersonic push docs, the params attribute is meant for passing parameters between views:
JSON string of optional parameters to be passed to the target View,
accessible via supersonic.ui.views.params.current.
Try calling
supersonic.ui.layers.push: (
view: view,
options: {
params: {valueToBeSentAccrossView: <Your Value>}
animation: customAnimation
}) => Promise
and then retrieving the value in the target view using supersonic.ui.views.params.current.
I have a site, btstats.com, that provides the following service:
"It imports a JSON file from 'Bluescan 4.0 Scanner for Android' and generates graphs and stats".
I implemented Dropbox Chooser on my site with this simple and elegant code to provide the functionality, provided by Dropbox:
<script type="text/javascript">
document.getElementById('dropbox-bt').onclick = function()
{
Dropbox.choose
({
linkType: 'direct',
extensions: ['.json'],
multiselect: false,
success: function (files)
{
var dbSelected = "File selected: ";
var filenamePanel = document.getElementById('filenamePanel');
filenamePanel.textContent = dbSelected + files[0].name;
var postLink = files[0].link;
document.getElementById('postLink').value = postLink;
var postName = files[0].name;
document.getElementById('postName').value = postName;
}
});
};
</script>
What I like about the code above is that it is small and provides me the file link and file name.
I'm thinking about implementing filepicker.io, so I can provide to users more cloud storage options.
I couldn't find an easy way to add filepicker.io's window to my site that offers these options. First, I would like to implement it using a button, and I can't find on their documentation an example with getElementById.
Would it be possible for someone to guide me or write a small filepicker.io example based on my Dropbox implementation that provides the file link and file name? I'm not a Javascript expert.
Thanks in advance.
The filepicker code is quite similar:
filepicker.setKey('yourApikey');
document.getElementById('filepickerBtn').onclick = selectFile;
function selectFile(){
filepicker.pick(
// picker options
{
extension: '.json',
},
onSuccessCallback
);
};
function onSuccessCallback(Blob){
document.getElementById('postName').textContent = Blob.filename;
document.getElementById('postlink').textContent = Blob.url;
document.getElementById('results').textContent = JSON.stringify(Blob);
};
Sample html code:
<div class="container">
<h3>Filepicker example</h3>
<p>
<button id="filepickerBtn" class="btn btn-primary">
Select json file
</button>
</p>
<p>Filename: <span id="postName"></span></p>
<p>Filelink: <span id="postlink"></span></p>
<p>Results: <pre id="results">Upload file to see results</pre></p>
</div>
And working example here