Can you please tell me why this handlebars.js example will not work? I get a jquery error?
TypeError: e is null in the jquery
looks like its happening here $(document).append(theTemplate(theData));
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/handlebars.js"></script>
<script type ="text/javascript">
$(document).ready(function () {
var theData = { headerTitle: 'Shop Page', weekDay: 'Wednesday' };
var theTemplateScript = $("#header").html();
var theTemplate = Handlebars.compile(theTemplateScript);
$(document).append(theTemplate(theData));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script id="header" type="text/x-handlebars-template">
<div> {{ headerTitle }} </div>
Today is {{weekDay}}
</script>
</div>
</form>
</body>
</html>
I changed my jQuery version to 1.7.2 and it fixed the problem.
still not sure what changed in the newer version
looks like the issue was appending to document if I change it to body it worked.
$('body').append(theTemplate(theData));
Related
I'm making a HEX to RGB colour converter and I have done all the things I think you are suppose to do and that is my JS code and HTML code
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
<h1>Hex - RGB</h1>
<input id="hex">
<input id="rgb">
<script src="Main.js"></script>
</center>
</body>
</html>
Javascript
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHex);
function ToHex() {
console.log("Test")
}
and I get this Error
Uncaught TypeError: Cannot read property 'addEventListener' of null
at Main.js:3
I just got started learn JavaScript and I'm fairly new
You should make a few changes:
First, you need to run your script after the entire DOM has loaded. If you run your script before the DOM has fully loaded, then your document.getElementById won't be able to find the element and will return null.
Second, you also need to change ToHEX() to ToHEX in your addEventListener. The former was executing ToHEX immediately and returning nothing. The latter will pass the function to the addEventListener. Edit: It looks like you just updated your question to address this.
Here is the corrected code:
document.addEventListener("DOMContentLoaded", function(event) {
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHEX);
function ToHex() {
console.log("Test")
}
});
Lastly, you should also move your <script src="Main.js"></script> line back into the header -- it doesn't need to be inserted after your HTML. Including the script after your HTML doesn't mean that it will run after the page has loaded.
This code seems to work. I fixed code order and typo error.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
<h1>Hex - RGB</h1>
<input id="hex">
<input id="rgb">
<script>
function ToHex() {
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", ToHex);
</script>
</center>
</body>
</html>
Thanks Bassem Rabia It works
HTML
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
JavaScript
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex);
});
Also, you have 2 mistakes in this line
HexInput.addEventListener("input",ToHEX());
the name of the method is misspelled
When you attach the event handler you just pass the reference to the function and not the invocation
So this would be the correct one
HexInput.addEventListener("input",ToHex);
http://prntscr.com/ic1vom
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
main.js
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex());
});
I'm learning AngularJS with WebStorm JetBrains, I have this very sample app, but it's not showing the array in the page when I press Debug button (it's open a webpage in Chrome like that:
http://localhost:63342/example/index.html
I'm using the Plugin Connector for Chrome and I don't have errors in the Chrome console.
Where is my error? Link to Fiddle
HTML (index.html)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="webStorm" ng-controller="webStormController as ws">
<div ng-repeat="person in ws" ng-click="ws.showPerson(person)">
{{person.firstName}}
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
JS (app.js)
var webStorm = angular.module("webStorm", []);
webStorm.controller("webStormController", function(){
var ws = this;
ws.people = [{firstName: "John", lastName: "Smith"}];
console.log(ws.people);
ws.showPerson = function (person) {
console.log(person);
}
})
Thanks!
<div ng-repeat="person in ws.people" ng-click="ws.showPerson(person)">
{{person.firstName}}
</div>
change person in ws by person in ws.people
I think you meant: ng-repeat="person in ws.people", that's the array you want to iterate :)
I have been trying to get the bootstrap typeahead to work, with no luck whatsoever. I have pasted the code I have. I have reference Jquery-1.9.1 and typeahead.js. What am I doing wrong? Your help is much appreciated! Thanks.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script src="Scripts/typeahead.js-master/test/vendor/jquery-1.9.1.js"></script>
<script src="Scripts/typeahead.js-master/src/typeahead.js"></script>
<title></title>
</head>
<body>
<form>
<div>
<input type="text" data-provide="typeahead" autocomplete="off" data-source='["arizona","alaska"]' />
</div>
</form>
</body>
</html>
It looks like you're getting confused between typeahead.js (by Twitter) and Twitter Bootstrap's Typeahead feature
You're including the library for typeahead.js
<script src="Scripts/typeahead.js-master/src/typeahead.js"></script>
but trying to use it like Twitter Bootstrap's typeahead feature.
Make sure you're including the Twitter Bootstrap library, if you want to use your current code:
<script type="text/javascript"
src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
</script>
Here's an example: jsFiddle
I hope this is what you expection. Here is the complete code try with necessary dependencies.
<!DOCTYPE html>
<html>
<head>
<title>Member</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="well">
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
</div>
<script>
var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
$('#search').typeahead({source: subjects})
</script>
</body>
</html>
The Type head File with add two features:
Type Space Bar Show All Auto Complete Data's
If you Give Data with Space also Can be Sort and Display Data's
Change The Lookup Function This:
lookup: function (event) {
var that = this,
items;
if (that.ajax) {
that.ajaxer();
}
else if (($.trim(that.$element.val())) == "") {
that.query = that.$element.val();
if (!that.query) {
return that.shown ? that.hide() : that;
}
items = that.source;
if (!items || !items.length) {
return that.shown ? that.hide() : that;
}
return that.render(items.slice(0, that.options.items)).show();
}
else {
that.query = $.trim(that.$element.val());
if (!that.query) {
return that.shown ? that.hide() : that;
}
items = that.grepper(that.source);
if (!items || !items.length) {
return that.shown ? that.hide() : that;
}
return that.render(items.slice(0, that.options.items)).show();
}
},
I have following code where I am trying to load values into a dropdown from an array(from file page students.js):
student.js
var STU_NAME = 0;
var STU_ID = 1;
var STU_AGE = 2;
var STUDENTS = [
["Apple", 1, 15],
["Billy", 2, 16]
["Cathy", 3, 14]
];
Functions.js
var jQ = $.noConflict();
function populateStudents() {
jQ('#students').empty();
jQ('#students').append(jQ("<option></option>").attr("value", "").text("-- Please Select --"));
for (var _i = 0; _i < students.length; _i++) {
jQ('#students').append(jQ("<option></option>").attr("value", _i).text(STUDENTS[_i][STU_NAME]));
}
}
jQ(document).ready(function () {
populateStudents();
});
mypage.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="model">
<form>
<div>
<div id="StudentLabel">
Student:
</div>
<select id="students" name="students">
</select>
</div>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>
</form>
</div>
</body>
</html>
I get an error "Microsoft JScript runtime error: '$' is undefined" at line 1 of Functions.js
Can anyone help me on what I would be missing to make it working here.
You have forgotten to add the jquery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>
It is highly recommended to use CDN version of jquery to improve pagespeed,check this link
You need to include jquery library, you can download from here Add the script tag in head of page or before you use jquery.
<head runat="server">
<title></title>
<style type="text/css">
</style>
<script language="javascript" type="text/javascript" src="JS/jquery-1.7.2.js"></script>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>
</head>
Here is source code of the simple page:
<html>
<head>
<title>Test</title>
<script src="jquery-1.4.2.js" type=text/javascript></script>
</head>
<body>
<div id="divText">Original</div>
<script type="text/javascript">
var vText = document.getElementById('divText');
vText.innerText = 'Changed';
alert(vText.innerHTML);
$('divText').text = 'Changed with jQuery';
alert(vText.innerHTML);
</script>
</body>
</html>
"jquery-1.4.2.js" file is in the same folder.
Both alerts display "original" text, text in browser also "Original"...
What is wrong with my code? Any thoughts are welcome.
1. A quick google ( took me 2 seconds ) reveals text is a function, not a property. Use it like .text('lol') as the example directly from the API.
http://api.jquery.com/text/
2. innerText isn't available in every browser/DOM property.
As you pointed out in the title you'll be wanting to change the inner html. You'll also need the $('#divText') selector to get to the div with jQuery.
<html>
<head>
<title>Test</title>
<script src="jquery-1.4.2.js" type=text/javascript></script>
</head>
<body>
<div id="divText">Original</div>
<script type="text/javascript">
var vText = document.getElementById('divText');
vText.innerHTML = 'Changed';
alert(vText.innerHTML);
alert($('#divText'));
$('#divText').html('Changed with jQuery');
alert(vText.innerHTML);
</script>
</body>
</html>