Streaming live at 10am (PST)

Multi-filter Mixitup Checkboxes not working IE11?

Hi,

I’m currently working on a site which needs multi-filtering. I’m using the Mixitup library. Before I go any further adding in content and getting the design into shape I need to make sure I can get the checkboxes to work in Internet Explorer 11. The actual Mixitup filtering is working in other browsers.

scotts-radical-project-879892.webflow.io

Read Only (the project has to be published for the mixitup library to work, please see link above).

https://preview.webflow.com/preview/scotts-radical-project-879892?utm_medium=preview_link&utm_source=designer&utm_content=scotts-radical-project-879892&preview=1c0c1e79f908a56c9e3cc77807393bf8&mode=preview

@sabanna Your example of Mixitup worked without checkboxes but when I test your example with checkboxes in BrowserStack with they stopped working: http://mixitup-webflow-tutorial.webflow.io/dynamix-checkboxes.

Is there any way to make the Mixitup checkbox filtering work within Internet Explorer 11?

Thanks in advance to anyone who can help. A big shout out and thanks to @ pablostanley for the initial source of my project with his sample of the Mixitup library working.

Kind regards

Matt

Hi @Meteorites, I read in this forum post Multi-Field Search Mixitup - Only 5 References in CMS that you got Mixitup to work in IE11. Do you mind sharing how you managed to do that? :slight_smile: Thanks in advance!

Hi @Tessa,

The actually Mixitup code naturally works in IE11. I had to add some custom code that Sabanna gave to me to get the checkboxes in Webflow to work with Mixitup in IE11.

Are you looking to use checkboxes and Mixitup?

Many thanks

Matt

I am already using Mixitup (multifilter), and it works like a charm (check it out here: https://privacycompany-test.webflow.io/en/services). Unfortunately, I found out that the checkboxes don’t do anything when the page is visited in IE. If you have some magic code to get that to work, I would love to have it!

Hi @Tessa,

I’m on my way to lunch meeting but as soon as I get back I’ll send across the additional piece of code to get the checkboxes working.

Thanks

Matt

Hi @Tessa,

Please see snippet @sabanna gave to me regarding the checkboxes not working in IE11.

// JavaScript source code

var catArray = document.querySelectorAll('.w-dyn-item .categ');

for (var i = 0; i < catArray.length; i++) {
   var elem = catArray[i];
   var text = elem.innerText || elem.innerContent;
   if (!text) {
      text = 'empty';
   }
   var conv = text.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '');
   var className = conv.replace(/ /g, "-").toLowerCase().trim();

   if (!isNaN(parseInt(className.charAt(0), 10))) {
      className = ("_" + className);
   }   
   elem.parentElement.parentElement.parentElement.classList.add(className);
}


// Creating a custom data-order attributes from blog titles:

var sortArray = document.querySelectorAll('.w-dyn-item .title');
for (var i = 0; i < sortArray.length; i++) {
   var sortElem = catArray[i];
   var sortText = sortElem.innerText || sortElem.innerContent;
   sortElem.parentElement.setAttribute('data-order', sortText);
}

// Set the reference to the container
var containerEl = document.querySelector('.container');

// Call the MixitUp plugin
mixitup(containerEl);

See how you go with this, if you need more help just shout. I’ve included Sabanna on this thread incase you might need her expertise.

Many thanks

Matt

1 Like

Hi Matt,

Thanks a lot for sharing. Unfortunately, I can’t get it to work. Whenever I replace part of my code with part of your code, the whole thing stops working. Perhaps because it’s Multifilter and yours seems single filter?

I’ll post my code below. Hopefully either you or @sabanna can provide some insights on how to make my code work for IE11 as well.

<script>
  // Reusable function to convert any string/text to css-friendly format
  var conv = function (str) {
    if (!str) {
        str = 'empty';
        }
    return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
              .replace(/ /g, "-")
              .toLowerCase()
              .trim();
  }; 


  // Creating dynamic elements classes from its categories:
  var catArray = document.querySelectorAll('.w-dyn-item .categ');
  
catArray.forEach( function(elem) {

     var text = elem.innerText || elem.innerContent;
     var className = conv(text);
     if (!isNaN(parseInt(className.charAt(0), 10))) {
          className = ("_" + className);
          }
     elem.parentElement.classList.add(className);
 
  });
  
  // Creating a custom data-order attributes from blog titles:
  var sortArray = document.querySelectorAll('.w-dyn-item .title');
  sortArray.forEach( function(sortElem) {
      var sortText = sortElem.innerText || sortElem.innerContent;
      sortElem.parentElement.setAttribute('data-order', sortText);
});
  
    var filterGroups = document.querySelectorAll('.data-filter-group');
  filterGroups.forEach( function(group) {
        group.setAttribute('data-filter-group','');
  });
  
  var containerEl = document.querySelector('.container');
  var checkboxGroup = document.querySelector('.filter_wrap');
  var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach( function(elem) {
      var dataValue = elem.getAttribute("data-value");
      elem.setAttribute('value', dataValue);
  });
  
  var allCheckbox = checkboxGroup.querySelector('input[value="all"]');
  
  var mixer = mixitup(containerEl, {
       multifilter: {
         enable: true                 
       }
  });
 
  checkboxGroup.addEventListener('change', function(e) {
    var selectors = [];
    var checkbox;
    var i;
    if (e.target === allCheckbox && e.target.checked) {
      for (i = 0; i < checkboxes.length; i++) {
        checkbox = checkboxes[i];
          if (checkbox !== allCheckbox) checkbox.checked = false;
      }
    } else {
          allCheckbox.checked = false;
      }
    for (i = 0; i < checkboxes.length; i++) {
      checkbox = checkboxes[i];
        if (checkbox.checked) selectors.push(checkbox.value);
    }
    var selectorString = selectors.length > 0 ?
    selectors.join(',') :  'all';
    mixer.filter(selectorString);
  });
   
</script> 

Thanks a lot!

Hi @Tessa

Have you managed to make progress? The version I’m using is multi filter with ‘AND’ logic.

Here’s a link to a conversation I had with Sabanna about the Mixituo plugin, there might be some code you can reference.

Thanks

Matt

Hi Matt,

Thanks for getting back to me. Hm, it seems strange to me. You have the multifilter with AND logic as well, so I’ve put our codes next to each other, but my code is way longer. I’ve tried replacing parts or the whole of my code with your code, but then it doesn’t work on any browser.

I’m completely stumped, but I have to confess I’m not really used to working with JS, so maybe it’s a rookie mistake that I just can’t spot?

Thanks,
Tessa

Hi @Tessa

Please see all my code, not just the IE checkbox snippet. Obviously you’ll have to match or change the classes in order for it to work.

Thanks

Matt

Hi @Tessa,

Here’s the code, didn’t work last time.

Hi Matt, I don’t see the code here, and I think you messaged it to me, but the message seems empty…

Hi Tessa, have sent the code again. Can you expand and see all the code?

No, I can only see

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js"></script>
// Reusable function to convert any string/text to css-friendly format var conv = function (str) { if (!str) { str = 'empty'; } return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '') .replace(/ /g, "-") .toLowerCase() .trim(); }; const moveItems = document.querySelectorAll('.to-be-moved'); moveItems.forEach( function(move) { document.getElementById('container').appendChild(move); }); // Creating dynamic elements classes from its categories: var catArray = document.querySelectorAll('.w-dyn-item .categ'); for (var i = 0; i < catArray.length; i++) { var elem = catArray[i]; var text = elem.innerText || elem.innerContent; var className = conv(text); if (!isNaN(parseInt(className.charAt(0), 10))) { className = ("_" + className); } elem.parentElement.classList.add(className); } var containerEl = document.querySelector('.container'); //var mixer = mixitup(containerEl); //var containerEl = document.querySelector('.container[data-ref="container"]'); var checkboxGroup = document.querySelector('.filter_wrap'); var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i < checkboxes.length; i++) { var elem = checkboxes[i]; var dataValue = elem.getAttribute("data-value"); elem.setAttribute('value', dataValue); } var allCheckbox = checkboxGroup.querySelector('input[value="all"]'); //var container = document.querySelector('[data-ref="container"]'); //var mixer = mixitup(containerEl); // var mixer = mixitup(containerEl, { // var mixer = mixitup(container, { var inputSearch = document.querySelector('.input-search'); var keyupTimeout; // var mixer = mixitup(container, { var mixer = mixitup(container, { animation: { duration: 350 }, callbacks: { onMixClick: function() { // Reset the search if a filter is clicked if (this.matches('[data-filter]')) { inputSearch.value = ''; } } } });

checkboxGroup.addEventListener(‘change’, function(e) {
var selectors = ;
var checkbox;
var i;
if (e.target === allCheckbox && e.target.checked) {
for (i = 0; i < checkboxes.length; i++) {
checkbox = checkboxes[i];
if (checkbox !== allCheckbox) checkbox.checked = false;
}
} else {
allCheckbox.checked = false;
}
for (i = 0; i < checkboxes.length; i++) {
checkbox = checkboxes[i];
if (checkbox.checked) selectors.push(checkbox.value);
}
var selectorString = selectors.length > 0 ?
selectors.join(’’) : ‘all’;
mixer.filter(selectorString);

  });

  			// var containerEl = document.querySelector('.container');
					// var containerEl = document.querySelector('.container'[data-ref="container"]);
				// var containerEl = document.querySelector('[data-ref="container"]');


        //var container = document.querySelector('[data-ref="container"]');
            // Set up a handler to listen for "keyup" events from the search input
        		inputSearch.addEventListener('keyup', function() {
            var searchValue;
            if (inputSearch.value.length < 3) {
                // If the input value is less than 3 characters, don't send
                searchValue = '';
            } else {
                searchValue = inputSearch.value.toLowerCase().trim();
            }
            // Very basic throttling to prevent mixer thrashing. Only search
            // once 350ms has passed since the last keyup event
            clearTimeout(keyupTimeout);
            keyupTimeout = setTimeout(function() {
                filterByString(searchValue);
            }, 350);
        });
        /**
         * Filters the mixer using a provided search string, which is matched against
         * the contents of each target's "class" attribute. Any custom data-attribute(s)
         * could also be used.
         *
         * @param  {string} searchValue
         * @return {void}
         */
        function filterByString(searchValue) {
            if (searchValue) {
                // Use an attribute wildcard selector to check for matches
                mixer.filter('[class*="' + searchValue + '"]');
            } else {
                // If no searchValue, treat as filter('all')
                mixer.filter('all');
            }
        }

just looking where I can link to the code…much easier than this!

Thanks! Perhaps you can put it in a .txt file and upload it to a reply?

only upload jpegs etc…nothing you can copy out.

Isn’t it somewhere on your project, that I can look at it through your share-only link?