I am trying to learn mustache js but the basic page does not work.
I was following the http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/ but it is out of the date.
(Currently the basic html doesn't work. In the future I would like to use get JSON in script to get data from json files.)
Am I missing anything?
<!DOCTYPE <!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8"/>
<title>messages</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js">
</script>
</head>
<body onload="loadUser()">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ subject }}!
</script>
<script>
function loadUser() {
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {subject: "Luke"});
$('#target').html(rendered);
}
});
</script>
</body>
</html>
Syntax error. Remove extra brackets at the bottom (commented out in the code below).
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8"/>
<title>messages</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js">
</script>
</head>
<body onload="loadUser()">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ subject }}!
</script>
<script>
function loadUser() {
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {subject: "Luke"});
$('#target').html(rendered);
}
// }); <-- here
</script>
</body>
</html>
Related
I am trying to access this url via javascript to loaf a function in my js page:
url which contains a function
Then I will easily call the function and load some info.
I have the following code:
document.write('<SCRIPT LANGUAGE=JavaScript SRC="https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads"></SCRIPT>');
OAS_RICH('UNKNOWN');
and my html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="mobile-ad">
<div class="sidebox advertisement">
<script type="text/javascript" src="/test/ads.js"></script>
</div>
</div>
Now my problem when I run it I get "Uncaught ReferenceError: OAS_RICH is not defined" which means that the function loading does not work via
Can anyone help why it is not working ? Am I missing anything?
why you are not putting your script balise directly in the head of the html page.
Then at the end of the body you add a script that call your function.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads"></script>
</head>
<body>
<div id="mobile-ad">
<div class="sidebox advertisement">
<script type="text/javascript" src="/test/ads.js"></script>
</div>
<script>
OAS_RICH('UNKNOWN');
</script>
</div>
</body>
You need this:
<script id="adscript"></script>
<script>
var adScript = document.getElementById("adscript");
adScript.addEventListener("load", function () {
OAS_RICH('UNKNOWN');
});
adScript.src = "https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads";
</script>
I want to get data from other page with js or jquery or ajax but not php. I just found a sample on stack overflow. (here is the link) But when I write these codes on my index.html file, it doesn't work. I don't understand reason. Here is my codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type=”text/javascript”>
var url='http://query.yahooapis.com/v1/public/yql?q=select * from html where url=\'https://stackoverflow.com/\' and xpath=\'//div[#id="question-mini-list"]//h3//a\'&format=json&callback=?';
$.getJSON( url, function(data){
$.each(data.query.results.a, function(){
$('body').append('<div>'+this.content+'</div>');
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
it works as it is...
var url='http://query.yahooapis.com/v1/public/yql?q=select * from html where url=\'http://stackoverflow.com/\' and xpath=\'//div[#id="question-mini-list"]//h3//a\'&format=json&callback=?';
$.getJSON( url, function(data){
$.each(data.query.results.a, function(){
$('body').append('<div>'+this.content+'</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
I solved my problem these codes, thank for your help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var url = 'deneme.html';
$.get(url, function(response) {
$('div#external').html($(response).find('#content>ul>li').html());
});
});
</script>
<style> body, html{padding: 0; margin:0;}</style>
</head>
<body>
<div id="external" >
</div>
</body>
</html>
So I have the following index.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="public/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="public/js/main.js"></script>
</body>
main.js
(function($){
// Object declarations goes here
var FormLoanView = Backbone.View.extend({
tagName: 'div',
template: _.template('<p class="text-uppercase">Uppercased text.</p>'),
initialize: function(){
var data = this.$el.html(this.template())
$('body').html(data)
}
})
$(document).ready(function () {
var LoanView = new FormLoanView({
});
});
})(jQuery);
I am trying to create <p class="text-uppercase">Uppercased text.</p> and append it to the body in my index.html. It does return the p element, but the bootstrap styles don't kick in because "Uppercased text." does not return with uppercase letters. Anyone know why this is happening? Can bootstrap classes not be using in _.template?
It looks like your bootstrap.css isn't included properly. Try using the CDN or fixing the relative path of the css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="public/js/main.js"></script>
</body>
Here's an example using only the CSS: https://jsfiddle.net/9nm5f0x9/
You don't need to include the bootstrap JS file as another commenter stated.
I am very new to web development. I am trying to use jquery to show slider on the web-page. However, I am not able to see the silder on the web-page. I tried debugging the code via. firebug. However, I don't see any error over there. Can somebody please tell me on what I am missing possibly?
I am using Linux - Fedora core 16 and Firefox- 38.0.5 to run this code
index.html
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
Here is the jqueryTutorial.js file.
(function() {
$("#slider").slider();
})();
There are no errors in the firebug console.
Here is the screen shot.
Finally, I did the following from the source - jquery slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Now, I see the following error on the firebug.
ReferenceError: $ is not defined
$(function() {
index.html (line 11, col 2)
Try this:
jQuery(document).ready(function () {
(function() {
$("#slider").slider();
})();
});
EDITED:
Ok , the issue comes from the tags.
You wrote this:
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
And you HAVE to write this:
<!DOCTYPE html>
<html>
<head>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
</head>
<body>
<div id="slider"> </div>
</body>
</html>
;-)
EDITED AGAIN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
jQuery(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Include your <script> tags before closing body tag </body>. Moreover you have some mistakes in your markup, like the <title> should be inside <head> tag( for heading use <h1> upto <h7> tags ). Like this:
<!DOCTYPE html>
<html>
<head>
<title>"My Page"</title>
</head>
<body>
<h1>hello jQuery</h1>
<div id="slider"></div>
<!-- load scripts -->
<script src="jquery-2.1.4.min.js">
</script>
<script src="js/jquery-ui.js">
</script>
<script src="js/jqueryTutorial.js">
</script>
</body>
</html>
And your javascript will simply be:
$('#slider').slider();
if that doesn't works try:
$(document).ready( function () {
$('#slider').slider();
}
Because if you include them at beginning, whole HTML document will not be completely loaded at the time the scripts get executed, so the script won't be able to find elements.
And I don't think .slider() gives you what you want. I suggest you learn more first. Try www.codecademy.com
I got problem with EmberJS I can't understand
The problem could be found in the jsfiddle:
http://jsfiddle.net/wLKKQ/
JS :
var fileUploader = [] || fileUploader;
fileUploader.app = Em.Application.create();
fileUploader.app.userDetailsView = Em.View.create({
clientIP: null
});
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<script type="text/x-handlebars">
{{#view fileUploader.app.userDetailsView}}
<h2>Hello Guest, your IP is: {{clientIP}}</h2>
{{/view}}
</script>
<script>
$(function () {
fileUploader.app.userDetailsView.set('clientIP', '::1');
});
</script>
</body>
</html>
I get the following error:
Uncaught Error: assertion failed: Unable to find view at path 'fileUploader.app.userDetailsView'
There are several problems in your code.
Ember.Application should be in an uppercase namespace (see The Emberist blog).
You must pass a view class to the #view helper, not an instance (you consequently have to replace Ember.View.create with Ember.View.extend.
Your script that edit the clientIP does not work, because now FileUploader.app.userDetailsView is a class. You can do the same thing with didInsertElement Ember.View method.
In your template, you have to specify view.clientIP, according to View Context Changes.
Now this JSFiddle work :
FileUploader = [] || fileUploader;
FileUploader.app = Em.Application.create();
FileUploader.app.userDetailsView = Em.View.extend({
clientIP: null,
didInsertElement: function() {
this.set("clientIP", "::1");
}
});
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<script type="text/x-handlebars">
{{#view FileUploader.app.userDetailsView}}
<h2>Hello Guest, your IP is: {{view.clientIP}}</h2>
{{/view}}
</script>
</body>
</html>