We Keep Coding

Why Does That JS Code Not Work For Anything Except The First Class On The Page?

The following JS code turns on/off the in-site search, but there is a .search-button button in 2 places on the page, first one works but second one does not work. If I add more, they also do not work. Can I get this code to run on all classes on the page that contain a .search-button?
var wHeight = window.innerHeight;
var sb = document.querySelector(".search-button");
var closeSB = document.querySelector(".search-close");
var SearchOverlay = document.body;
var searchBar = document.querySelector(".search-bar");
// Show
searchBar.style.top=wHeight/2 +'px';
console.log(wHeight);
window.addEventListener("resize", function() {
console.log(wHeight);
wHeight = window.innerHeight;
searchBar.style.top=wHeight/2 + 'px';
}, true);
document.addEventListener("click", function() {
sb.onclick = function() {
console.log("Opened Search for Element: ");
SearchOverlay.classList.add("show-search");
};
// Hide
closeSB.onclick = function() {
console.log("Closed Search for Element: " + closeSB);
SearchOverlay.classList.remove("show-search");
};
}, true);

It's because you're using document.querySelector() which returns the first element matching your query. For more details check https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector.
To query all elements with same class you need to use document.querySelectorAll() which returns all elements matching as an array. Then, you can use the array forEach() function to iterate over all elements and add event function for all.
var sb = document.querySelectorAll(".search-button");
sb.forEach(el => el.onclick = function(e) {
console.log("Opened Search for Element: ");
SearchOverlay.classList.add("show-search");
});
Update: You can also simplify your

How to find child element using variable selector within parent built with incrementing variable

Trying to add an incrementing class name to an element (rows in an ajax cart), while doing the same to one of it's child elements (images within each cart row).
After the items are numbered, show the matching image that has the same number in class name.
ex. cartitem-1 shows cartimage-1
var itemCount=0;
var imgCartCount=0;
if ($('.ajax-cart-row').length) {
// itemize cart rows
$('.ajax-cart-row').each(function() {
itemCount++;
var cartItemNumber = 'cartitem-'+itemCount;
$(this).addClass(cartItemNumber);
$(this).val(itemCount);
console.log('cart numbers loaded');
});
// itemize images in cart
$('.ajax-cart-row img').each(function() {
IMGCount++;
var cartImgs = 'cartimg-'+IMGCount;
$(this).addClass(cartImgs);
$(this).val(IMGCount);
$(this).closest('.ajax-cart-row').find('[class*='+cartImgs+']').show();
console.log('image numbers added');
});
}
edit: There are multiple cartitem-# img elements without any individual classes/ids/filenames to go by. That's what this is for hopefully.
Hopefully I'm not just sleep deprived here... Thanks in advance

I'm not sure exactly what you're going for, or what is wrong with your code (except that "show" simply ensures that the element is not hidden - maybe your images are hidden by default?). See if something like this makes any difference:
var itemCount=0;
if ($('.ajax-cart-row').length) {
// itemize cart rows
$('.ajax-cart-row').each(function() {
itemCount++;
var cartItemNumber = 'cartitem-'+itemCount;
var cartRow = $(this);
cartRow.addClass(cartItemNumber);
cartRow.val(itemCount);
console.log('cart numbers loaded');
// add class to the image subelements (assumes only one, or that the same class is added to all img children of cartitem-#)
var imageIdx = 0;
cartRow.find("img").each(function() {
imageIdx++;
var cartImgs = 'cartimg-'+imageIdx;
var cartImg = $(this);
cartImg.addClass(cartImgs);
cartImg.val(itemCount);
if (imageIdx === itemCount) {
cartImg.show();
}
console.log('image numbers added');
});
});
}
This should ensure that all img children of an itemized .ajax-cart-row will receive the same index in the class name as the row received (i.e. all img tags within cartitem-1 will receive a the cartimg-1 class). I hope that is what you are looking for.

Event listener fails to attach or remove in some contexts

I've created a script that attaches an event listener to a collection of pictures by default. When the elements are clicked, the listener swaps out for another event that changes the image source and pushes the id of the element to an array, and that reverses if you click on the swapped image (the source changes back and the last element in the array is removed). There is a button to "clear" all of the images by setting the default source and resetting the event listener, but it doesn't fire reliably and sometimes fires with a delay, causing only the last element in a series to be collected.
TL;DR: An event fires very unreliably for no discernible reason, and I'd love to know why this is happening and how I should fix it. The JSFiddle and published version are available below.
I've uploaded the current version here, and you can trip the error by selecting multiple tables, pressing "Cancel", and selecting those buttons again. Normally the error starts on the second or third pass.
I've also got a fiddle.
The layout will be a bit wacky on desktops and laptops since it was designed for phone screens, but you'll be able to see the issue and inspect the code so that shouldn't be a problem.
Code blocks:
Unset all the selected tables:
function tableClear() {
//alert(document.getElementsByClassName('eatPlace')[tableResEnum].src);
//numResTables = document.getElementsByClassName('eatPlace').src.length;
tableArrayLength = tableArray.length - 1;
for (tableResEnum = 0; tableResEnum <= tableArrayLength; tableResEnum += 1) {
tableSrces = tableArray[tableResEnum].src;
//alert(tableSrcTapped);
if (tableSrces === tableSrcTapped) {
tableArray[tableResEnum].removeEventListener('click', tableUntap);
tableArray[tableResEnum].addEventListener('click', tableTap);
tableArray[tableResEnum].src = window.location + 'resources/tableBase.svg';
} /*else if () {
}*/
}
resTableArray.splice(0, resTableArray.length);
}
Set/Unset a particular table:
tableUntap = function () {
$(this).unbind('click', tableUntap);
$(this).bind('click', tableTap);
this.setAttribute('src', 'resources/tableBase.svg');
resTableArray.shift(this);
};
tableTap = function () {
$(this).unbind('click', tableTap);
$(this).bind('click', tableUntap);
this.setAttribute('src', 'resources/tableTapped.svg');
resTableArray.push($(this).attr('id'));
};
Convert the elements within the 'eatPlace' class to an array:
$('.eatPlace').bind('click', tableTap);
tableList = document.getElementsByClassName('eatPlace');
tableArray = Array.prototype.slice.call(tableList);
Table instantiation:
for (tableEnum = 1; tableEnum <= tableNum; tableEnum += 1) {
tableImg = document.createElement('IMG');
tableImg.setAttribute('src', 'resources/tableBase.svg');
tableImg.setAttribute('id', 'table' + tableEnum);
tableImg.setAttribute('class', 'eatPlace');
tableImg.setAttribute('width', '15%');
tableImg.setAttribute('height', '15%');
$('#tableBox').append(tableImg, tableEnum);
if (tableEnum % 4 === 0) {
$('#tableBox').append("\n");
}
if (tableEnum === tableNum) {
$('#tableBox').append("<div id='subbles' class='ajaxButton'>Next</div>");
$('#tableBox').append("<div id='cazzles' class='ajaxButton'>Cancel</div>");
}
}

First mistake is in tapping and untapping tables.
When you push a Table to your array, your pushing its ID.
resTableArray.push($(this).attr('id'));
It will add id's of elements, depending on the order of user clicking the tables.
While untapping its always removing the first table.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
resTableArray.shift(this);
So, when user clicks tables 1, 2, 3. And unclicks 3, the shift will remove table 1.
Lets fix this by removing untapped table
tableUntap = function () {
$(this).unbind('click', tableUntap);
$(this).bind('click', tableTap);
this.setAttribute('src', 'http://imgur.com/a7J8OJ5.png');
var elementID = $(this).attr('id');
var elementIndex = resTableArray.indexOf(elementID);
resTableArray.splice(elementIndex, 1);
};
So you were missing some tables after untapping.
Well lets fix tableClear,
You have a array with tapped tables, but you are searching in main array.
function tableClear() {
tableLen = resTableArray.length;
for (var i = 0; i < tableLen; i++) {
var idString = "#" + resTableArray[i];
var $element = $(idString);
$element.unbind('click', tableUntap);
$element.bind('click', tableTap);
$element.attr("src", 'http://imgur.com/a7J8OJ5.png');
}
resTableArray = [];
}
Im searching only tapped tables, and then just untap them and remove handlers.
fiddle: http://jsfiddle.net/r9ewnxzs/
Your mistake was to wrongly remove at untapping elements.

Adding a custom attribute in ASP.NET. accessing it in JQuery

I have a table that is created in ASP.NET C# code behind. The table has several levels of groupings, and when I create the rows for the outer most grouping, I add an custom attribute as follows:
foreach (Table2Row row in Table2Data)
{
// skipping a bunch of irrelevent stuff
...
tr_group.Attributes.Add("RowsToToggle", String.Format(".InnerRowGroupId_{0}", row.GroupHeaderId));
...
}
The attribute is the CSS class name of the inner level rows that I would like to toggle. When the user clicks on the outer level row, I would like to call JQuery Toggle function for all inner level rows that match the custom attribute.
To achieve that effect, I have attached an onclick event to the header rows with the following script in the aspx file:
var tableId = '<%= Table2MainTable.ClientID %>';
$(document).ready(function () {
var table = document.getElementById(tableId);
var groupRows = table.getElementsByClassName("Table2GroupHeaderRow");
for (i = 0; i < groupRows.length; i++) {
table.groupRows[i].onclick = function () { ToggleOnRowClick(table.rows[i]); }
}
});
function ToggleOnRowClick(row) {
var r = $('#' + row.id);
var innerRows = r.attr('RowsToToggle');
$(innerRows ).toggle();
}
So, clicking anywhere on the header row should call the function ToggleOnRowClick, which should then toggle the set of rows below it via the custom attribute RowsToToggle.
When I set a (FireBug) break point in the ToggleOnRow function, the variable r appears to be pointing to the correct object. However, innerRows is not getting set but instead remains null. So am I setting the custom attribute incorrectly in ASP.NET or reading in incorrectly in JQuery?

You did not post the code to generate inner level rows, I am assuming you sat proper classes to them.
There are few issues with the jquery you posted. This line wouldn't work:
table.groupRows[i].onclick = function () { ToggleOnRowClick(table.rows[i]); }
You don't have any groupRows property defined for table object.
We don't care about table row anymore, we care about groupRows[i] and want to pass it to ToggleOnRowClick function.
This line in next function is also wrong:var r = $('#' + row.id);
Solution: Change your script to this:
var tableId = '<%= Table2MainTable.ClientID %>';
$(document).ready(function () {
var table = document.getElementById(tableId);
var groupRows = table.getElementsByClassName("Table2GroupHeaderRow");
for (i = 0; i < groupRows.length; i++) {
groupRows[i].onclick = function () { ToggleOnRowClick(this); }
}
});
function ToggleOnRowClick(row) {
//var r = $('#' + row.id);
var innerRows = $(row).attr('RowsToToggle');
$("." + innerRows).toggle();
}
I have tested the code with dummy data. So if you have any issue, PM me.

This line is your culprit:
table.groupRows[i].onclick = function () { ToggleOnRowClick(table.rows[i])
By the time the event handler runs, table.rows might still exist, but i will be set to groupRows.length+1, which is out of bounds for the array. The handler will get called with an argument of undefined.
Remember, Javascript is an interpreted language! The expression "table.rows[i]" will get interpeted when the handler runs. It will use the last value of i (which will still be set to the value that caused your for loop to end, groupRows.length+1).
Just use
table.groupRows[i].onclick = function () { ToggleOnRowClick(this) }

So, First you shouldn't use custom attributes... they are a sin!
Please use data attributes instead, so that is what I'm going to use in the code, should be an easy fix regardless.
If this doesn't work then I'd be very very interested in seeing a dumbed down HTML snippet of the actual output.
$(document).ready(function () {
$('#MYTABLE').on('click', '.Table2GroupHeader', function() {
var attr_if_you_insist_on_sinning = $(this).attr("RowsToToggle");
var data_if_you_like_not_sinning = $(this).data("RowsToToggle");
//if the row is like <tr data-RowsToToggle=".BLAH" or th etc
//asumming you set the attribute to .BLAH then:
var rows_to_toggle = $(data_if_you_like_not_sinning);
rows_to_toggle.toggle();
//assuming you set it to BLAH then:
var rows_to_toggle = $("."+ data_if_you_like_not_sinning);
rows_to_toggle.toggle();
});
});

$(document).ready(function () {
$('#<%= Table2MainTable.ClientID %> .Table2GroupHeader').each(function(){
$(this).click(function(){
$(this).toggle();
});
});
});

Using JavaScript/jQuery to display an element's ID on mouseover

I been trying to figure this out, but I haven't yet.
I am building column in html of anchor tags and I would like to know the id of the one that has the mouse over it.
It should be simple, but seems like I hit a wall and I can't see how to solve this.
The problem I have is that the id that is display on the console is all the time the last id of the array. And instead of that I want to the id of the specific anchor.
Any suggestions are really welcome.
Here is my code:
//Anchor builder
var numberOf = flatParamDateArray.length;
for (i = 0; i < numberOf; i++) {
var param2Slider = document.createElement("a");
param2Slider.id = 'sliderAnchor' + i;
sliderAnchorId = param2Slider.id;
param2Slider.name = 'param2Slider';
param2Slider.className = 'nav2Slider a';
document.getElementById('nav2Slider').appendChild(param2Slider);
$('.nav2Slider a').onmouseover = function () {
console.log('flatParamDateArray index: ' + param2Slider.id);
}
}

1. Move this out, and after the for-loop:
$('.nav2Slider a').onmouseover = function () {
console.log('flatParamDateArray index: '+param2Slider.id);
}
2. Change onmouseover() to mouseover():
$('.nav2Slider a').mouseover(function() {
console.log('flatParamDateArray index: '+param2Slider.id);
});
3. To get the ID, this is the code you need:
console.log('flatParamDateArray index: '+ $(this).prop('id'));
Bonus:
Since you are dynamically adding links, you should use the .on() function, to reduce the number of event handlers to one (as opposed to one per element):
$('.nav2Slider').on('mouseover', 'a', function() {
console.log('flatParamDateArray index: '+ $(this).prop('id'));
});

Your variable param2Slider is global and the for loop changes the value on every loop. This means that after the loop is finished param2Slider just contains the last value.
Try this:
$('.nav2Slider a').on('onmouseover', function () {
console.log('flatParamDateArray index: ' + $(this).attr('id'));
});
Edit: onmouseover... & of course you should move this snippet out of the loop