My external javascript and its interaction *suddenly* stopped working on VSCode - javascript

I am a bit new to coding. I have been working on a toggle tabs menu for a few days. I finally managed to create a toggle menu that allows the user to display different offers whenever they click on a button.
It worked absolutely fine yesterday. I decided to take an hour break from the screen and when I came back, the buttons functionality stopped working. The toggle function isnt working. When I click on a button, it does not display what it needs to display.
I have checked my CSS files and my index file, no changes there.
I am not sure what happened, as it was working perfectly fine before. I did not shut my computer down either. I have restarted etc and gone through my code, line by line... yet still, I am unable to find a problem.
FYI - I added some jquery to create a mobile drop down menu (i watched a tutorial). The jquery is added in the head section. The actual toggle menu is NOT made with jquery. Could it be an issue of overriding? I doubt it, as I mentioned that both were working fine yesterday.
Thank you so much for the help in advance!
This is where I have added the script tag:
External JS code:
// the buttons
const btns = document.querySelectorAll(".points-btn");
// the div article that covers the entire rewards section i.e the parent container
const about = document.querySelector(".toggle-container");
// the individual rewards tabs with the food description and images i.e rewards tabs div's
const tabs = document.querySelectorAll(".points-tab");
// e is to access my event object
about.addEventListener("click", function (e) {
const id = e.target.dataset.id; // this is to target the id that I have added in the html. Each button AND each div has a dataset ID which we need to retrieve using this method
// here I have set up an IF statement to say. If i am clicking on a button with the ID, I want to display a certain div with the images, description etc
//"if id matches" // the id alone container all the rewards section. I.e 25 points id, 50 points, 150 points, 200points and 400 points.
if (id) {
// remove active from other buttons - "for each button that does not have the id that matches, remove active"
//for each button - i.e. for every button, run this function
btns.forEach(function (btns) {
btns.classList.remove("active");
e.target.classList.add("active");
});
// hide the other reward tabs
tabs.forEach(function (tabs) {
tabs.classList.remove("active");
});
// display content with the matching id
const element = document.getElementById(id);
element.classList.add("active");
};
});
[A picture of the toggle tabs4

Related

Angular2 - How to drop focus while element is being removed from DOM and refocus on new element added

I am using an *ngIf statement to switch on and off panels within an accordian element. For Accessibility requirements, when one panel closes (by pressing the continue button to move to the next) and the next one opens I need focus to land onto a <legend> that announces a title for the next panel. The screen reader (NVDA) does read the text, but before it does it reads four lines that I don't expect. (replace website title with the name of the site) It reads off:
website title - Mozilla Firefox
unknown
website title - Mozilla Firefox
website title - document
then it finally reads the title of the next section. The reason it is doing that is because I have some angular2 collapse/expand animation that is opening/closing panels. While the animation is happening, it can't focus to the next panel's <legend> and by that being delayed, it reads off the 4 lines of unwanted text.
The only solution I can think of is something like when a panel collapses I put focus on an offscreen empty div that won't read off anything and then reset the focus onto the subtitle when the animation is done, but that seems kind of hacky. Are there any other solutions out there for this problem?
put Queries in component
#Component({
queries : {
vc : new ng.core.ViewChildren('input') // depends on what you are adding dynamically, replace that with 'input'
}
})
in class add this
ngAfterViewInit: function() {
this.vc.changes.subscribe(elements => {
elements.last.nativeElement.focus();
});
}

Trying to remove buttons on click, but they keep coming back (JavaScript, HTML)

I'm having this problem with buttons that I don't know how to solve. I have a table, and each row has a "Pack" action button. When it's clicked, the button is removed so that the user can't accidentally click it again and 'pack' the same item twice.
It has been working well so far, but I just noticed that when you click to the next page of the table (when it has more than 15 or so rows) and go back to the first page again, any buttons you clicked on that first page (and removed) are back.
No matter what pages you move to, I need my table to "remember" which rows' action buttons were clicked/removed. I have no idea how to do this, though.
Here is my code that removes the action button when you click:
// Pack action button
$(document).on('click', ".box-electrode", function (e) {
var id = $(this).attr('value');
var sn = $(this).data('sn');
addElectrodeToBox(id, sn);
$(this).remove();
});
The table itself is created using DataTables.
Can someone point me in the right direction?
Edit
Here is some code I've come up with based on the answer below, but it's not working. There are no errors in the JS console, it just doesn't seem to do anything.
$(document).on('page.dt', function () {
var $allSerialNumbers = $('.box-electrode');
$('#electrodes li').each(function (i, li) {
var $id = $(li).data('id');
for(var index = 0; index < $allSerialNumbers.length; index++){
if($id == $allSerialNumbers.eq(index).attr('data-id')){
$('.box-electrode').eq(index).remove();
}
}
})
});
$allSerialNumbers represents all the action buttons, and $('#electrodes') is the list I'm comparing to.
I think part of the problem (other than my clumsy JS skills) might be that DataTables' Page Change Event page.dt only seems to affect the page that is being changed, rather than the page being changed to. For example, when I'm on the 2nd page of my table and click back to the first page, my JS code is acting on the 2nd page instead of the 1st (which is what I need).
Create a JavaScript empty array;
DataTables library has page changing event;
When user presses the button - get button's value, store it in the array and remove the button;
When user changes the page - page's change event will be fired -> cleaning function will be executed, which will read the array, search needed buttons by value and remove them if exist.

AmStockChart panel title identification

I would like to growl the title of the stockPanel being removed on clicking the allowTurnOff button
I am using the below Listener but it is not working. How does amStockChart register the panel which needs to be removed on clicking a certain panels allowturnOff button
addListener('panelRemoved' , 'function(event) {
growl(event.chart.panels.title);
}'),
Actually you may ignore the syntax around the quotes as I am using the charting library through R but the concept remains the same.
Let me elaborate the situation. I have multiple panels with allowTurnOff buttons. I want to trigger an action based on which panel the user decides to remove. Hence I am using the panelRemoved event where the program should message me which one of the panels (either in terms of Index or Panel Title) was removed by the user.
The below works:
addListener('panelRemoved' , 'function(event) {
alert(event.chart.panels.length);
}')
PS: Replacing growl() function by alert for convenience.
The above code correctly calls out the number of panels in my chart but what I want is the title of the panel that was removed. I can definitely provide the code in R which is similar but not exactly like JS.
I am assuming there will be a loop which will run through all the panels in event.chart.panels.length and check which one of the panels was removed and then throw out something like event.chart.panels[x].title I guess.
addListener(panelRemoved,function(event){
for ( var i = 0; i < event.chart.panels.length; i++ ) {
if event.chart.panels[i].removePanel.enabled==true {
alert(event.chart.panels[i].title);
} else {
return();
}
})
Please let me know if you would still need the R Code
# Sagar: Since my code is in R and not in JS, I am unable to share in Fiddle. But I can make a good attempt to explain the series of steps involved. As follows:I have an amStockChart with multi-panel.I have set the stockpanel property allowTurnOff = TRUE. Now you will find that a small remove panel button appears on the top right of each panel. Now if a user tries to remove a given panel using that small little button on top of each panel, the event=removePanel gets triggered. I will use the addListener to catch this event and execute some logic. In that logic, all I am trying to do is alert as follows "Panelx is successfully removed". So to do that, I need to know which panel did the actually close. I want help building that logic which will identify which panel the user closed within the addListener(event=removePanel) and then throw out the alert. Ideally I would like the logic to throw out the title of the panel which was removed by the user

Change content on click of button in jquery

So my scenario goes like this:
I have 3 kind on item to show in div. There are three buttons on top of div and when user click any of the button items corresponding to that items are shown.
Items comes from backend and I am getting all the items loaded on page load as I also need them some where else also within same context.
Currently I am following show hide approach for the same .What I want to know is can there be any other approach that can be better then this in terms of code optimisation. User can also edit /add./remove item?
Here is my fiddle
$(document).ready(function(){
console.log($('.toggleItems'));
$('.toggleItems').click(function(){
$('.containers').hide();
var identifier = $(this).data('identifier');
console.log(identifier);
$('#'+identifier).show();
});
})
First order by items then use accordion jquery

jCarousel with keyboard : wrong focus using the tab key

I'm using the 0.3 version of the jQuery jCarousel script to display three carousels on the webpage I'm working on. Those three carousels work just fine.
The trouble is : you can't use them properly using the keyboard.
If you tab through the page, the focus goes to the first link of the first item in the carousel, even if this item is not visible ! (For example : click on a "next" link in one of the carousels, then use the tab key to browse : the focus will go to a link which is not visible inside of the carousel).
If you keep using the "tab" key, the focus will successively go to all the links of all the items in the carousel.
Instead of that : the focus should go to the first link of the first visible item ; then, if the last link of the last visible item is reached, then the focus should go out of the carousel (the next link outside of it, in fact).
A solution could be to use tabindex... but some parts of the page are shared with other pages of the website, so I just can't use tabindex in all the links of all my pages...
Instead of that, I had tried things like this :
$("#carousel-editos li a").focusin(function () {
$("#carousel-editos li.jcarousel-item-first .post-title a").focus();
return false;
});
but then it prevents any further use of the "tab" key...
I hope this is clear... Thanx for any help !
I think you need a combination of the answers that you've already provided. It seems like you should be able to use Javascript to dynamically set tabindex attributes on the HTML that you need to be tabbable (heh, new word). I'm thinking of something like this:
On page load, find all visible items in the carousel. Use jQuery to set the tabindex property for each item that you want in the tab cycle.
Assign tabindex properties to all other links on the page that you want to cycle through.
Add some jQuery to modify the tabindex attributes when the user changes the items in the carousel (click the next/prev buttons).
It would be much easier to help you if you made a simplified example in jsFiddle.
On the carousel createEnd and scrollEnd functions you can reset the contents of .jCarousel so that only the visible carousel items are "tabbable". I have done that in my code as follows:
var bannerSlider_scrollEnd = function(event, carousel) {
var $carousel = carousel.element(),
$items = carousel.items(),
$bannerContent,
$visibleItemsContent = carousel.visible().find('.bannerContent');
$items.each(function (index) {
$bannerContent = $(this).find('.bannerContent');
disableTabbing($bannerContent);
});
reenableTabbing($visibleItemsContent);
$visibleItemsContent.find(':focusable').eq(0).focus();
};
The disableTabbing($container) and reenableTabbing($container) lines refer to helper functions I coded into my site which basically find all :focusable elements in a given container and set the tabindex to "-1", then "0" respectively.
After this processes, users will be left tabbing only through visible carousel items instead of all carousel items.

Categories