Remove multiple filter/sort mixitup jquery plugin

I’m trying to remove the multiple filter in “mixitup” jquery plugin. I just want the plugin to only select one value instead of selecting multiple values. Here is my work in progress

http://digitalspin.ph/federalland/project-page/

Here is the MARKUP CODE -

<div class="group" id="Filters">
			<div class="drop_down wf">
				<span class="anim150">Location</span>
				<ul class="anim250">
					<li class="active" data-filter="all" data-dimension="location">All</li>
					<li data-filter="thefort" data-dimension="location">The Fort</li>
					<li data-filter="cavite" data-dimension="location">Cavite</li>
					<li data-filter="cebu" data-dimension="location">Cebu</li>
					<li data-filter="marikina" data-dimension="location">Marikina</li>
					<li data-filter="quezoncity" data-dimension="location">Quezon City</li>
					<li data-filter="manila" data-dimension="location">Manila</li>
					<li data-filter="pasay" data-dimension="location">Pasay</li>
					<li data-filter="sanjuan" data-dimension="location">San Juan</li>
					<li data-filter="makati" data-dimension="location">Makati</li>
				</ul>
			</div>
			
			<div class="drop_down wf">
				<span class="anim150">Price</span>
				<ul class="anim250">
					<li class="active" data-filter="all" data-dimension="price">All</li>
					<li data-filter="1m_3m" data-dimension="price">1m - 3m</li>
					<li data-filter="3m_5m" data-dimension="price">3m - 5m</li>
					<li data-filter="5m_10m" data-dimension="price">5m - 10m</li>
					<li data-filter="10m_20m" data-dimension="price">10m - 20m</li>
					<li data-filter="20m_up" data-dimension="price">20m and up</li>
					
				</ul>
			</div>
		</div>

JQUERY CODE

<script>
    $(function () {

    // INSTANTIATE MIXITUP

    $('#Grid').mixitup({
        effects: ['fade', 'blur']
    });

    // HANDLE MULTI-DIMENSIONAL CHECKBOX FILTERING
	
	var $filters = $('#Filters').find('li'),
					dimensions = {
						location: 'all', // Create string for first dimension
						price: 'all' // Create string for second dimension
					};
		

    var $filters = $('#Filters').find('li');
    var filterString = 'all';

    // Bind checkbox click handlers:
	$filters.on('click',function(){
					var $t = $(this),
						dimension = $t.attr('data-dimension'),
						filter = $t.attr('data-filter'),
						filterString = dimensions[dimension];



        if (filter == 'all') {
            // If "all"
            if (!$t.hasClass('active')) {
                // if unchecked, check "all" and uncheck all other active filters
                $t.addClass('active').siblings().removeClass('active');
                // Replace entire string with "all"
                filterString = 'all';
            }
        } else {
            // Else, uncheck "all"
            $t.siblings('[data-filter="all"]').removeClass('active');
            // Remove "all" from string
            filterString = filterString.replace('all', '');

            if (!$t.hasClass('active')) {
                // Check checkbox
                $t.addClass('active');
                // Append filter to string
                filterString = filterString == '' ? filter : filterString + ' ' + filter;
            } else {
                // Uncheck
                $t.removeClass('active');
                // Remove filter and preceeding space from string with RegEx
                var re = new RegExp('(\\\\s|^)' + filter);
                filterString = filterString.replace(re, '');
            };
        };

        // Reset to all if none are active
        if ($filters.filter('.active').size() == 0) {
            $filters.filter('[data-filter="all"]').addClass('active');
            filterString = 'all';
        }
		
		
		// Set demension with filterString
					dimensions[dimension] = filterString;
					
					// We now have two strings containing the filter arguments for each dimension:	
					console.info('dimension 1: '+dimensions.location);
					console.info('dimension 2: '+dimensions.price);
					
					/*
					*	We then send these strings to MixItUp using the filter method. We can send as
					*	many dimensions to MixitUp as we need using an array as the second argument
					*	of the "filter" method. Each dimension must be a space seperated string.
					*
					*	In this case, MixItUp will show elements using OR logic within each dimension and
					*	AND logic between dimensions. At least one dimension must pass for the element to show.
					*/

        $('#Grid').mixitup('filter',[dimensions.location, dimensions.price])	
    });
    });
    </script>

–UPDATE–

I have tried adding multiFilter but it doesn’t seem to be working. I can still select multiple items


    $('#Grid').mixitup({
	    multiFilter: false,
        effects: ['fade', 'blur']
    });

Hmm,

That’s a bit odd. Firstly multiFilter is false by default, so you shouldn’t need to explicitly set that. There are also a couple of JS errors on your page, which could be causing issues with this script.

Also checkout this code snippet:


            if (!$t.hasClass('active')) {
                // Check checkbox
                $t.addClass('active');
               [B] // Append filter to string
                filterString = filterString == '' ? filter : filterString + ' ' + filter;[/B]
            } else {
                // Uncheck
                $t.removeClass('active');
                [B]// Remove filter and preceeding space from string with RegEx
                var re = new RegExp('(\\\\s|^)' + filter);
                filterString = filterString.replace(re, '');[/B]
            };

Its appending the filter to the filterString variable. You don’t want to do that. You want to replace the string, which is actually a much simpler process. Try replacing that snippet with:


            if (!$t.hasClass('active')) {
                // Check checkbox
                $t.addClass('active');
               [B] // Set filter to string
                filterString = filter;[/B]
            } else {
                // Uncheck
                $t.removeClass('active');
                [B]// Remove filter
                filterString = '';[/B]
            };

I would also do a vanilla install of the plugin, and see if it works ‘off-the-shelf’, as this seems to be default behaviour and shouldn’t require modification.

M

When you meant of vanilla install. Basically just pure javascript and no jquery? By the way thanks for pointing out the error. The plugin seems to work a little bit better. I’m still baffled on how i can disable the “multiFilter” hmmmm

I just had a look at your page.
The console is showing me two errors:

Uncaught TypeError: Cannot set property 'onchange' of null (index):657
Uncaught TypeError: Cannot set property 'onchange' of null (index):669

As mickyginger says it is entirely possible that they could be causing issues with this script, so you might want to address these.

Issue resolved, those errors i believe were my old sorting. By the way i had to remove this code and return the old one because it seems that the sorting plugin is not functioning properly. Whenever i select another value it replaces the item instead of adding it. The snippet is only good if i can disable the multiFilter function when selecting values.

         if (!$t.hasClass('active')) {
                // Check checkbox
                $t.addClass('active');
                // Set filter to string
                filterString = filter;
            } else {
                // Uncheck
                $t.removeClass('active');
                // Remove filter
                filterString = '';
            };

Still having an issue with his plugin. I still can’t figure on how i can disable the multiFilter in the checkbox