We Keep Coding

On click Add / Remove Class and Add / Remove Values for one set of DIVs at a time

I am working on a wordpress website using Generate Press and Super forms. The website is https://ibsolutions.biz/piesarul.
The super form is used in a page called configurator to create a custom request for quotation form.
I got it to work up to the point where the user can toggle buttons and checkboxes show up based on whether the buttons are toggled on/off.
However, I want to make it so when a toggle button is on the others are off. I tried my luck with this bit of code:
$(".super-toggle-switch").click(function(event){
$(this).addClass("super-active")
.siblings()
.removeClass("super-active");
});
It didn’t work out. Any suggestions on how to improve it?
What currently happens is that when the toggle switch is turned on, the div with the super-toggle-switch class is also assigned the class ‘super active’.
Additionally, when the button is toggled on, a subordinated div called super-shortcode-field is assigned the value “on” and when toggled off, it is assigned the value “off”.
Basically, what I am hoping to achieve is that both the value of super-shortcode-field and the class assignment are triggered for only one of the toggle buttons at a time.
Right now, the user has to toggle the buttons both on and off manually, and I want to eliminate that extra step for them.
Being at the beginning of my JS and JQuery journey, I would appreciate any and all help :)

I don't know about jQuery, stopped using it 7 years ago. In pure Javascript, this is very easy:
const switches = document.querySelectorAll('.super-toggle-switch');
for (const switch of switches) {
switch.addEventListener('click', toggleSwitches)
}
function toggleSwitches(event) {
for (const switch of switches) {
switch.classList.toggle('super-active', switch === event.target);
}
}

React - Conditional mounting/unmounting of a component

Context
Let's say I have page that displays a list of employees, along with many other buttons and components. and whenever I click on an employee, a side panel appears with a bunch of information about that employee. If I click on any other employee while an employee is selected, the side panel remains intact with only the information inside it being re-fetched and updated.
I can also, change the employee's information from that side panel by editing the different fields and clicking Update which bulk updates every updated fields.
Problem Statement
Whenever an employee's information is being edited, I can also click on another employee, which, of course, means that the edited data for the previous employee is lost.
Objective
What I need to do in this case is that, whenever an employee's information is being edited from the side panel (a flag is present to denote that), and if any other component/buttons apart from Update is clicked, then I need to show a modal which states that everything that is unsaved would be lost. If the user selects Ok, the component that was clicked should mount/rendered/perform whatever it does. Otherwise, the user should go back to the previous state.
I initially tried to achieve that by using componentWillUnmount of the sidepanel, but it didn't really work because that component will unmount anyway. What I am thinking is that, I need to put a onClick handler in every button/component now apart from that 'Update' which checks if any information is being edited, if yes it will render that component, if not it will render that modal, and the user decides what to do in that modal. I am very skeptic about this as well by placing checks everywhere for a minor thing.
Anyone with experience about related to this use case ? Any insights would be highly appreciated. :)

First Put isEdited state isEdited: false Then when you edit the post then set isEdited to true. When user clicks update then set isEdited back to false. When user clicks button other than update then check isEdited if isEdited is true then dispay modal with message and button when button of model is click set isEdited to false.
Hopefully this will help

There are a few ways I can think to do this.
Add a check at the start of the function for each buttons onClick. As you've mentioned already, this is tedious, especially if there are lots of buttons that should affect the state.
Create a function that wraps the onClick functions, to perform this check. Similar to 1, however a bit easier to repeat:
const myOnClick = newEmployeeNumber => {
myState.employeeToView = newEmployeeNumber;
}
const checkUserWantsToContinue = (onClickToRunWhenContinued) => {
if (myAppState.isEdited) {
promptUserToSaveFirst();
} else {
onClickToRunWhenContinued();
}
}
return (
<div onClick={checkUserWantsToContinue(myOnClick)} />
);
You mentioned that you are trying to put this into the componentWillUnmount function. That implies that something is making the component unmount. Can you add the check in there? So rather than checking with the user before the component unmounts, check with them before the action that makes the component unmount.

Making a button disabled if 'this' class is true

I'm working on this app that allows you to add people from an API to a list in the app. Every time a person is added, a new Bootstrap card is created. I'm trying to figure out how to make the button to click "Watch Stream" disabled under certain circumstances. If the user is "LIVE" then the class .popover_status_on is added to the parent element. If the user is "OFFLINE" then the class .popover_status_off is added instead.
I thought this was going to be a quick fix issue but I'm seeming to have much more trouble with it than I expected. Right now this is what I'm looking at with my code that isn't working which I definitely thought it would have:
if($('.card > .card-body > h2').hasClass('popover_status_off')) {
$('.card > .card-body > button').prop('disabled', true);
} else {
return;
}
I realize that when it gets disabled, it disables all the buttons, even "LIVE" ones. So I'm trying to figure out if there's a way without specifying by class/id that I can have it change the state of the button. I thought maybe using "this" would work but I'm unsure what code would work for that.
Thanks for any feedback.

The problem is that inside your if statement, the jQuery selector isn't constrained to THAT card, it's finding all buttons inside all cards.
What your code literally says:
If there is card containing an h2 with class popover_status_off
Then find all cards that have buttons and disable them
Else do nothing
Try this:
$('.card h2.popover_status_off').parents('.card').find('button').prop('disabled', true);
You don't need the if statement. One of the great powers of jQuery is that you can identify an element and change it all in a single statement.

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

Is there a way to add a javascript button that would remove an added graph

Dear StackOverflow Users
I am currently working on a data analysis web app.
Now in this app you can drag and drop graphs and you can remove it by unselecting it. Also you can add the graph with a plus button. Only problem is there is no way to unselect it when you add it by that plus button(Which I put the code of ""$("#tb_add").button"" )
What I am trying to do is find a way to write a function button that would undo what the add graph button did, or close it or delete it, since there is no unselect button.
My question is: "Is there such a javascript function that would undo or remove what the $("#tb_add").button did.
so let's say I want to add a button called $("#tb_remove").button
is there any simple javascript that would simply undo what was added ?
If there is what is it called ? can you direct me to it ?
Thank you

In your click handler you could add a way to remove the section. jQuery has a .remove() function. You could use classes to control it as well.
if($(this).hasClass("added")){
$(this).removeClass("added");
$("panel selector").remove();
$(this).addClass("removed");
} else {
analysis.addPanel();
$(this).removeClass("removed");
$(this).addClass("added");
}
something along those lines should help you.