Checkbox function keeps resetting when changing month on calendar

[computerbarry]

Hi all

I’ve been working on a calendar, thanks to @fretburner on a previous thread for helping.

The problem is I need to add filters, so far so good.
Though when I change the month the selected events are lost and reset .hide() is removed and all events show regardless of my selected options.

How can I store, make only the selected events stay when I change months?

The code below is what I have so far.

And JSfiddle with working example - select any option and change the month to novemebr then click back to october, you’ll see the problem.

$("#filters :checkbox").click(function() {
     $("div.event-spot").hide();
     $("#filters :checkbox:checked").each(function() {
         $("." + $(this).val()).show();
     });
  });

Thanks, Barry

[jgetner]

The problem is the clndr lib your using is not saving the state when a month is selected in the calendar. You are gonna need to manage the month to month events state as well.

add this method to your click event for the clndr library and then your gonna need to manage month by month the filters active

 onMonthChange: function(month) {
     //your code to manage the month filters selected
 }

[computerbarry]

Thanks jgetner

the clndr lib your using is not saving the state when a month is selected in the calendar

Yes that makes sense now

Ok, so I need to place the above snippet inside my clickEvents as shown below, is that correct?

...
startWithMonth: moment(),
  clickEvents: {
    onMonthChange: function(month) {
    	
    }
  }

Maybe an update to my jsfiddle
I’ve added some extra events to November for better visual jsfiddle update

Barry

[jgetner]

So the code your adding is not recreating the state based on what is selected.

I updated your code to re-create the state

CLNDR - JSFiddle - Code Playground

you need to add something like this:

onMonthChange: function(month) {
      $("#filters :checkbox").each(function(){
      		if($(this).is(":checked"))
          {
          	$("." + $(this).val()).show();
          }
          
          else
          {
          $("." + $(this).val()).hide();
          }
      });
    }

[computerbarry]

Right on
Thanks for getting back jgetner working good just what I needed.

Just one problem I realised today after updating the page in the CMS.

The fiddle looks good on initial load, but when you click the arrows in the fiddle example for the next/previous months all events are lost if you don’t use the filter first. Similar to when I rebuilt this today on a live instance. When the page first loads, all the events are hidden.

What I need is for all the events to be shown in the first instance then use the options to filter based on the users choice.

Is there a way to adapt/add something to the below so all the events are shown until the filter is triggered?

if($(this).is(":checked")) {
  $("." + $(this).val()).show();
} else {
  $("." + $(this).val()).hide();
}

So for example, if the filters are not used all the events will still be shown.
Some people might not use the filter. The filter is sort of a flurious.

Cheers, Barry

[jgetner]

I see your problem and another one i fixed them both. http://jsfiddle.net/agnjxv7p/3/

So the first problem on the month change event i was simply just going through filtering on what was checked and when nothing was checked it was hiding it. So i updated the code to check if there is a check and then filter or show everything.

 onMonthChange: function(month) {
      if($("#filters :checkbox").is(":checked"))
      {
      		 $("#filters :checkbox").each(function(){
              if($(this).is(":checked"))
              {

                  $("." + $(this).val()).show();
              }

              else 
              {
                  $("." + $(this).val()).hide();
              }
          });
      }
      
      else
      {
       		$("." + $(this).val()).show();
      }
    }

Another problem i uncovered you might or might not of known about was that when selecting one of your filters on or off the of side was not re-showing what was hidden when a filter was used. So i updated that part as well to handle the re-showing and better manage the state of the filters.

$("#filters :checkbox").change(function() {
    if($(this).is(":checked"))
    {
       $("div.event-spot").hide();
       $("#filters :checkbox:checked").each(function() {
           $("." + $(this).val()).show();
       });
    }
    
    else
    {
    	  $("div.event-spot").show();
    }
     
  });

[computerbarry]

Hey jgetner

I don’t think you updated the fiddle?
…/3/ is the old version.

Barry

[jgetner]

I found another issue give me a few minutes to fix it and i will post updated code

[computerbarry]

Cool, looking goood!
Much appreciated been working on this endless

Update: You still there?

[computerbarry]

This is perfect jgetner

Just updated the fiddle with your recommended code - Update v0.4

Another problem i uncovered you might or might not of known about was that when selecting one of your filters on or off the of side was not re-showing what was hidden when a filter was used.

Good catch.

You said another issue?

Thanks, Barry

[jgetner]

Hey yeah there is a an issue when you select the filter on then back off. But i had something come up at work real quick so it might be a few more hours before i can give you the final solution unless someone beats me to it.

[computerbarry]

Cool, again appreciate your time and knowledge thanks, really helped me

As it stands, seems to be working very well.

A bonus if you get time to mention the further update.

Happy coding, speak soon!

Update: I’ve just spotted the filter on and off issue
And if you get change to leave a few comments on some of your code jgetner, if you get time, would be great.

Barry

[jgetner]

Ok that was a tough little problem at first. So the last problem i found was your filters would overwrite each other. So if you turned on fairs it would filter for fairs. But when you also selected sports filter it would overwrite the fairs filter. So the solution was we needed to save the filters and process them all at once together.

updated fiddle:

CLNDR - JSFiddle - Code Playground

updated code:

// holds the active filers since filters 
// overwrite eachother
activeFilters = [];


// switched to change to handle on off filtering
$("#filters :checkbox").change(function() {

   // add class to check for later for active filters
  if(!$(this).hasClass("chck-active"))
  {
     $(this).addClass("chck-active");
  }
  // remove class if no longer set
  else{
      $(this).removeClass("chck-active");
      
      // attempt to re-show the hidden events
      $("." + $(this).val()).show();
      
     // loop through the activefilters and remove the unselected filter
     // we dont know which key so we loop and match value
      for(i = 0; i < activeFilters.length; i++)
      {
        if(activeFilters[i] === $(this).val())
        {
          activeFilters.splice(i, 1);
        }
      }
  }
  
  // loop through the checkboxes and find active filters by the class 
  $(this).each(function(){
  	 if($(this).hasClass("chck-active"))
     {
     	// add the filter value to our active filters array
         activeFilters.push($(this).val());
     }
  });
  
  
  // we now need to loop through the filters and apply as needed
  if(activeFilters.length > 0)
  {
  		for( i = 0; i < activeFilters.length; i++)
      {
          // since we have active filters we dont need to show all
          // so hide them all and show only active filters
          $("div.event-spot").hide();
          $("." + activeFilters[i]).show();
      }
  }
  
  else{
  	// no active filters show all
  	$("div.event-spot").show();
  }
});

[computerbarry]

Big thanks
Appreciate the comments makes a little easier to get a better understanding.

I think v0.4 is working better ha

All events disappear again when clicking the months in the v0.5 fiddle and each filter overrides the other, meaning if I select Fairs and also select Sports straight after only the Sports events show?

Only one filter will show no matter how many filters we select.

Busy day
I’m sure you’re tied now, if you get chance to look at this, maybe you’ve missed something?

And maybe a silly question, but what does the dot mean inside "." as shown below - Is this what refers to the class name?
$("." + $(this).val()).show();

If you get chance.

And in v4.0 everything works good, its only when we select all the filters and then turn them off one by one the events don’t hide.

Cheers, Barry

[jgetner]

So you want only 1 filter to be able to be applied at a time? If so that makes things much much easier if so.

So check boxes will not be the best solution and instead using radio buttons would be a better option. Checkboxes as filters is implying you can have multiple filters selected. While radio buttons are better suited for choice based selection.

v5 i have it based on multiple filters being able to be selected and giving precedence to the second selection since no defined precedence weighting is defined so just defaults what ever selected last is considered the most relevant in precedence. I noticed a small bug already in my code concerning this but i think im on the right track if you want to continue down this path of multiple filters applied.

If you only want 1 filter applied at a time i can get that up and going fairly quickly.

And correct that is just building the class name

$("." + $(this).val()).show();

[jgetner]

So updated the version to only have 1 filter applied and using radio buttons instead of checkboxes.

CLNDR - JSFiddle - Code Playground

[computerbarry]

@jgetner

So you want only 1 filter to be able to be applied at a time?

You misunderstood me jgetner, though this is a nice addition something I could potentially use for other filters. I did create something similar to this using a select dropdown. Thanks for the example!

@jgetner

I noticed a small bug already in my code concerning this but i think im on the right track if you want to continue down this path of multiple filters applied.

Yes on the right track I need the multiple filters.

v5 i have it based on multiple filters being able to be selected and giving precedence to the second selection

I think this is the problem with v5.0, example…

Select Fairs then Sports straight after and you’ll see that Fairs events get hidden and only Sports events are show, even though we have two filters selected. Whatever filter is selected last, only those events are shown.

You also forgot to re add the onMonthChange if else which was causing the months links to clear all events, I’ve re added in v6.0 fiddle update v6.0

Also as mentioned, v4.0 is very good, why did we change, seems like more js in v5.0 - is this better?
I would be happy if we could fix v4.0 familiar with the code

V4.0 has one issue that when you select all filters, they don’t hide when we deselect them.

Thanks Barry