I'm trying to embed PDF.js into my web.
Everything else is fine but when I run the page to display a pdf file it throw an error
Uncaught (in promise) ReferenceError: mozL10n is not defined at webViewerInitialized
I have checked my scripts and yeah I have included it:
Thank you for any help.
This is my code:
<link rel="stylesheet" href="{{ asset('bundles/leepadmin/web/viewer.css') }}"/>
<script language="javascript">
var config = {
imageResourcesPath : "{{ asset('bundles/leepadmin/images/') }}",
workerSrc : "{{ asset('bundles/leepadmin/build/pdf.worker.js') }}",
pdfFile : "{{ asset('bundles/leepadmin/build/hw.pdf') }}"
};
</script>
<script src="{{ asset('bundles/leepadmin/build/pdf.worker.js') }}"></script>
<script src="{{ asset('bundles/leepadmin/web/l10n.js') }}"></script>
<script src="{{ asset('bundles/leepadmin/build/pdf.js') }}"></script>
<script src="{{ asset('bundles/leepadmin/web/debugger.js') }}"></script>
<script src="{{ asset('bundles/leepadmin/web/viewer.js') }}"></script>
I figure it out. I have downloaded the Stable version. The viewer.js file in Stable version is missed the mozL10n variable.
So I go ahead and tried to find it in Beta version. And lucky I found it in Beta version.
It is fine now.
Related
I am working on a feature to replace a Flash dashboard with Nivo/D3. I successfully built the dashboard and have it as a React component to be imported. The react component even loads into the browser, but does not render on the page.
I have verified that my component is built correctly, and I am able to run it in an html page by itself. The page I am trying to put it in is of file type .html.erb. I did try changing the ruby tags to HTML and that did not work. One theory is that I need to remove the JS prototype duplicate line here.
<script type="text/javascript"> </script>
<script src="/javascripts/prototype.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/prototype.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/effects.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/controls.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/application.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/active_scaffold.js?1565285086" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/dhtml_history.js?1565285086" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/form_enhancements.js?1565285086" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/rico_corner.js?1565285086" type="text/javascript"></script>
<link href="/stylesheets/active_scaffold/default/stylesheet.css?1565285086" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/active_scaffold/default/export-stylesheet.css?1565285086" media="screen" rel="stylesheet" type="text/css" />
<!--[if IE]><link href="/stylesheets/active_scaffold/default/stylesheet-ie.css?1565285086" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/active_scaffold/default/export-stylesheet-ie.css?1565285086" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
However, I don't know where or how that code is being generated. I think it is related to active scaffolding. Does anyone have any input on that?
Presently, the error message I have been troubleshooting is this:
index.esm.js:214 Uncaught TypeError: h(...) is not a function
at Object.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
at Object.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
at Object.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
at Object.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
at Module.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
but I don't think that is relevant as I have dug into it quite a bit.
Tech stack notes (I realize I am on an old version of Ruby but upgrading is unfortunately not an option):
* XML Version 1.0
* Ruby version: 1.8.6
* Ruby gems
cgi_multipart_eof_fix (2)
gem_plugin (0.2.3)
* json_pure (1.7.6)
* mongrel (1.1.5)
* rake (0.8.7)
* ruby-net-ldap (0.0.5)
* Apache version: Not used yet. Eventually Odin and Sonitor will be replaced with nifi.
* .NET version 4.0 (or 4.7)
Does anyone have advice on how to get my React component to render?
I have an app I developed in Android. I installed a VM with Mac, and I'm testing it in iOS. The app worked perfectly in Android, but in iOS it is not. When I use 'ionic serve' or 'ionic serve --lab' the browser show a white screen, and in the console I get this errors (link of image below):
Console
Here is some code from the index.html:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="lib/ionic/css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/bluebird.min.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic.cloud.min.js"></script>
<script src="lib/ionic/js/ionic-modal-select.min.js"></script>
<script src="lib/ionic/js/ionic-toast.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
I'm really lost here because the exact same files works OK for Android.
Which error you are posted, not library error.Error coming from app.js file.If you dont mind create a new ionic app and replace your file in new app.it will works.
I am having a problem with my ionic project, it is not loading cordova.js file or ngCordova.js file.
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<script src="lib/ngCordova/dist/ng-cordova.js"/>
<script src="cordova.js"></script>
<script type='text/javascript' src="lib/cryptojslib/rollups/aes.js"></script>
...
</head>
When I deploy the app on my iphone, aes.js and cordova.js file is loaded, the problem is ng-cordova.js is not loaded because when I invoke that code I get:
Error: Can't find variable: cordova
scan#file:///var/containers/Bundle/Application/6888FB51-F164-46EC-89AC-B8960C93FC7A/Nastic.app/www/lib/ngCordova/dist/ng-cordova.js:596:16\
....
If I switch lines:
<!DOCTYPE html>
<html>
<head>
<script src="cordova.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"/>
<script type='text/javascript' src="lib/cryptojslib/rollups/aes.js"></script>
...
</head>
Then ng-cordova.js is loaded, but aes.js is not loaded.
I was looking for a fix to this problem but couldn't find anything that solved the issue, however lot of similar issues.
Thanks
You should always include the file cordova.js after loading ng-cordova.js
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="lib/cryptojslib/rollups/aes.js"></script>
Reference: http://ngcordova.com/docs/install/
I tried to create a task who allow to download and inject dependencies in my index with gulp and wiredep. It works but like my folder bower_components it isn't in my wwwroot my scripts's links are wrong. Errors are 'Uncaught SyntaxError: Unexpected token <' for all my links. So, I tried to change my destination folder but when I run my task, I catch a new error 'bootstrap isn't installed'. And I can't reinstall bootstrap twice times in the same project.
This is my gulp task:
eval("var project = " + fs.readFileSync("./project.json"));
gulp.task('bower', function () {
gulp.src("./" + project.webroot + "/index.html")
.pipe(wiredep({
directory: "./bower_components/",
bowerJson: require('./bower.json')
}))
.pipe(gulp.dest("./" + project.webroot + "/"))
});
my project architecture:
and my index.html (head):
<!--bower:css-->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="../bower_components/bootstrap-touch-carousel/dist/css/bootstrap-touch-carousel.css" />
<!--endbower-->
<!--bower:js-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/jquery-ui/jquery-ui.js"></script>
<script src="../bower_components/jquery-validation/dist/jquery.validate.js"></script>
<script src="../bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="../bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="../bower_components/hammer.js/hammer.js"></script>
<script src="../bower_components/bootstrap-touch-carousel/dist/js/bootstrap-touch-carousel.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-parse/angular-parse.js"></script>
<script src="../bower_components/angular-locker/dist/angular-locker.min.js"></script>
<!--endbower-->
So I already tested this for my gulp task :
eval("var project = " + fs.readFileSync("./project.json"));
gulp.task('bower', function () {
gulp.src("./" + project.webroot + "/index.html")
.pipe(wiredep({
directory: "./"+project.webroot+"bower_components/",
bowerJson: require('./bower.json')
}))
.pipe(gulp.dest("./" + project.webroot + "/"))
});
With this code, the error is the bower not installed.
Thank you for all the help you could give me.
If you have a .bowerrc file with:
{
"directory": "wwwroot/lib"
}
then on the bower install, it will be copied to the destination folder.
In my Rails app, I have ui-bootstrap-0.2.0.js in the vendor/assets/javascripts directory. I have required the file in my application.js file.
I get an error when I specify the bootstrap as my dependency in this line, angular.module('myApp',['ui.bootstrap']);, as instructed to do here, http://angular-ui.github.io/bootstrap/
Chrome detects a Uncaught ReferenceError: angular is not defined at this defined module:
angular.module("ui.bootstrap", ["ui.bootstrap.accordion", ...]) in the ui-bootstrap-0.2.0.js.
However, angular.js catches an error No module:ui.bootstrap. So it seems both of these javascript files cannot see eachother. Is there a solution to this?
Here is how I did it in my project:
<script type="text/javascript" src="libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="libs/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="libs/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-ui.min.js"></script>
<script type="text/javascript" src="libs/angular-resource.min.js"></script>
<script type="text/javascript" src="libs/ui-bootstrap-tpls-0.2.0.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/services.js"></script>
<script type="text/javascript" src="js/directives.js"></script>
<script type="text/javascript" src="js/filters.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
And this is how I set my application module:
var app = angular.module('myapp', ['ui.bootstrap','ngResource']);