Bootstrap / MixItUp "data-toggle" Attribute Interference

[UnrulyNatives]

Immediate children of An element in DOM which has a data-toggle="buttons" become activated and toggle visibility of the mixer's items.
Just to give more details, the frontend framework used by me is Bootstrap 4 alpha 5.

I attempted to add

controls: {
    scope: 'local'
}

to the initiating code, but the mixer didn't initialize with these lines.

I also tried to paste some code from MixItUp 2:

,
selectors: {

        filter: '.filter-btn',
        sort: '.sort-btn'
    }

but it didn't do any good either.

[patrickkunka]

Hi,

I came across this issue a few days ago with another bootstrap user. Bootstrap uses the attribute data-toggle internally, which interferes with MixItUp.

Use the selectors.control configuration option to specify an additional selector by which to restrict MixItUp controls. This can be a class name or attribute etc.

e.g.

mixitup(container, {
    selectors: {
        control: '[data-mixitup-control]'
    }
}

<button type="button" data-mixitup-control data-filter=".red">Red</button>
<button type="button" data-mixitup-control data-toggle=".blue">Blue</button>
<button type="button" data-mixitup-control data-sort="default:desc">Sort Desc</button>

FYI - this option was added in 3.1.0

[patrickkunka]

Assuming this fix has worked for you, let me know if otherwise and will reopen.

[hannahmwool]

This fixes the issue but makes the MixItUp pagination buttons not work and since they're auto-generated I can't add the "data-mixitup-control" to each one. Is there a config option to add to that or should I use jQuery to add "data-mixitup-control" to each button after load?

Thanks

[patrickkunka]

Hi Molly,

Can you try the following? Haven't tried it but it should in theory work:

const mixer = mixitup({
    ...,
    templates: {
        pager: '<button type="button" class="${classNames}" data-page="${pageNumber}" data-mixitup-control>${pageNumber}</button>',
        pagerPrev: '<button type="button" class="${classNames}" data-page="prev" data-mixitup-control>&laquo;</button>',
        pagerNext: '<button type="button" class="${classNames}" data-page="next" data-mixitup-control>&raquo;</button>'
    }
});

[hannahmwool]

Worked perfect! Thank you.

[Camran]

Hi @patrickkunka issue is not solve, please help me.
var containerEl = document.querySelector('[data-ref~="mixitup-container"]');

        var mixer = mixitup(containerEl, {
            selectors: {
                target: '[data-ref~="mixitup-target"]'
            }
        });
         var mixer = mixitup(containerE1, {
         selectors: {
            control: '[data-mixitup-control]'
          }
     });

[patrickkunka]

Hi @Camran,

I don't understand what your question is. But you should only need to create one mixitup instance. You can merge all your configuration options together into a single configuration object.

var mixer = mixitup('[data-ref~="mixitup-container"]', {
    selectors: {
        target: '[data-ref~="mixitup-target"]',
        control: '[data-mixitup-control]'
    }
});

Does this help?

[Camran]

Thanks, it works :)

…

On Fri, Jun 30, 2017 at 11:37 AM, Patrick Kunka ***@***.***> wrote: Hi @Camran <https://github.com/camran>, I don't understand what your question is. But you should only need to create one mixitup instance. You can merge all your configuration options together. var mixer = mixitup('[data-ref~="mixitup-container"]', { selectors: { target: '[data-ref~="mixitup-target"]', control: '[data-mixitup-control]' } }); Does this help? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#268 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Ab9K69p4aXETpJsJELQeo5KvEqnw-r79ks5sJJe4gaJpZM4LP3gv> .

[leonel-ai]

Ran into the same issue. This (first suggestion) was exactly the solution I needed. Thanks @patrickkunka!