I tried running BackboneJS HelloWorld program, but I am getting a blank page.
Below is the program.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World in Backbone.js</title>
</head>
<body>
<script src="JS/backbone.localStorage-min.js"></script>
<script src="JS/backbone-min.js"></script>
<script src="JS/jquery.min.js"></script>
<script src="JS/underscore-min.js"></script>
<script type="text/javascript">
var AppView = Backbone.View.extend({
el: '#container',
initialize: function () {
this.render();
},
render: function () {
this.$el.html("Hello World");
}
});
var appView = new AppView();
</script>
</body>
</html>
Note: Downloaded all the required libraries locally.
Link : http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/
You need to include Underscore library's inclusion before including your Backbone library. Please rearrange the <script> inclusions given below.
<script src="JS/jquery.min.js"></script>
<script src="JS/underscore-min.js"></script>
<script src="JS/backbone-min.js"></script>
<script src="JS/backbone.localStorage-min.js"></script>
Also the you need to place html element with an id container because you're referring it in your $el attribute. Hence include the below <div> tag inside your <body></body> tags,
<div id="container"></div>
Here is the working fiddle: https://jsfiddle.net/du2b8vfv/
Hope this helps!
you are changing the value of el in render but not giving the value of el in html code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World in Backbone.js</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div id="hh"></div>
<script type="text/javascript">
AppView = Backbone.View.extend({
initialize: function () {
},
render: function () {
this.$el.html("hello");
return this;
}
});
var appView = new AppView();
$("#hh").html(appView.render().el);
</script>
</body>
</html>
Related
My entire code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>React course</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Comment = React.createClass({
edit: function () {
alert('Editing comment');
},
remove: function () {
alert('Removing comment');
},
render: function() {
return (
<div className="commentContainer">
<div className="commentText">Text of whatever</div>
<button onClick={this.edit} class="btn-primary">Edit</button>
<button onClick={this.remove} class="btn-danger">Remove</button>
</div>
);
}
});
ReactDOM.render(
<div className="board">
<Comment>Heya</Comment>
</div>
,document.getElementById('container'));
</script>
</body>
When I refresh the page I see nothing. Then I inspect the element and I see the error that you see in the image but I do not really know what is going know since am new in react.
Hope you can help
I think it because you don't have an html element with an id of container. This section must reference a valid HTML element. document.getElementById('container'));
Try changing the id of example to container.
I believe that I have a syntax error somewhere in my script, could someone point it out?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
</head>
<body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
</script>
</body>
</html>
Not sure what syntac error you are seeing at your side.. But I would have made some changes
Move the script inside head
add the code inside a function that will be called on page load
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
$(function() {
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
});
</script>
</head>
<body>
</body>
</html>
I downloaded this jquery plugin: http://harshen.github.io/jquery-countdownTimer/
specifically to use the Reverse countdown to zero from time set to only minutes timer.
I am pretty sure I followed the instructions correctly but the plugin does not work. I have never used jQuery or plugins before, so I'm not sure if I am missing something or just doing something completely wrong (or both).
My Javascript test alert does run.
I will attach my code for you all to look at. Not sure if it has to do with my file paths, but I've attached an image of that as well. Please tell me what could be causing the problem and how to fix. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
And here is a picture of my project folder, containing the files:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
I have read some articles for beginners about ReactJs. The article I read showed only code fragments. I'm having trouble with my first component:
full code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return React.DOM.h1("hello world!!");
}
});
React.renderComponent(
HelloWorld,
document.getElementById("content")
);
</script>
</body>
</html>
When I open the page I see embedded:11 Uncaught TypeError: React.renderComponent is not a function
Can anyone please point me in the right direction?
I've also tried this with no luck:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>-->
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
The problem with your first example is that React.renderComponent is not a function, you need to use ReactDOM.render instead. You should save yourself a lot of effort now and just use create-react-app and use this application. It takes all of the pain out of the tooling that you will need to make React fast to use (webpack hot module reloading). It is extremely simple compared to the average tooling you will need to setup taking any other route and is made by the people that make React. I can tell by the version number of React that you are using, the tutorial you are going of of is very old, a very longtime before Facebook released create-react-app when things were more difficult.
If you are going to go about it inline, use this in your head -
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
Full working example on React 15 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script>
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
EDIT: I see that you use babel-core browser.js, which has been deprecated, remove it and use React directly.
Remove script type and replace everything with:
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
jsbin demo
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>View Initialization</title>
<script type="text/javascript" src="js/jqyery.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
</head>
<body>
<script>
SearchView = Backbone.View.extend({
initialize: function(){
console.log("View is initialized");
}
});
var search_view = new SearchView();
</script>
</body>
</html>
Firebug is showing me following error:
TypeError: i is not a function
What is wrong with my code?
You appear to have a syntax error. You need to replace:
<script type="text/javascript" src="js/jqyery.js"></script>
with:
<script type="text/javascript" src="js/jquery.js"></script>
Note the spelling mistake in the first <script> has been replaced (jqyery).