I'm working on code that will a message for first time visitors using ColorBox. I've been bootstrapping code, and this is what I have so far...
<html>
<head>
<script type="text/javascript">
<script src="../colorbox/jquery.colorbox.js"></script>
<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>
<script>
function loadMsg()
{
$(document).ready(function(){
if ($.cookie('newsletter') != '0') {
$.colorbox({href:"newsletter.html"});
$.cookie('newsletter', '1', { expires: 60}); }
}}
</script>
</head>
<body onload="loadMsg()">
<h1>Hello World!</h1>
</body>
</html>
Will this keep the pop-up from showing up a second time. Can you help me figure out what am I missing?
What plugin are you using for cookies? I doubt that $.cookie('newsletter') returns the string value '0' when no cookie exists. I imagine it returns a falsey value. Are you sure it shouldn't be something like this:
if (!$.cookie('newsletter')) {
$.colorbox({href:"newsletter.html"});
$.cookie('newsletter', '1', { expires: 60}); }
}
Or drop the cookie plugin and write your own cookie detecting code. It isn't difficult for a one-off use case such as this.
The code above may be spitting is not a function and is undefined errors.
Here's the updated code that should work today (notice that I'm using the jQuery Cookie library):
<html>
<head>
<script type="text/javascript" src="/js/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/js/jquery-cookie/jquery.cookie.js"></script>
<script type="text/javascript">
function loadMsg(){
jQuery.noConflict();
jQuery(document).ready(function(){
if (!jQuery.cookie('popupcookie')) {
jQuery.colorbox({href:"newsletter.html", width: 640, height: 460});
jQuery.cookie('popupcookie', '1', { expires: 1}); }
})}
</script>
</head>
<body onload="loadMsg()">
<h1>Hello World!</h1>
</body>
</html>
This should get you going. The expiration time is set to 1 day in this example btw.
Related
I just started to learn using Vue. I wrote really simple code like the following.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<h2>{{number}}</h2>
<h2>Here it is!</h2>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
number:0
}
})
</script>
</html>
However, there is no number value.
But, when I open that code just by Ctrl+O on chrome, it shows succefully!
I definitely checked network by chrome dev tool and I got successfully vue.js from https://unpkg.com/vue#2.5.22/dist/vue.js What's wrong with it?
Loading the framework in the head is a good way to start.
See the example below, it works fine in here.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h2>{{number}}</h2>
<h2>Here it is!</h2>
<button #click="clk">click</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
number: 0
},
methods: {
clk(){
this.number++;
}
}
})
</script>
</body>
</html>
I thought you should return an object from a function for data.
data : function() {
return {
number : 0
};
}
I have written a html with a div.
I have two hbs files. I rendered one as partial and other as normal. I am not able to invoke action on the templates. I am getting missing helper error.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="holder">
</div>
<script src="js/libs/jquery-v1.11.1.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-v1.6.1.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
</body>
</html>
JS:
var data={title: "My New Post", body: "This is my first post!"};
function getTemplate(templateName,hbsPath,type){
$.ajax({
url: hbsPath, //ex. js/templates/mytemplate.handlebars
cache: true
}).done(function (src) {
if (type === "partial") {
Handlebars.registerPartial(templateName, $(src).html());
} else {
template = Handlebars.compile($(src).html());
temp=template(data);
$("#holder").append(temp);
}
});
}
getTemplate("dummy","/Test/templates/dummy.hbs","partial");
getTemplate("dummy","/Test/templates/application.hbs");
App = Ember.Application.create({});
App.Router.map(function(){
this.resource('dummy');
});
App.ApplicationController=Ember.ObjectController.extend({
needs:['dummy'],
actions:{
refresh: function(){
alert("application template refresh");
}
}
});
App.DummyController=Ember.ObjectController.extend({
actions:{
refresh: function(){
alert("dummy template refresh");
}
}
});
HBS:
application.hbs:
<script id="application" type="text/x-handlebars-template">
{{> dummy}}
</script>
dummy.hbs:
<script type="text/x-handlebars" data-template-name='dummy'>
<div {{action 'refresh' target="controllers.dummy"}}>
Refresh
</div>
<div {{action 'refresh'}}>
Refresh
</div>
</script>
The code in ur demo and the code in question are different. Here is a fixed demo based on the code in ur question.
Fixing the demo u provide may need you to include the vanilla handlebars library as ember is now using HTMLBars which is built on top of handlebars but a bit different.
Em.Handlebars.compile is now actually using HTMLBars compile method. You can see here.
You may need to use something like https://github.com/rwjblue/broccoli-ember-inline-template-compiler
I recently decided to try Ember.js.
I set up a small application, but I can't get something to work.
I have a file app.html
<!doctype>
<html>
<head>
...
</head>
<body>
<script type="text/x-handlebars">
...
</script>
</body>
</html>
Now, of course, this doesn't render anything. I include handlebars.js, ember.js, and app.js and now then everything renders properly.
The problem is that when I try to add something with curly braces, the output is blank. For example, if I set some variables in my JS files and want to display it in my app, like <h1>{{title}}</h1>, I get <h1></h1>. When I try to put {{input value="Username"}}, nothing gets displayed.
I get no error messages, except when I use closing tags. For example, this
{{#link-to "http://google.ca"}}Link{{/link-to}}
Will make my whole web page simply display
line 117: interleaved closing tag: link-to
I have no idea what is wrong. Even googling the error message doesn't help much.
Any hint?รง
UPDATE
This code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"></script>
<script type="text/javascript">
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
</script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
Link
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
</body>
</html>
Renders a blank page with this error message:
line 36: interleaved closing tag: each
I'm not sure that's normal.
link-to is meant for ember routes only. (http://emberjs.com/guides/templates/links/)
In your case I would just write the html for the link in the template directly.
Here is a small sample ember.js app with the google.ca link, I have a feeling that your html may not be setup correctly with an outlet and a template:
http://emberjs.jsbin.com/qivunivabo/3/edit
I found the problem and this is really stupid.
My HTML files are delivered by a framework that uses Mustache as its template engine (server side) and therefore it renders all the {{something}} tags before sending the output to the broswer.
:/
I am new to EmberJs. I want to make an ajax call which returns a string. And once I get the data from the ajax call, I want to load the data into a label. Where can I find a simple example for same.
Here's a simple version of what you're asking:
//js
App = Ember.Application.create();
App.IndexView = Ember.View.extend({
didInsertElement: function() {
Em.run.later(function() {
$.getJSON('http://baconipsum.com/api/?callback=?', {
'type': 'meat-and-filler',
'start-with-lorem': '1',
'paras': '3'
},
function(baconGoodness) {
if (baconGoodness && baconGoodness.length > 0) {
$("#bacon").html('');
for (var i = 0; i < baconGoodness.length; i++)
$("#bacon").append('<p>' + baconGoodness[i] + '</p>');
$("#bacon").show();
}
});
}, 800)
}
});
/*css*/
html,
body {
margin: 20px;
}
<!-- html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.6.1/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<div id="bacon">Loading bacon...</div>
</script>
</body>
</html>
As I have no clue what your application looks like, I'll just assume you have a view somewhere in your app that has a template with an html element with an id. If this is not your scenario.. that's fine, use the idea presented here and try to apply in your project.
For this sample, I created an index view with the following template:
<script type="text/x-handlebars" data-template-name="index">
<div id="bacon">Loading bacon...</div>
</script>
It only has a div called #bacon which I'm putting the response from some ajax request into.
Then in the IndexView class I added a handler for didInsertElement with an ajax request. This means that right after the Index view gets inserted into the DOM, it will fire this request.
App.IndexView = Ember.View.extend({
didInsertElement: function() {
Em.run.later(function() {
$.getJSON('http://baconipsum.com/api/?callback=?', {
'type':'meat-and-filler',
'start-with-lorem':'1',
'paras':'3'
},
function(baconGoodness) {
if (baconGoodness && baconGoodness.length > 0) {
$("#bacon").html('');
for (var i = 0; i < baconGoodness.length; i++) {
$("#bacon").append('<p>' + baconGoodness[i] + '</p>');
}
$("#bacon").show();
}
});
}, 800);
}
});
Another approach would be through the Route. You could have that ajax request in the model hook of your route, and then you can simply use handlebars expressions in your template. Something like this:
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
model: function() {
return $.getJSON('http://baconipsum.com/api/?callback=?', {
'type': 'meat-and-filler',
'start-with-lorem': '1',
'paras': '3'
});
}
});
html,
body {
margin: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.6.1/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<div>{{model}}</div>
</script>
</body>
</html>
That div doesn't need an id anymore, since we are using the controller's model property in the template:
<script type="text/x-handlebars" data-template-name="index">
<div>{{model}}</div>
</script>
Then the route implementation goes like this:
App.IndexRoute = Ember.Route.extend({
model: function() {
return $.getJSON(
'http://baconipsum.com/api/?callback=?', {
'type':'meat-and-filler',
'start-with-lorem':'1',
'paras':'3'
});
}
});
If this code doesn't apply to your scenario, try explaining it a little better. It really depends on what you are doing. Please follow the tutorials, read blogs, watch screen cats... keep your self up to date (not just ember).
This could have been done differently.. in many ways.. so it really depends on what you're doing.
I'd like to define a block helper that puts the text in the block into a tag. I used an example from http://handlebarsjs.com/block_helpers.html as a start but my code doesn't work. What do I have to change to get test as the output of this block helper?
app.js
App = Ember.Application.create();
Handlebars.registerHelper('link', function(options) {
var result = '' + options.fn(this) + '';
return Handlebars.SafeString(result);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<script type="text/x-handlebars">
<p>
{{#link}}
test
{{/link}}
</p>
</script>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src="js/ember.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</html>
Just a couple of details (EDITED):
You just need to create a new instance of Handlebars.SafeString before returning it. Please check #muistooshort's jsfiddle here with a working example of what you are trying to achieve.
Block helpers are a little bit more complex and used when is needed to invoke a section of a template with a different context. If it is not your case, you could use the syntax for regular Handlebars helpers. (I'll leave the following code here for future reference, although it's not relevant in this case)
Declare helper in app.js:
Ember.Handlebars.registerHelper('link', function(value) {
var result = '' + value + '';
return new Handlebars.SafeString(result);
});
In index.html replace your current template with:
<script type="text/x-handlebars">
<p>
{{link test}}
</p>
</script>
Hope this helps!