Show/Hide multiple div classes independently based on checkbox value - javascript

I've seen several questions similar to mine, but I can't seem to find a solution.
I'm working on a calendar with JavaScript powered by FullCalendar using Google XML URLs. My objective is to show/hide events on the calendar based on a checkbox value corresponding to the events on the calendar. Such events are grouped by type (they're on separate Google calendars with separate XML URLs but are rendered on the same calendar display on the webpage) and have different div class names. I have 11 different classes total and need a way to toggle their visibility independently of the other classes based on a checkbox value.
I'm in the process of learning JQuery/JavaScript and hence much of it is still Greek to me. I found a solution that works for a single class, but is dependent on all of the other checkboxes' values if other checkboxes are present. This is the JS I'm using currently:
<script type="text/javascript">
function doInputs(obj){
var checkbox = $("input[type=checkbox]:checked");
var i =0, box;
$('.className').fadeOut('fast');
while(box = checkbox[i++]){
if(!box.checked)continue;
$('.className').fadeIn('fast');
break;
}
}
</script>
And the corresponding mark-up:
<input type="checkbox" checked="checked" name="className" onclick="doInputs(this)"> Class Name Text
This works quite well; however, I can't figure out how to make it work with multiple div classes. Any suggestions?

I found a different solution, one that works much better and uses existing FullCalendar JS actions. Instead of using div classes and their class names as the determining factor of their display status, I used FullCalendar's removeEventSource and addEventSource actions to show/hide each of the 11 calendars being toggled.
The original JS is here. A little more picking around and I would have found this much sooner.
Thanks to those that commented and answered.

You can pass class name of div along with JS function e.g.
doInputs(this,'classname')
and according to that class name you can toggle that class
E.G
function doInputs(obj,cc){
......
$('.' + cc).fadeOut('fast');
......
}

Related

Adding a quick filters on the category page for a 'colors' property

I have tried to create quick filters using the same methods as Shopware uses for their filter panel, but I've run into some problems. I want to have the 'colors' property filter both in the sidebar and in a slider above the product listing block. This is the design I've got in mind for the slider:
I am able to get this working by adding another filter panel and filtering unused properties out, but everything breaks when trying to select one of the colors. You can try this out yourself by adding two filter blocks to a category page. I don't think having multiple filter panels is supported the way filters are setup at the moment. I have tried adding support for this but there is a lot of code to edit to make that work.
Check these files together with it's parent classes to see how most of the filtering proces works:
vendor/shopware/storefront/Resources/app/storefront/src/plugin/listing/filter-property-select.plugin.js
vendor/shopware/storefront/Resources/app/storefront/src/plugin/listing/listing.plugin.js
Can this be achieved in another way?
I have implemented the similar but not color, I added new filter on top of listing that link to existing in sidebar filter https://bike-resale.de/E-Bikes
I created js plugin to listen on input changed, then find the sidebar filter by ID and dispatch change event on it that will trigger filter on listing. You can try this way.
...
_updateFilterValue(value) {
this._filterInput.value = value;
this._filterInput.dispatchEvent(new Event('change'));
}
...

How do I iterate over a container with KendoUI widgets and get their values using jQuery?

I'm working with jQuery and KendoUI for MVC. I have a ul called #overview and each list item has a different kind of KendoUI widget in it. Those widgets are the like of text boxes, multi select, ranger sliders and dropdown lists. There is a button that the user can click which runs a jQuery function to gather the content of all these widgets.
The problem I have is that these widgets have Kendo specific code to access their values and text attributes such as $("MyControl").data("kendoDropDownList).text();, I am using a .each loop to iterate over the li and I need a way to grab the data from the varying controls and I was wondering if there was a clean way to do that?
With so many controls available it will make for a complex piece of code to check for every possible control that may be there.
Any help is appreciated.
This is kinda tricky. There is an obscure method called kendo.widgetInstance() that whatever element you pass intto it, it will check for a widget and return it's instance.
var $date = $("#date").kendoDatePicker({ value: (new Date()) });
console.log(kendo.widgetInstance($date).value());
Demo

Multy-filter page with transitions - Isotope & Quicksand JS problems

(note: edited since I've just realized the question are somehow correlated, at least in my mind!)
I want to create a multi-filter page in which the result will be animated...
I'm trying with 2 different plugin (quicksand and Isotope) and with both solution I'm having problems...
---ISOTOPE--- (original)
With Isotope I need to filter data based on active class, or based on IDs of filters, which I've already stored in JS, does anyone know how can I do that?
I set up a page with 2 different filter like 'color' (red, blue, orange...) and 'type' (square, round...)
I already have a Javascript that assign class active to the 2 filtering lu based on selection, if all color are selected shift the 'active' class to 'all', and more than one sub-filter can be activated. And this also save the list of the id of the active li items in a string for color filter and another string for shape filter
I also already set up the page like the combination filter Isotope demo at this link: http://isotope.metafizzy.co/demos/combination-filters.html and it is working fine but doesn't allow to select more than one sub-filter at the same time.
I saw the demo at this link http://fiddle.jshell.net/desandro/JB45z/ with filtering combination, but it is based on radio button that I'd like to avoid.
I'm not sure if what I'm trying to do is easy or not... is like, how to tell to Isotope to filter based on the sub-filter that have active class or based on the sum of the li with the ID saved in my two string?
Thanks for any help, as you can easily understand I'm not skilled in js at all and english is not my first language!
--- QUICKSAND --- (edited)
I've just realized that I didn't explain why I stored the IDs of the selected items in the js string. And this is also about the different js question.
I was trying to set up the same system with Quicksand instead of Isotope.
But since quicksand need to have a starting li and a destination li to display the animation I set up the js to pass an array to a different temporary php page that use the array to display a destination li.
All until here is working fine but I'm not able to get back the li data in the original page to let Quicksand perform the animation. The last part of my js appear to have problems that I'm not able to fix (too many days trying with no success), the last part of the js is:
$.post( 'destination_li_filtered.php', {
colorString,
shapeString,
$('#ids').attr('val')
},
function(data) { // should contains the resulting data from the request (?)
$('.list').quicksand( $(data).find('li'),
{ adjustHeight: 'auto' },
function() {
callbackCode();
}
);
e.preventDefault();
});
the external page destination-li-filtered is displaying the results but the original page is not able to take back the data...
Obviously I need to set op the page with isotope or quicksand, not both.
but I'm also wondering witch is the best plugin to display 100's of results with about 20 filters (without considering the combinations). And of course, which is the easiest to use!
You should see the radio button and the change in view as separate things.
It's a common misconception that you should store all your state in the DOM (ie. which checkbox is checked). The DOM is a view, you don't keep state in a view.
You should have a state that lives in your JavaScript.
Like:
var state = "all_selected"; // green, red, blue
Then, when you check the radio button, it will set the appropriate state and update the list (show/hide elements based on state).
This allows you to make any control you want, be it a radio button, a checkbox or something completely custom.

div vision toggle from drop down menu

I'm creating a universal text template tool for work and I need a little help with getting the appropriate template to show up when a drop down menu is changed.
I'm using JavaScript, no JQuery for me yet.
The template objects are divs, and they are supposed to change by setting display: none on all but the one the menu has selected.
The problem: The templates (divs) never change.
Fiddle
Thank you for looking!
There are multiple problems with the script.
Problems
1. caseSelect was pointing to the object instead of value (var caseSelect = document.getElementById("caseType").value;)
2. In the select element all options had the value thing1
3. break statement was missing at the end of each case
Demo: Fiddle

MVC3 - jQuery datepicker when multiple elements have the same ID

I have a weird situation (don't we all?) with datepickers and want to get some advice.
I have a screen with a list of Locations, and for each Location, they can click Edit and edit that location. The Edit displays below the Edit link, and they can edit multiple locations at one time. This means the same View is rendered on the screen multiple times, and therefore multiple fields will exist with the same id (editing 4 locations will result in 4 "DateOpened" fields).
So, when I load my View, javascript adds datepickers to any fields that need it like so:
$(document).ready(function () {
var elements = $(".NeedsDatePicker > td > input");
$(".NeedsDatePicker > td > input").datepicker();
$(".NeedsDatePicker").removeClass("NeedsDatePicker");
});
Works fine, but, as you've probably already figured out, when I click a date on the calender, it populates the first "DateOpened" field when multiple Edit windows are open.
Is there a way to tell the datepicker to use the field WITHIN a certain parent, like you can for general jQuery selects?
$("#DateOpened", "Location-134").doWhatever...
...or is there a way to give the fields different id's without breaking MVC's UpdateModel() function? Or any other advice?
You should definitely keep IDs unique within an HTML DOM. Most, if not all, DOM manipulation libraries/frameworks, including jQuery, have this assumption built-in.
There are a few questions on SO WRT to avoid the same IDs in the form:
two forms with same input id in asp.net mvc
how to prevent html input id duplication on asp.net mvc 3 when a model contains multiple elements

Categories