Develop Reference

Making this JS code unobtrusive. Writing an event listener for unknown id

I've been building out the functionality for this UI. These are a pair of tabs I want to write a listener for, to make my js unobtrusive. It was blocking me from going forward. Now that I'm refactoring, it's time to fix it. I want to write an event listener that gets the id of the tab that was clicked, and assigns it to a variable. This is what I have:
<ul id="gal">
<li class="glyphicons camera active" onclick="pullActive(this.id);" id="viewAll"><a href="#" ><i></i> View all photos <strong>(43) </strong></a>
</li>
<li class="glyphicons circle_plus tab-stacked" onclick="pullActive(this.id);" id="addPhotos"><i></i> <span>Add Photos</span>
</li>
</ul>
function pullActive(id){
// gets the class for that id
var getClassy = document.getElementById(id).className;
findClass(getClassy, id);
loadNew();
}

without jQuery you would have to do
var item = document.querySelector("#gal");
item.attachEventHandler("click", function(ev) {
if (ev.target.tagName === "LI") {
var id = ev.target.id;
// ...
}
});
In jquery (as you tagged your question like this) it would look like this
$(function() {
$("#gal").delegate("li", "click", function() {
var id = this.id;
// ...
});
});

jQuery solution:
$('#gal li').on('click', function () {
var className = $(this).attr('class');
var id = this).id;
console.log(className, id);
});
Vanilla solution:
[].forEach.call(document.querySelectorAll('#gal li'), function (glyphicon) {
glyphicon.addEventListener('click', function () {
var className = glyphicon.className;
var id = glyphicon.id
console.log(className, id);
});
});
Here is a fiddle containing both examples.

Using jQuery, this would be
$( document ).ready(function() {
$( '#gal' ).on( 'click', 'li', function() {
var id = this.id
});
});
The benefit of this approach is that you only have one event handler (defined on the ul) vs. having one for each li. Hope this helps.

javascript toggle visibility and add function preventDefault

i´m trying to display popup-divs within a site and it works quite well, except for one thing –
i want to prevent the Default behavior of refreshing the site. I´m new to javascript and i honestly don´t know how to add the function (i already found the right one, i think...).
<script type="text/javascript">
function toggleVisibility(selectedPopup) {
var popvar = document.getElementsByClassName('popup');
for(var i=0; i<popvar.length; i++) {
if(popvar[i].id == selectedPopup) {
popvar[i].style.visibility = 'visible';
} else {
popvar[i].style.visibility = 'hidden';
}
}
}
It works like i wanted it to work – it displays the selected DIV, hides the other and vice versa.
Still, i want to prevent the site from jumping to the top. So i added this snippet:
$(function() {
$("#").click(function(event){
event.preventDefault()
});
});
The responding html is this:
<a href="#" onclick="toggleVisibility('pop01');">
and this
<div id="pop01" class="popup">
<img src="assets/img/01/01_02_pop_01.png"></img>
</div>
How can i include the second javascript snippet into the first one?
Many thanks in advance...

You should just be able to pass event into your function.
The HTML
<a href="#" onclick="toggleVisibility(event, 'pop01');">
The Javascript (partial)
function toggleVisibility(event, selectedPopup) {
event.preventDefault();
var popvar = document.getElementsByClassName('popup');
// etc...
}
I believe that should do it!
JSFiddle Example: http://jsfiddle.net/c4LXf/

As an alternative you can just remove the # and replace with javascript:;
<a href="javascript:;" onclick="toggleVisibility('pop01');">
Or remove the onclick and just use the href:
<a href="javascript:toggleVisibility('pop01');">

Instead of
$(function() {
$("#").click(function(event){
event.preventDefault()
});
try
$(function() {
$("#").click(function(event){
return false;
});

You can just use following:
<a href="#" onclick="return toggleVisibility('pop01');">
If you add a return false in your function:
function toggleVisibility(selectedPopup) {
// your code ...
return false;
}
Or, Change your link like:
<a href="javascript:toggleVisibility('pop01');">

The show/hide function is not working with the clone function

I have a problem triggering the show() and hide () function in jQuery when I use it together with the .clone() function.
There isn't any problem showing or hiding the first id but when it comes to a cloned id, showing or hiding doesn't work on it.
Here's a sample js of it:
var $country = $('#country')
$('#add-countries').on('click', function () {
$(this).before($country.clone());
});
$('#morelocal').on('click', function () {
$('#showzipcode').toggle();
$('#morelocal').hide();
});
$('#hidezipcode').on('click', function () {
$('#morelocal').show();
$('#showzipcode').hide();
});
Full jsfiddle here: http://jsfiddle.net/stan255/Wh274/7/

Since you are cloning the elements
It is better to use classes instead of ids because id of an element must be unique
And need to use event delegation to support dynamically added elements
so
<div>
<!-- use class instead of id -->
<a href="#" class='morelocal'>
Track ZIP/Postal code
</a>
<!-- use class instead of id -->
<span class='showzipcode'>
<input type="text" placeholder="e.g: 30196"/>
<a href="#" class='hidezipcode'>cancel</a>
</span>
</div>
then
var $country = $('#country')
$('#add-countries').on('click', function () {
var $clone = $country.clone().removeAttr('id');
$(this).before($clone);
$clone.find('.morelocal').show();
$clone.find('.showzipcode').hide();
});
//use event delegation
$(document).on('click', '.morelocal', function () {
var $div = $(this).closest('div');
$div.find('.showzipcode').show();
$div.find('.morelocal').hide();
});
$(document).on('click', '.hidezipcode', function () {
var $div = $(this).closest('div');
$div.find('.morelocal').show();
$div.find('.showzipcode').hide();
});
Demo: Fiddle, Fiddle2

How to fix clicking functionality with javascript?

I have the javascript/html below. When the user clicks on 'heart' or 'coal' it switches to the opposite. However, it only works for 1 click. If I click on 'heart' once, it turns into 'coal'...but if I click on 'coal' now, it doesn't turn into 'heart' again. Any idea on how to fix this?
<script>
$(document).ready(function(){
$('.like').click(function (e) {
$(this).parent().html("<a href = '#' class = 'unlike'><div class = 'heart'></div></a>");
console.log('liked');
return false;
})
$('.unlike').click(function (e) {
$(this).parent().html("<a href = '#' class = 'like'><div class = 'coal'></div></a>");
console.log('unliked');
return false;
})
})
</script>
<div>
<a href = "#" class = 'unlike'>
<div class = "heart"></div>
</a>
</div>

Use
$('body').on('click', '.like', function () {
});

The problem you are facing is because you are adding dynamically an element (by destroying and recreating it), and the new element have no event click handler bound to it.
The solution is the use of event delegation, you can use jQuery on.
Another solution is instead of create again and again the clicked element, add a generic class, and in its click change the inner HTML and switch the like/unlike classes.
Code:
<div> <a href="#" class='handler unlike'>
<div class = "heart">aa</div>
</a></div>
JS:
$(document).ready(function () {
$('.handler').click(function (e) {
if ($(this).hasClass('like')) {
$(this).html("<div class = 'heart'>aa</div>");
} else {
$(this).html("<div class = 'coal'>bb</div>");
}
$(this).toggleClass('unlike');
$(this).toggleClass('like');
return false;
})
})
Demo: http://jsfiddle.net/At3D9/

#meavo is correct.
Here is a sample jsfiddle with a code sample similar to what you posted.
http://jsfiddle.net/Q2pDG/
$(document).on("click", '.like', function (e) {
$(this).parent().html("<a href = '#' class = 'unlike'><div class = 'heart'></div></a>");
return false;
});
$(document).on("click", '.unlike', function (e) {
$(this).parent().html("<a href = '#' class = 'like'><div class = 'coal'></div></a>");
return false;
});

Pass value to function from <a> tag, not from button

Consider the following link and associated Javascript function:
<a class="someClass" href="#" onClick="someFunc('someVal'); return false;">Run someFunc</a>
function someFunc(val) {
doSomething(val);
}
I would prefer to refactor the link and Javascript function to support some additional functionality (the link is actually in a div returned by AJAX):
<a class="someClass" href="#" someAttribute="someVal">Run someFunc</a>
$(".someClass").click(function(e) {
e.preventDefault();
// How to get value of someAttribute?
doSomething(val);
});
How can I get the value of someAttribute? Thanks.

Use attr() method
$(".someClass").click(function(e) {
e.preventDefault();
// How to get value of someAttribute?
alert( $(this).attr('someAttribute'));
});
DEMO: http://jsfiddle.net/buC8k/
API refrence: http://api.jquery.com/attr/

The clicked element is this. You may use the attr function :
var someValue = $(this).attr('someAttribute');