I am coding in ember.js have precompiled my Application.Handlebars file and it has resulted in a precompiled handlebars template.
Earlier when I was inserting the template in the Index.html page, all I had to do was write :
<script type="text/x-handlebars" data-template-name="whateverTemplate">
...
</script>
However, after I have precompiled my template, and I have included my template js file in the scripts section, I am not able to see the output in the screen. What am I doing wrong? How do you do this?
This is my index.html :
<!DOCTYPE html>
<html>
<head>
<title>Ember CRM Application</title>
</head>
<link rel="stylesheet" href="css/bootstrap.css"/>
<style>
.border{
border: 2px #666 solid;
border-radius: 10px;
}
</style>
<body>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/md5.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.4.0.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/libs/moment.min.js"></script>
<script src="js/crm.js"></script>
<!--Templates-->
<script src="js/templates/application.handlebars.js"></script>
<!-- to activate the test runner, add the "?test" query string parameter -->
<script src="tests/runner.js"></script>
</body>
</html>
And in the application.handlebars :
<h1>This is my template</h1>
This is my crm.js :
App = Ember.Application.create();
I don't want to insert a view, I directly want to insert the template. Please guide me.
I was having the same problem, you see if you use the Handlebars Precompilation, then it would not work. You need to use the Ember-Handlebars-Precompile.
Here is the npm link : https://github.com/gabrielgrant/node-ember-precompile
You can install it using : npm install -g node-ember-precompile
After that, you just need to compile it using the Ember Precompiler and it would add anything that is necessary for it to work with Ember. Now you just need to follow the same thing that you are doing. It should work for you.
Related
--public/javascripts/myscript.js
--views/index.ejs
No matter what I do, or what variation I use (ie declaring including type="text/javascript") it wont find my external js file. I am using node js and I was told I may have to do something with routing, but that doesn't seem to be working either.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<!-- <link rel='stylesheet' href='/stylesheets/style.css' />-->
</head>
<body>
<%include templates/header.ejs %>
<script type="text/javascript" src=".../public/javascripts/myscript.js"> </script>
</body>
</html>
I understand using routing in other .js files but not importing into html.
Also is there a better/neater was of doing this?
you base directory for adding static file, start from public
ex.
your project directory
/var/www/project/
your assets located on
/var/www/project/public/javascripts
then you attach theme as bellow
//app.js
app.use(express.static(path.join(__dirname, 'public')));
and on views you can do as bellow
<script type="text/javascript" src="/javascripts/myscript.js"> </script>
I am learning AngularJS and I want to use Angular Material, I've downloaded it with npm install angular-material and I've imported it but it is not working. That is what I see, any help please?
This is my html code
<html>
<head>
<title>My store</title>
</head>
<body ng-app="tienda" ng-controller="tiendaCtrl">
{{name}}
<md-toolbar>
<div class="md-toolbar-tools">
<p><strong>My Store</strong></p>
<md-button><md-icon class='mdi mdi-plus-circle'></md-icon>New Classified</md-button>
</div>
</md-toolbar>
<script src="bower_components/angular/angular.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="js/app.js"></script>
<script src="js/tienda.ctrl.js"></script>
</body>
This is my app.js file
var myApp = angular.module("tienda", ['ngMaterial']);
myApp.config(function($mdThemingProvider){
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
});
This might be what you was looking for, you need to add few lines to styles in angular.json
"./node_modules/#angular/material/prebuilt-themes/pink-bluegrey.css"
This worked for me. Give a Try!
I think you are missing CSS files here. The directive works fine but the styling is not there. Have a look at their Github, under the CDN part, it is written what to import.
The CSS should be in your node_modules folder so I guess you should put this in your head:
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
The code works in Codecademy but doesn't seem to work in Adobe Brackets IDE. Greatly appreciate any help on this issue!
HTML File
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div></div>
<script src="script.js"></script>
</body>
</html>
CSS File
div{
height: 100px;
width: 100px;
background-color: aqua;
}
Javascript File
var main = function(){
$('div').click(function(){
$('div').hide();
});
};
$(document).ready(main);
check your folder structure. there is nothing to do with the editor when you are including js files.
one more thing your code seems a jQuery code and to make it run you will need
jQuery library file included before your script.js file. to use jQuery functions in your code you need to add the functions library first.
check code below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>
You've not included jQuery in your document.
http://jquery.com/download/
Via CDN:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
If you open your JavaScript console you'd likely see an error telling you that $ is not defined.
Chrome Developer Console
FireFox Developer Console
I've been following the lessons on Codecademy and I've finished the HTML/CSS and about half of the jQuery tutorials.
I figured I should try to test my knowledge by writing code and opening it in my web browser, which is Chrome (Version 34.0.1847.131 m).
I have the HTML and CSS working perfectly fine, but I can't seem to get the jQuery (script.js is the filename) code to work properly. Here is my code for all three files in my test project:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div><br/><strong>Click Me!</strong></div>
</body>
</html>
stylesheet.css
div
{
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 0.5;
}
script.js
$(document).ready(function()
{
$('div').hide();
});
This code basically should instantly hide a div box I am creating. However, whenever I open the index.html page in chrome, it just shows the box in the upper left corner (thus, my $('div').hide(); isn't being run.
My files are all in the same location:
I'm writing my code in the Sublime Text 2 IDE.
I've seen multiple questions similar to this on SO but everyone's problem was that they have didn't wrap their js code in the $(document).ready() function.
Can someone tell me what I'm doing wrong?
You have not loaded jQuery.
Add this line to your <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Edit: If you are using this offline, you need to use http:// as it will default to file://
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Hosted by google. Source
try to include the jquery file before your final script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
...your script....
You need to include jQuery before you include your javascript file, like so:
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
You have to attach a jquery library with your page in order to run it.
just add
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
in head section of your html
You need to include jquery library in your html file like this :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
I've been trying to use this really cool JVector Interactive map plugin with my Rails 3 app but I must be doing something wrong because the map is not rendering. I haven't used JQuery much with Rails so am kind of new at this. I created a controller called Maps and a view called Intro.html.erb, which included my html from this tutorial: http://developer.practicalecommerce.com/articles/2988-Create-an-Interactive-Map-with-jVectorMap
I also split up my .js functions by putting them in application.js. Since that didn't work I found some other code that I tried to put in my Intro.html.erb file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="public/javascripts/jquery.vector-map.css" type="text/css" media="screen" />
<script src="public/javascripts/jquery.min.js"></script>
<script src="public/javascripts/jquery.vector-map.js"></script>
<script src="public/javascripts/world-en.js"></script>
<script>
$(function(){
$('#map').vectorMap();
});
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>
It's still not rendering. I'm trying to run this in my development environment and am pointing locally to the files. For example: public/javascripts/world-en.js"
Any help would be greatly appreciated.
You want to use "world map" but in your finction you are defining the"#map". Here is the correct code you may try:
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="scripts/jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>
<script src="scripts/jquery-1.8.2.js"></script>
<script src="scripts/jquery-jvectormap-1.2.2.min.js"></script>
<script src="scripts/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script>
$(function(){
$('#world-map').vectorMap();
});
</script>
</body>
</html>
Here is the folder with docs you need. Download and unzip the following folder to you htdocs on your local host
Same problem, fixed by specifing the imported map into the js initialization
$('#world-map').vectorMap(
{
map: 'world-en',
}