Making a button disabled if 'this' class is true - javascript

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.

Related

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);
}
}

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

JS library show/hide element on checkbox status

I'm fairly new to JS and am trying to write my own library using this blog post, and would like a hand. (Apologies if this is too vague for an SO question)
I'm trying to write a function that shows or hides a queried element based on the status of a queried checkbox (and another for a radio button if I can't do it in one method) on a form.
So I'm looking to end up with something like this:
$(divId).checkToggle(checkBoxId);
So the div will start as hidden. When the checkbox is clicked, the div will toggle to visible. When the checkbox is unchecked, I'd like the div to hide again and any input fields inside it to be cleared (the probably will be only one input field).
I know that this function isn't really going to be very combine-able or reusable, but I would use it so often for just that one thing that I'm going to overlook it.
Okay, enough preamble. Here's what I have so far.
Could I have some suggestions on how to change/finish my checkToggle method? Thanks!
This worked for me:
$(document).ready(function(){
$('#checkbox1').change(function() {
if($(this).attr('checked')) {
$("#myDiv").slideDown(1000);
}
else
{
$('#myDiv').slideUp(1000);
}
});
});

jQuery searchable checkbox list and tristate checkbox

I'm building a simple asp page on which I have list of peoples with checkbox on left of every name.
I've managed to create a simple jQuery script that allows hiding and showing rows of table based on input:
http://jsfiddle.net/Tq97v/ (first part)
As You can see I can enter part of name and then specific row are hidden.
Using red "x" I can uncheck all checkboxes.
What I'm trying to do now is to change that static red "x" into tristate checkbox.
Don't have idea how to even start.
Do I must add change listener to every checkbox in my list?
Second thing - how to create multiple instances of the same "plugin" on site.
Right now I'm identifying input by it, but it would be nice to call function with that input as param, and it would fine table after that input and create necessary logic.
This way I could call function multiple times on page to have more than one list.
I'm not asking for whole solution (of course it is always welcome :) ) but what I need is idea how to accomplish this in efficient way and as optimized as possible, because sometimes my list has 500+ elements.
P.S. don't look at HTML code, it is ASP generated.
I found this plugin: https://github.com/bcollins/jquery.tristate, but I have no idea how to use it with my list.
UPDATE:
I've managed to turn my code into functions, but right now I must call 3 functions for every list.
Here is my updated code: http://jsfiddle.net/65MEV/4/
How can I change it to one function? Will it be better?
This is my updated code. Still thinking about way of doing that Indeterminate Checkbox instead of my remove image.
UPDATE2
I build working code :)
http://jsfiddle.net/65MEV/9/
But I would like to improve it as much as possible.
Any suggestions are welcome!
A tristate checkbox is like the Three-Portal Device: an illusion.
What you actually want is to make the checkbox indeterminate (by setting the property of the same name to true). To implement this, you will need a change (or click) handler on each checkbox, then you'll need to check if all of them are in the same state, and if not then you set the indeterminate property. It's a hassle, really, because you rarely see indeterminate checkboxes and so most users don't know what to do with them. To be avoided, if possible.
To create multiple instances of the same plugin access elements relatively to an other element.
For example: in your case instead of keeping the item in a jQuery object var $tableRows = $('table.myList tr'); access them in the event.
$('#user_name').keyup(function () {
var sValue = $.trim($('input#user_name').val());
if(lastInput==sValue) return;
var $tableRows = $(this).next().next().find("table.myList tr");
if (sValue == '') {
$tableRows.show();
} else {
$tableRows.each(function () {
var oLabel = $(this).find('label');
if (oLabel.length > 0) {
if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
}
});
lastInput=sValue;
}
});
and you only have your actual list.
And for the tree state checkbox you don t need a plugin just add a button or link and every click check it status you can keep the status by jQuery data and change the element image according to this data.

Wiring up javascript events and passing parameters

A bit background:
I've got a page with a table and a number of checkboxes. The page is generated in asp.net.
Each row has a checkbox, there's a checkbox in the header, and in certain cells there will be groups of check boxes (you get the picure lots of checkboxes).
Each of these check boxes currently works fine with a little bit of javascript magic in their onclick events.
so you have something like:
<td><input type="checkbox" id="sellRow1" onclick="javascript:highlightRow(this, 'AlternateRowStyle1');"/></td>
Not much of a surprise there then.
Ok so the here's the problem:
So this works fine however I need each of the check boxes to reflect the states of other checkboxes. So for example: the checkbox in the header changes the values of the row checkboxes, changes to the row checkboxes can change the header check box etc.
I know what you're thinking: easy just call that Javascript function highlightRow.
But if I did how would I get the parameters (ok the this is easy but where on earth could I get that 'AlternateRowStyle1'?)
So I guess the question is: Where do I put those parameters so I can get at them with JS in a nice cross browser way. (<PossibleRedHerring>tried putting custom attributes on each checkbox but wasn't sure that was the correct way to go</PossibleRedHerring>), also I'd prefer not having to keep calling back to the server if that's at all avoidable.
(btw sorry if this is a bit badly formatted / written, I'm extraordinarily tired!)
Update:
Ok so in the end I managed to dodge the custom attributes as noticed that there was a hierarchy to the check boxes. This meant I was able to trigger the click event of the child checkboxes (which inturn would call it's childrens' click event etc) luckily in this case the flow will never go in the opposite direction causing an infinite loop (there are a lot of comments / documentation to point this out!)
The only interesting thing with this is the difference between click events in IE and in firefox, chrome and safari. IE allows anything to have a click where as the others limit click to INPUT elements of type button, checkbox, radio, reset or submit. I kind of wanted to use event bubbling to attach the click events to an element that contained a group of checkboxes.
In the end went with a bit of a hack:
// In IE every element supports Click wilst Firefox (also chrome and safari) only supports INPUT elements of type button, checkbox, radio, reset or submit
// https://developer.mozilla.org/en/DOM/element.click
// this function allows both browers to support click on all elements
function FireClickEvent(element)
{
if (element.click)
{
element.click();
}
else
{
// We don't have a click on this element, so add our own.
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
element.dispatchEvent(evt);
}
}
Think that could be somewhat improved but it does the business for now.
Should also admit this was my first shot at proper javascript. It's a bit of a scary language (esp when hitting the dom!) interesting though, am looking forward to spending a bit of time delving in further.
you can do this quite easily by using jquery. you can define some custom attributes on the checkboxes depending upon their position and pick up the value of attributes on click and manipulate the css of rows, checkbox the way you want.
thats how you can define alternate row color for the table using jquery
$("table tr:nth-child(even)").addClass("striped");
<style>
.striped{
background-color:#efefef;
}
</style>
I think custom attributes is indeed your solution, can't see any problem with that. Although I would put something like an alternate-row-style as an attribute of the row, and not as an attribute of the checkbox.
If I understand you correctly; you want to be able to klick on the header and all the checkboxes in that same row will be checked?
I would set a cssclass for the "th"-element and use that same class on each of the "td"-elements.
I would place the alternating class on every second "tr" element. That way you can style differently if it's an alternating item or not.
I would also use jQuery to easily create the js-code.
I would NOT add custom attributes since... well you can't just add your own imaginary attributes, that's why we have html-standards.

Categories