Conflict Select2

Anonymous

#231587

Hi
I need to resolve a serious conflict with my theme, I have looked into all the support discussions, but have found nothing that could help me.
The problem is that using | Select2 | a DOM event is triggered in “class =” select2 select2-container select2-container – default select2-hidden-accessible ” and this breaks my Search Filter and the only way to restore the filter is a page refresh. It’s days that I try to solve this without any success, I know so much that you can help me.

Anonymous

#231588

This reply has been marked as private.

Trevor

#231593

What steps do I need to take to see the error?

Anonymous

#231597

you can also simply do “inspect element” the filter will break instantly

Trevor

#231599

This reply has been marked as private.

Anonymous

#231603

This reply has been marked as private.

Anonymous

#231634

it seems that I found the problem…
In my Javascript I found this function:

—————————————
function prepare_responsive() {
var headerwidth = $(window).width();
if(isphone || headerwidth <= start_mobile_size) {
window.isMobile = true;
} else {
window.isMobile = false;
}

if(isphone || headerwidth <= start_mobile_size) {
if($(‘.select2’).length) {
$(‘select.select2-hidden-accessible’).select2(‘destroy’);
}
} else {
if($(‘.select2’).length) {
$(‘.select2’).select2({minimumResultsForSearch: 20, width: ‘auto’, dropdownAutoWidth : true});
}
}

if(isphone || headerwidth <= start_mobile_size) {
// responsive images in profile page
// only show the images if they are in viewport
function show_profile_images() {
if($(‘.mobile-ready-img’).length) {
$(‘.mobile-ready-img’).each(function() {
if(isElementInViewport($(this)) && (!$(this).attr(‘src’) || $(this).attr(‘src’) != $(this).data(‘responsive-img-url’))) {
$(this).css(‘opacity’, ‘0’).attr(‘src’, $(this).data(‘responsive-img-url’)).fadeTo(‘slow’, 1);
}
});
}
}
show_profile_images();
$(window).scroll(function(event){
if(isphone || headerwidth <= start_mobile_size) {
show_profile_images();
}
});
—————————————

What I have done at the moment is to clear the block:
—————————————
if(isphone || headerwidth <= start_mobile_size) {
if($(‘.select2’).length) {
$(‘select.select2-hidden-accessible’).select2(‘destroy’);
}
} else {
if($(‘.select2’).length) {
$(‘.select2’).select2({minimumResultsForSearch: 20, width: ‘auto’, dropdownAutoWidth : true});
}
}
—————————————

I’m not sure that clearing the block is correct and I’m wondering if there is a way to bypass without deleting.

Trevor

#231645

Are you able to identify where the theme uses select2?

The jQuery selectors used could be made more specific. The code is too generic at the moment.

Let me give you an example. This code:

if($('.select2')

If the select2 components are always within containing divs with the class of mythemeform, the jQuery selector could be:

if($('.mythemeform .select2')

Anonymous

#231679

ok I understand, at the moment I can’t understand where the theme uses “select2”.
For now I will just comment on the block and as soon as I find out where it is used I will look for a definitive solution.
For the moment I thank you ! We can close this discussion.

Trevor

#231681

Thanks for getting back to me. I will close this thread for now.

[Author]

Posts