Develop Reference

Custom Javascript Thumbnail Slider

I have been working on creating a custom javascript thumbnail slider using data-src. Everything is working perfectly just the next button and prev button is not working at all. Any help would be appreciated.
Here is the link to the codepen
https://codepen.io/mandipluitel/pen/BbOXgZ
I am using this code.
$(document).ready(function(e){
$(".thumbnails li").click(function(e){
var thisDataSrc = $(this).attr("data-src");
var thisDataCount = $(this).children().attr("data-count");
if(thisDataSrc == "undefined"){}
else{
$(this).siblings("li").removeClass("active");
$(this).addClass("active");
$(this).parents(".thumbnails").next().find("img").attr("src",thisDataSrc);
$(this).parents(".thumbnails").next().find("span.number").html("" + thisDataCount + "");
}
});
$("button.next").click(function(e) {
var currentDiv = 0;
var newDataSrc = $(this).parents(".slider-hold").prev().find(".active").attr("data-src");
if(newDataSrc == "undefined"){}
else{
currentDiv = currentDiv .next();
currentDiv.siblings("li").removeClass("active");
currentDiv.addClass("active");
currentDiv.parents(".thumbnails").next().find("img").attr("src",newDataSrc);
}
});
});
Help here.

the problem is that currentDiv is set to zero. So when you later set it to currentDiv.next(), it doesn't really do anything.
I belive that the function should start something like this:
$("button.next").click(function(e) {
var currentLi = $("li.active");
var nextLi = currentLi.next();
if (nextLi) {
nextLi.siblings("li").removeClass("active");
nextLi.addClass("active");
$("#large-image").attr("src",nextLi.attr("data-src"));
}
});

Using OR condition in combined attribute selector

I asked this question earlier and got it solved:
AND selector jQuery
But now I would like to know how I could add an OR condition to it.
I have this statement:
$('div.job:not([data-province="'+province+'"][data-employment="'+employment+'"][data-education="'+education+'"][data-branch="'+branch+'"])').fadeOut('slow');
And now I would like to fade them out if for example data-province="'+province+'" OR data-province="" (so empty).
Jsbin:
http://jsbin.com/qomub/14/edit

Try filter() with multiple selector
$('div.job').filter('[data-province="' + province + '"], [data-province=""]').fadeOut('slow');
Based on the update
$(document).ready(function () {
var $jobs = $('.job');
var $selects = $("#province, #employment, #education, #branch").on("change", function () {
var $filtered = $jobs;
$selects.each(function () {
if (this.value) {
$filtered = $filtered.filter('[data-' + this.id + '="' + this.value + '"], [data-' + this.id + '=""]');
}
});
$filtered.show();
$jobs.not($filtered).hide();
});
});
Demo: Fiddle

jQuery getting .preventDefault() to work on generated elements

I'm having a bit of a problem with getting the .preventDefault to work on some elements I am generating via JQuery.
I am getting a JSON file using the following code and putting the data into individual p elements:
$.getJSON(searchURL, function(data) {
$.each(data, function(key, value) {
if (typeof value === 'object') {
for (var i = 0; i < data.count; i++) {
var fullPlayerURL = "<p class='entry'>" + "<a href=" + playerURL + data.data[i].id + ">"
+ "Nickname - " + data.data[i].nickname + "</a>" + "</p>"
$('#results').append(fullPlayerURL);
}
}
});
}); //end getJSON
Then I'm using the following code to stop the link from redirecting when clicked (links to another JSON file):
$('.entry').click(function(event) {
event.preventDefault();
var linkClicked = $(this).attr("href");
console.log(linkClicked);
});
I don't know if it matters but #results is just an empty div.
Here's all the code if this isn't enough info (sorry it's such a mess).

You'll need delegated event handlers for dynamic elements
$('#results').on('click', '.entry', function(event){
event.preventDefault();
var linkClicked = $('a', this).attr("href");
console.log(linkClicked);
});

Sorry, I'm not allowed to comment on adeneo's answer.
For me var linkClicked = $('a', this).attr("href"); gives undefined.
I had to make var linkClicked = $(this).attr("href"); out of it.
Edit: Know it, I wanted to address the anchor.
$('#results').on('click', 'a', function(event) {
event.preventDefault();
var linkClicked = $(this).attr("href");
console.log(linkClicked);
});

Jquery Json not working properly

I have the following which works fine:
$('<li><a id=' + loc.locId + ' href="/DataEntry" rel="external">' + loc.locName + '</a></li>').appendTo("#btnList");
$("#btnList a").click(function () {
alert(siteName);
localStorage["dataEId"] = $(this).attr("id");
localStorage["dataESiteName"] = siteName;
localStorage["dataESysName"] = sysName;
localStorage["dataELocName"] = $(this).text();
}
When I have the following, I can't even get to the click to display an alert message:
$.getJSON('/Home/GetLocType', { "locId": loc.locId }, function (result) {
var str = JSON.stringify(result);
if (str == '1') {
$('<li><a id=' + loc.locId + ' href="/DataEntry" rel="external">' + loc.locName + '</a></li>').appendTo("#btnList");
} else {
$('<li><a id=' + loc.locId + ' href="/DataEntry/PotableForm" rel="external">' + loc.locName + '</a></li>').appendTo("#btnList");
}
$("#btnList").listview('refresh');
});
$("#btnList a").click(function () {
alert(siteName);
localStorage["dataEId"] = $(this).attr("id");
localStorage["dataESiteName"] = siteName;
localStorage["dataESysName"] = sysName;
localStorage["dataELocName"] = $(this).text();
}
Note sure what the difference is. I need to use Json as based on value, I need to go to a either of the 2 hyperlinks.

Use event delegation since anchor is created dynamically in your ajax call or bind the event (only for the added element) inside the ajax success callback. on syntax will work if your jquery version >= 1.7 for earlier versions take a look at live
$("#btnList").on('click', 'a', function () {
alert(siteName);
localStorage["dataEId"] = $(this).attr("id");
localStorage["dataESiteName"] = siteName;
localStorage["dataESysName"] = sysName;
localStorage["dataELocName"] = $(this).text();
}
Your first syntax works because it binds the click event to the anchor that exists underneath btnList, but it doesn't bind event to the ones added during the ajax calls in a later point in time.

get id of child element when parent is clicked

Hello I have seen similar posts but none answer what I want to accomplish
I made a sample here
http://jsfiddle.net/edgardo400/R6rVJ/
What i basically want is when a click happens in the parent you get the id of the child
and store it in a variable so i can pass the variable currentID to the code below otherwise I will have to replicate this code 9 times for each id from box1 to box9
jQuery(currentID).delegate("a", "hover", function(event){
var $img = jQuery(this).parent("li").find('img');
var image = jQuery(this).attr('data-img');
jQuery('.defaultimg').stop(true, true).fadeOut();
if( event.type === 'mouseenter' ) {
if($img.length){
$img.show();
}else{
jQuery(this).parent("li").append('<img id="theImg" src="' + image + '" />');
}
}else{
if($img){
$img.hide();
}
jQuery('.defaultimg').stop(true, true).fadeIn();
}
});
});

$('#boxes').on('click', function(e) {
var currentID = e.target.id;
console.log(currentID);
......rest of code

In javascript it would be:
var a = document.getElementById('#boxes');
a.onclick = function(e){
console.log(e.target.id);
}

If you only wish to make your code working and displaying on your console the box name, you should probably set
jQuery('#boxes').bind('click', function(event) {
var currentID = jQuery(event.srcElement).attr('id');
/* rest of your code */
});
You might want to do something easier
jQuery('#boxes').children().bind('click', function() {
jQuery(this).delegate...
});
Although I'm not sure why you are doing this ...
fixed http://jsfiddle.net/nxTDA/