Develop Reference

How do I add event listeners to Handlebars templates after compilation?

I have a simple template setup that looks like this:
<script id="entry" type="text/x-handlebars-template">
<p>Some content</p>
<h2>Language Select:</h2>
<button type="button" class="btn btn-primary">English</button>
<h2>Ready:</h2>
<button type="button" id="play" class="btn btn-success">Play</button>
<button type="button" id="stop" class="btn btn-danger">Stop</button>
</script>
However, also in my document I have a script with the following content:
var playButton = document.querySelector('#play');
playButton.addEventListener('click', function (e) {
sendMessage('Cue', 'Play');
}, false);
Most of the time, (but not always) because of the async nature of javascript, this returns:
Uncaught TypeError: Cannot read property 'addEventListener' of null
If I wrap that code in a setTimeout of some amount, it will always work.
Can someone please explain to me the best way to add event listeners from scripts to generated template content?
I looked at this answer but it seems like the way they suggest is just to add a delay before adding the event listener.

Sorry, forget my previous answer.
You need render template for first, then insert this html to body...
var source = document.querySelector("#some-template").innerHTML;
var template = Handlebars.compile(source);
document.body.innerHTML = template();
and then add listeners...
http://jsfiddle.net/jwrae0n2/

Nested function in jQuery

I am new to javascript and jQuery. I am writing the following code to edit a portion of my web page. It is working perfect when I click on #edit_case first time but after clicking #cancel that returns me back. The #edit_case does not work.. What is wrong with this piece of code?
$("#edit_case").click(function(){
var oldHTML = $("#editable").html();
var newHTML;
newHTML = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>"
$("#editable").html(newHTML);
$('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">Save</button> <button class="btn btn-default btn-sm" id="cancel">Cancel</button></div>');
$("#cancel").click(function(){
$("#editable").html(oldHTML);
});
});
My HTML markup is like:
<div class="panel panel-default" id="editable">
<div class="panel-body">
Drop-down code
<li><a id='edit_case'>Edit</a><li>
Panel-Body Code...
</div>
Panel footer
</div>
When I click on Edit, the same text input fields appear as that on stackoverflow.com. On first time, Edit link works fine but when I cancel Edit both Edit and Delete do not work. I think click event is not occurring as I also have tried a check on it by using alert('test') and it isn't appeared after clicking on #cancel. Is this a problem of unbinding event? If it is, how would I correct it?

since the cancel button was not in the dom at first and since you are removing the edit_case, you need to do it with an ".on" put this code in the loading, not in the click event. if you put it in the click event, you will have multiple event that will be registered.
with working fiddle:
https://jsfiddle.net/2hjr6g94/
$(document).on('click','#cancel',function(){
$("#editable").html(oldHTML);
});
var oldHTML = $("#editable").html();
$(document).on('click','#edit_case',function(){
var oldHTML = $("#editable").html();
var newHTML;
newHTML = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>"
$("#editable").html(newHTML);
$('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">Save</button> <button class="btn btn-default btn-sm" id="cancel">Cancel</button></div>');
});

After running it once, the new html is in the variable value of "oldHtml". You need to store the old HTML outside of this functionality, so it is preserved.
Here is the process you are doing right now:
Get html.
Load new html.
Get html (now new html).
load oldHtml (still new html).
oldHtml gets overridden and stored everytime this function is called.

HTML Button redirects pages

I have the following button:
<div class="form-group">
<button onclick="assign_all()" class="btn btn-default">Vælg alle</button>
</div>
Now this calls a JavaScript function called assign_all
This works fine however when it is done executing the JavaScript it simply tries to load a page. Which is fairly odd (its like if you click on an A tag)
As you can see below nothing in my javaScript indicates that it should reload / load a page:
function assign_all() {
var info = [];
var i = 0;
$('.user_list').each(function () {
if ($(this).hasClass('show')) {
info[i] = $(this).find('.user_id').val();
i++;
}
})
}
Can anyone tell me why this is happening?

It's because the default button element's type attribute is set to submit. Your button element is attempting to submit a form. Simply give it a type of button:
<button onclick="assign_all()" class="btn btn-default" type="button">...</button>

Add type="button" to your button tag. it must solve the issue

you can do this also
<button onclick="assign_all();return false;" class="btn btn-default">Vælg alle</button>

onClick element not working

I want to save the input of some fields in variables after a click on a button (I am using Bootstrap btw). This is my function:
<script>
function test () {
var test1 = document.getElementById("nameown").value;
javascript.alert( 'test1' )
}
</script>
and this is my button:
<div id="button">
<onclick="test()" class="btn btn-success btn-large">
Example...
</a>
</button>
</div>
When I click on the button nothing happens...
As a annotation: I am a HTML and JavaScript beginner.

Let's see..
There's no element with an id of nameown.
If anything, it would be window.alert(), but just alert() is fine.
You're alerting the literal string "test1" instead of the variable.
onclick is not an element.
You don't have an opening a tag.
You don't have an opening button tag.
I think this is what you were going for:
<script>
function test() {
var test1 = document.getElementById("button").value;
alert(test1);
}
</script>
<div id="button" onclick="test()" class="btn btn-success btn-large">
Example...
</div>
There are more elegant ways of doing this, as well as shortcuts, but you'll get there if you stick with it.

Your HTML is incorrect. It should look like this:
<div id="button" onclick="test()" class="btn btn-success btn-large">
Example...
</div>
or
<button onclick="test()" class="btn btn-success btn-large">
Example...
</button>
I was really caught up in that mess of HTML and didn't pay attention to the script. It is pretty bad. Let me give you a few pointers. Start with HTML and learn the basics. wcshcools is a start. Then move on to javascript like that you were attempting above. You probably wanted something like this:
<script>
function test() { //Create the function test
var test1 = document.getElementById("nameown").value; //Get the element with id="name own" and assign it to a variable named "test1"
console.log(test1); //log the value of the variable "test1"
}
</script>
I went with console.log because it is a way better way to test code. For instance if you looped that function you would have a problem in some browsers. To view the console check out firebug for firefox or use the dev console in Chrome or Safari. Learn the dev console. It will come in handy.

you shouldn't have a < before onclick. Is that a typo? Is there a lot of other extra stuff there too?
<div id="button" onclick="test()" class="btn btn-success btn-large">
Example...
</div>

You're missing the tag "a"
<div id="button">
<a onclick="test();" class="btn btn-success btn-large">
Example...
</a>
</div>
and the JS:
function test () {
var test1 = document.getElementById("nameown").value;
alert( 'test1' );
}

You should also change your javascript to the following to alert the value of the element with id nameown:
<script>
function test() {
var test1 = document.getElementById("nameown").value;
alert( test1 );
}
</script>
that is, change javascript.alert( 'test1' ) to alert( test1)

1 ) Your html is incorrect :
instead of
<onclick="test()" class="btn btn-success btn-large">
use
<button onclick="test()" class="btn btn-success btn-large">
2) Use alert() instead of javascript.alert().
3) Add an element with id as "nameown".
In addition Use browser developer tool to know more about javascript errors in console or use Firebug For firefox
http://getfirebug.com/

alert message does not pop up

I have put the code on jsfiddle.net.
The problem I am having is that the function does not seem to get called when showToast button is clicked.
The actual code
<button type="button" onClick="showAndroidToast('Hello Android!')">Show Toast</button><br/>
function showAndroidToast(name){
alert("hi");
}
I got the error:
ReferenceError: Can't find variable: showAndroidToast;
Anyone help? Thanks!

The problem is that it is not onClick but onclick, and your function should be declared in some cases like this:
<script>
window.showAndroidToast = function(){
//code
};
</script>
<button type="button" onclick="window.showAndroidToast('Hello Android!')">
Show Toast
</button>
This is just to be found globally, just to be sure it is not a problem with the browser itself.

Remove type from your button tag:
<button onClick="showAndroidToast('Hello Android!')">Show Toast</button><br/>
//and check
Hope it helps