Currently I am using flask with handlebars for javascript. For some reason I am getting 'define not defined' and 'handlebars is not defined'. Can someone give me some insight as to why?
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.amd.js" integrity="sha256-cEkEXgRFO7XYdrN1VzwFPP5zTTOxXJ2Xo6HoZos61Cs=" crossorigin="anonymous"></script>
</head>
<body>
<script id="header" type="text/x-handlebars-template">
<div> {{ headerTitle }} </div>
Today is {{weekDay}}
</script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
JS
$(function(){
var theData = {headerTitle:"Shop Page",
weekDay:"Wednesday"};
var theTemplateScript = $("#header").html();
var template = Handlebars.compile(theTemplateScript);
var html = template(theData);
console.log(html);
});
This is a build issue with the handlebars.js file.
If you look into the file you will see a lot of relative paths to different files as well as import statements.
Use this file to make it work -
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js
Related
I am trying to reference a jsx file from my html, but the render function is not showing anything, and there aren't any errors in the console.
*Note - I changed the fb CDN links below as SO wouldn't allow them. The CDN links are not the issue.
My code looks like this:
HTML
<html>
<head>
<script src="https://f*b.me/react-0.14.6.js"></script>
<script src="https://f*b.me/react-dom-0.14.6.js"></script>
<script src="http://f*b.me/JSXTransformer-0.12.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="loggedin"></div>
</div>
<script type="text/babel" src="js/script.jsx"></script>
</body>
</html>
JSX
var App = React.createClass({
render: function() {
return(
<h1>Hello</h1>
)
}
});
ReactDOM.render(<App />, document.getElementById('loggedin'));
React uses babel to convert your jsx to js. So, add babel instead of JSXTransformer and save the file as .js not .jsx
Add this to your script
<script src="https://unpkg.com/babel-core#5.8.38/browser.min.js"></script>
Reference
I have no clue if this is even possible, but I have spent a lot of time trying to figure out how to do it. I have an array of string values in my .js file which include html tags. An array similar to this:
var values = [
<h1>Introduction</h1>,
<h3>Words</h3>,
<p>More words</p>
]
I am attempting to have them inserted into a handlebars template, but I can't seem to find a way to do it. I have tried using a variation of a {{ #each _ }} method for node.js to no avail. Please let me know how to do this, or if it's even possible.
Here's my current code. I am trying to just get the array of data to display when it's hard-coded in the html. I am getting no errors, but the code does not display.
eSOMS Tutorial
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="c://node.js/server.js"></script>
</head>
<body>
<script id="content-template" type="text/x-handlebars-template">
{{#each data}}
{{this}}
{{/each}}
</script>
<script type="text/javascript">
$(document).ready(function() {
var data = [
'<h1>Introduction</h1>',
'<h3>The Enterprise Shift Operations Management System</h3>',
'<p>The Enterprise Shift Operations...</p>',
'<p>The purpose of this tutorial is to...</p>'
];
if(!Handlebars.templates){ Handlebars.templates = {}; }
Handlebars.templates.full = Handlebars.compile($("#content-template").html());
$('#output').html(Handlebars.templates.full({data: data}));
});
</script>
<div id='output'></div>
</body>
</html>
There's much more code but I think I've got everything relevant.
I'm used to code with Java with many files with object paradigm and MVC pattern with packages.
And I begin with AngularJS, I'm trying to enable a simple index.html who use a controller in javascript file but doesn't work.
my html file : index.html
<html ng-app="carre">
<head>
<script src="js/angular.js"></script>
<script src="js/CalculCtrl.js"></script>
<script>
var ctrl = angular.module('carre',[]);
</script>
</head>
<body ng-controller="CalculCtrl">
<div>{{2+2}}</div>
<p>{{temps}}</p>
</body></html>
My javascript file as controller located at js/CalculCtrl.js
carre.controller('CalculCtrl', function($scope)
{
$scope.temps = 'pluie';
}
)
What's wrong here please ?
Thanks in advance.
Rename carre.controller(...) to ctrl.controller
Ctrl is the name of the variable holding a reference to your module, carre is the name you have given it for reference in the ng-app directive.
Edit: Also, I recommend you get the Batarang extension for Chrome, it adds a page to the Developer Tools for debugging Angular apps. Very helpful tool to have.
You should invert the file inclusion and the module declaration:
<html ng-app="carre">
<head>
<script src="js/angular.js"></script>
<script>
var carre = angular.module('carre',[]);
</script>
<script src="js/CalculCtrl.js"></script>
</head>
Also, because you are using a variable called carre inside CalculCtrl.js, you should rename the variabile assignd when creating the module, from ctrl to carre:
var carre = angular.module('carre',[]);
You have created module ctrl and using carre to refer it.And script sequence is wrong.The right answer is
index.html
<html>
enter code here<html ng-app="carre">
<head>
<script src="js/angular.js"></script>
<script>
var carre = angular.module('carre',[]);
</script>
<script src="js/CalculCtrl.js"></script>
</head>
<body ng-controller="CalculCtrl">
<div>{{2+2}}</div>
<p>{{temps}}</p>
</body></html>
CalculCtrl.js
carre.controller('CalculCtrl', function($scope)
{
$scope.temps = 'pluie';
}
);
As an alternative to the other answers you could create your CalculCtrl in it's own module and then depend on that module when declaring carre.
angular.module('Calcul', [])
.controller('CalculCtrl', function($scope)
{
$scope.temps = 'pluie';
}
);
and then for carre
angular.module('carre', ['Calcul']);
In this way you don't need to re-order your script tags as they are
the answer is here
index.html
<html ng-app="AppliName">
<head>
<--! we load angularjs -->
<script src="js/angular.js"></script>
<--! we load our controller in an other javascript file -->
<script src="js/mesControllers.js"></script>
</head>
<body ng-controller="myCtrl">
<p>time is : {{temps}} </p>
</body>
</html>
mesControllers.js located at js/mesControllers.js
var AppliName = angular.module('AppliName', []);
AppliName.controller('myCtrl', function ($scope) {
$scope.temps = 'pluie';
});
run and Keep calm it working now ;p
So I already know when I see the answer I'm going to feel really dumb, but I'm working through the AngularJS tutorials at egghead.io. When I do this:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<link rel="stylesheet" href="/foundation/stylesheets/foundation.min.css">
<script src="js/main.js"></script>
<script src="lib/angular/angular.js"></script>
</body>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
</html>
with my JavaScript file as so (named main.js):
var myApp = angular.module('myApp', []);
myApp.factory('Data', function() {
return { message: "I'm data from a service"}
})
function FirstCtrl($scope, Data) {
$scope.data = Data;
}
function SecondCtrl($scope, Data) {
$scope.data = Data;
}
My {{ data.message }} isn't recognized as an AngularJS binding (i.e. in the page it shows up as
{{ data.message }} instead of "I'm data from a service"). But if I take all the JS code and put it into <script></script> tags directly in the HTML it works fine. Am I missing a reference or something? Haven't seemed to find this anywhere, likely because it's really basic.
I'm going to JUMP THE GUN and recommend you switch these
<script src="js/main.js"></script>
<script src="lib/angular/angular.js"></script>
to
<script src="lib/angular/angular.js"></script>
<script src="js/main.js"></script>
If this works then that is because before you were trying to use angular when it wasn't event loaded.
Tip
Now, when I first started with javascript these sort of things used to happen to me a lot. The best thing for you to do is learn how to use the console it would have told you in the console something along the lines of cannot read property 'module' of undefined that meaning that angular is undefined and therefore not loaded.
Load Angular before your controllers, not after
switch between the lines:
<script src="js/main.js"></script>
<script src="lib/angular/angular.js"></script>
you need to run main.js after angular is loaded
I'm having problems including local javascript files into my html that is on the play framework. The paths are correct and I even tried including the javascript file in the same directory. However, imports from the web (the main libraries i'm using) work just fine.
#(execId: String)
<html>
<head>
<title>Timeline</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type = "text/javascript" src = "../../public/javascripts/profilesJS/stack.js"> </script>
</head>
<body>
<input id="profiles" type="button" value="Profiles" />
<script type="text/javascript">
alert(tester());
</script>
</body>
</html>
the javascript file simply looks likes this
function tester(){
return "test";
}
And the error i get is:
tester is not defined
at the line with the alert
According to the assets documentation (and routing in general) you need to use the reverse routing in your template:
<script type="text/javascript" src='#routes.Assets.at("javascripts/profilesJS/stack.js")'></script>
it builds the correct src path to your /public/javascripts/profilesJS/stack.js file (by default routing config it will be /assets/javascripts/profilesJS/stack.js)