I am using Handlebars.js with precompiled templates. I have the following code (using JQuery in the first line):
$('#'+id).append('<script src="'+widgetContext.templateDir+
template+'.tmpl">');
console.log(Handlebars);
console.log(Handlebars.templates);
var html = Handlebars.templates[template](data);
I get the following at the console:
The 'widget_container' template file definitely exists in the location specified. I've also tried with both the standard handelbars.js and handelbars.runtime.js.
Any idea what is going on here or how to fix the error?
Update: it appears to work if the HTML is on the same domain as the javascript file and templates but not if it isn't, so something to do with the same origin policy? I'm trying the handlebars require.js plugin here https://github.com/SlexAxton/require-handlebars-plugin but having problems getting it working.
I solved this using:
The text plugin for require.js and loading the handlebars templates as text files
The optimizeAllPluginResources build option for r.js
Getting a very recently updated version of require.js/r.js which fixed a bug with the
optimizeAllPluginResources build option
A rather horrible use of eval to run the template file code - would still be nice to avoid this
Still not quite sure exactly what was going on with the undefined Handlebars.templates though.
Related
I am working on a project built with Javascrpt, jQuery, and Vite.js. My colleague built a data visualization using D3 - a US states map - that I need to implement in the project on a specific page. They built the component using test data, my job is basically to load the component onto a page passing it actual returned data from an API call.
Everything in the test project works perfectly, but when I tried to implement this code into a script file in the project - literally copying and pasting from the working version - I got an error saying certain properties could not be read. After failing to debug for sometime, I randomly tried removing type="module" from the script tag link in HTML, and boom, everything worked. Does anyone have an idea of why this would be? I cannot get this code to run when the script type is set to module, except I need the script type to be set to module since I'm importing lots of components for other aspects of the page.
With the way the CodePen is set up, I couldn't replicate the issue since the HTML and JS files are automatically linked. But if you copy this code into your editor, and then in the html, set the the JS file to a module ` You'll see the issue.
Thanks. I'm at a total loss for what to do here. I could put all the D3 code in it's own script file, but then I have no way pass it variables from other files if it's not a module.
Per the comments, the following lines in my original code were not working in strict mode:
this.uStates = uStates;
this.uStatePaths = uStatePaths;
The fix was simple, I just needed to write the following instead:
window.uStates = uStates;
window.uStatePaths = uStatePaths;
There is such a js file that needs to be included in the head tag
After an incorrect (as I understand it) attempt to do this, I get the following result on the LAN:
We can see that firstly there is some kind of error in the head tag.
Also, when trying to load this script at the end of the body tag
(this is done only for the purpose of experiment) - I cannot at least get a connection via an absolute path(__nuxt/.....)
Question:
What am I missing and how can I correctly connect the required js file?
There are several ways to add this kind of 3rd party scripts. You could either use a dedicated Nuxt module, sometimes plugins is also a good solution but if you want to have it directly embedded like this, you can follow my answer here with all the possible variants: https://stackoverflow.com/a/67535277/8816585
I am trying to use the the angular bootstrap when i try to add the dependency in my controller and start the server with grunt serve i get a blank page.Please have a look at the bower components in the screen shot.
When i try to use it in angular.module('kbv1App', ['ui.bootstrap']).controller it fails if i remove the [ui.bootstrap] it works fine.
Any idea wha will be the issue?
Update. Console error
[$injector:modulerr] Failed to instantiate module ui.bootstrap due to: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.2.18/$injector/nomod?p0=ui.bootstrap minErr/<#http://localhost:9000/bower_components/angular/angular.js:78:5 setupModuleLoader/</module/<#http://localhost:9000/bower_components/angular/angular.js:1645:1 ensure#http://localhost:9000/bower_components/angular/angular.js:1567:5 module#http://localhost:9000/bower_components/angular/angular.js:1641:7 createInjector/loadModules/<#http://localhost:9000/bower_components/angular/angular.js:3817:11 forEach#http://localhost:9000/bower_components/angular/angular.js:320:7 loadModules#http://localhost:9000/bower_components/angular/angular.js:3811:5 createInjector/loadModules/<#http://localhost:9000/bower_components/angular/angular.js:3818:11 forEach#http://localhost:9000/bower_components/angular/angular.js:320:7 loadModules#http://localhost:9000/bower_components/angular/angular.js:3811:5 createInjector#http://localhost:9000/bower_components/angular/angular.js:3751:3 bootstrap/doBootstrap#http://localhost:9000/bower_components/angular/angular.js:1410:1 bootstrap#http://localhost:9000/bower_components/angular/angular.js:1425:5 angularInit#http://localhost:9000/bower_components/angular/angular.js:1338:5 #http://localhost:9000/bower_components/angular/angular.js:21713:5 jQuery.Callbacks/fire#http://localhost:9000/bower_components/jquery/dist/jquery.js:3119:1 jQuery.Callbacks/self.fireWith#http://localhost:9000/bower_components/jquery/dist/jquery.js:3231:7 .ready#http://localhost:9000/bower_components/jquery/dist/jquery.js:3443:3 completed#http://localhost:9000/bower_components/jquery/dist/jquery.js:3474:3
The reason people are using angular-ui-bootstrap is to avoid using jquery and bootstrap.js (which relies on jquery) and opt for an Angular solution. So my first attempt at getting this app working is to
Remove jquery.js, jquery-ui.js, and bootstrap.js out of the page.
Start from just plain Angular + Angular UI Bootstrap first. Try some examples from http://angular-ui.github.io/bootstrap/ if you want to get familiar with the directive usage.
Then, if you really need to, just add jquery back in later. But from my experience, you won't really need to if you stick to Angular way of coding. If you come from a strong jquery background and just start coding on Angular, I recommend you read this: https://stackoverflow.com/a/15012542/3788115
The component `angular-bootstrap` should have two javascript files:
bower_components/angular-bootstrap/ui-bootstrap.js
bower_components/angular-bootstrap/ui-bootstrap-tpls.js
You only include the templates.
Edit: Corrected in the comments.
Use Chrome Canary for easier debugging, you will see the full error message instead of Uncaught object.
add ['ui.bootstrap'] on the main app.js
I just set up CoffeeScript (I'm also using Jade) for Meteor and it seems that my helpers (rendered and events functions too) do not work anymore.
Template.signIn.helpers
showForgotPassword: () ->
return Session.get('showForgotPassword')
The code seems to be properly generated but is embraced in an anonymous function.
I'm getting the following error in the web console:
Uncaught TypeError: Cannot call method 'helpers' of undefined (account.coffee:12)
I'm wondering whether the code is run before the page is fully loaded or if it is due to something else. I've also tried this but nothing changed (though it seems to work in this tutorial):
root = global ? window
root.Template.signIn.helpers
showForgotPassword: () ->
return Session.get('showForgotPassword')
The problem is fixed when I wrap my code with Meteor.startup (see David Weldon post).
if I put .jade and .coffee into same level folder meteor will load .coffee before .jade, then it causes no such template. To prevent this, you can prefix jade files with _.
Thanks for the great pointer #Julien.
I run into this issue about a few hours back and have been breaking my head since.
What I did instead of the _ approach, was to name my jade files as .html.jade and my coffeescript files as .js.coffee
That way the jade files are loaded before the coffee files and everything works.
The advantage to the _ approach is that related jade and coffee files are together.
Hope this helps.
I think this is solved in meteor-jade v0.2.2
I'm getting a strange behavior with RequireJS on IE.
Sometimes (this is purely random) the generated js file reference appears with the ID, not the file name.
I explain,
on the paths I have:
jqGridz: "jquery.jqGrid/js/jquery.jqGrid.min"
on the shim I have:
"jqGridz": ["jqueryUi", "jqGrid_i18n_en"]
Sometimes the end result is correctly resolved to:
/public/javascripts/jquery.jqGrid/js/jquery.jqGrid.min.js
But other times (a lot of times) it gets rendered as:
/public/javascripts/jqGridz.js
So instead of the path for jqGrid I'm getting the ID of the path.
This only happens on IE and I don't know why.
I'm using RequireJS v2.0.6
Thanks in advance!
Figured out...
I picked up this project with RequireJS already implemented but it's a mess.
So what's happening is that whenever RequireJS can't load the resource (for me was a 404) it put the key name instead of the file path.
So basically if you have have this problem have a look at the resources loading list in Firebug or Fiddler and search for errors :)
Cheers!