Skip Navigation

[Resolved] Showing only available filter options not working

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user was using our Classic views builder and added some custom Javascript to their search.

Whenever the user does any search their custom javascript will stop functioning.

Solution:

This occurs because the user is performing an AJAX search. What this means is that the search is done without refreshing the entire page.

In a case like this you will need to make use of the Frontend Events callback functions in our Classic Views builder.

If you go to your view and edit it, then go to the filters section where you've setup your frontend filters you will see the JS editor.

In that editor there is a button at the top for Frontend events. You can click this button to add the correct callback option for your frontend activity.

Then just re-add your JS within this callback function.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 4 replies, has 2 voices.

Last updated by sinanU-2 3 weeks, 4 days ago.

Assigned support staff: Shane.

Author
Posts
#1702891

I have a page with different job offers. There I have implementetd two differend filter. I created some js code to adapt the looking into the page. Normaly everything is working. But if I choose the option 'Show only available options' the design and js code breakes and doesent work after cliking the Link. You can test the filters on following page:

hidden link
The filters apeat if you scroll down.

This is my code:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="filters_news" id="filters_news">

<div class="form-group">
<label>[wpml-string context="wpv-views"]<div id="title_news" class="head_title_h1"><p>Orte</p></div>[/wpml-string]</label><br>
[wpv-control-postmeta type="radios" field="wpcf-standort" default_label="Alle anzeigen" class="ort1_filter" label_class="ort1_filter_label" url_param="wpv-wpcf-standort"]
</div>
<br><br><br><br>

<div class="form-group1">
<label>[wpml-string context="wpv-views"]<div id="title2_news" class="head_title_h1"><p>Vakanzen</p></div>[/wpml-string]</label><br>
[wpv-control-postmeta type="radios" field="wpcf-vakanz" default_label="Alle anzeigen" class="veranstaltung_filter" label_class="vakanz_filter_label" url_param="wpv-wpcf-vakanz"]
</div>

</div>
[/wpv-filter-controls]
[wpv-filter-end]

CSS code:

#ajaxsearchlite3 {
margin-top: 35px !important;
}

.head_title_h1 p {
padding-top:5px;
line-height: 30px;
}

.filters_news{
width:20%;
float:right;
}

.form-control, input, textarea, select, .lidd_mc_input_light input[type="text"], .lidd_mc_select_fancy_light, .lidd_mc_select_fancy_dark{
min-height:100px;
height:100px;
border:0px;
box-shadow:none;
}
input[type="checkbox"], input[type="radio"]{
display:none
}

.vakanz_filter_label {
width:100%;
margin: 10px 5px 10px 0px;
}

.vakanz_filter_label.active{
color: #dc911b;
background: #a5a3a333;
width: 100%;
padding: 5px;
border-radius: 3px;
font-weight: bold;
display: initial;
}
.ort1_filter_label {
width:100%;
margin: 10px 5px 10px 0px;
padding-left:0px;
}

.ort1_filter_label.active{
color: #dc911b;
background: #a5a3a333;
width: 100%;
padding: 5px;
border-radius: 3px;
font-weight: bold;
display: initial;
}

and js code:

$('.vakanz_filter_label').mousedown('click',function(){
$('.wpcf-form-radio-label').removeClass('active');
$('.vakanz_filter_label').removeClass('active');
$(this).addClass('active');
});

$('.wpcf-form-radio-label').mousedown('click',function(){
$('.vakanz_filter_label').removeClass('active');
$(this).addClass('active');
});

$('.ort1_filter_label').mousedown('click',function(){
$('.wpcf-form-radio-label').removeClass('active');
$('.ort1_filter_label').removeClass('active');
$(this).addClass('active');
});

$('.wpcf-form-radio-label').mousedown('click',function(){
$('.ort1_filter_label').removeClass('active');
$(this).addClass('active');
});

$('#filters_news').css('position', 'fixed');
$(".ort1_filter_label").hide();
$(".wpcf-form-label").hide();
$(".vakanz_filter_label").hide();

$("#title_news").mouseenter(function(){
$(".ort1_filter_label").show();
$(".form-group").css('height','auto');
});

$(".form-group").mouseleave(function(){
$(".ort1_filter_label").hide();
$(".form-group").css('height','40');
});

$("#title2_news").mouseenter(function(){
$(".vakanz_filter_label").show();
$(".form-group1").css('height','auto');
});

$(".form-group1").mouseleave(function(){
$(".vakanz_filter_label").hide();
$(".form-group1").css('height','40');
});

Need help. This is very urgent please..

#1703105

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Sinan,

Thank you for getting in touch.

Are you building this view with the new views blocks? Or are you using the classic editor?

Also i'm not seeing any filters on this page. Can you send me a screenshot of where the filters are supposed to be ?

Thanks,
Shane

#1703151

Hi Shane,

I have used the create custom filter button in the classic view editor. On the added screenshots you can see the filters. When you scroll down, the filters are apearing.

#1703209

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Sinan,

The problem seems to be that you need to re-trigger your JS after you have made a search.

If you go to your view and edit it, then go to the filters section where you've setup your frontend filters you will see the JS editor.

In that editor there is a button at the top for Frontend events. You can click this button to add the correct callback option for your frontend activity.

Then just re-add your JS within this callback function.

Please let me know if this helps.
Thanks,
Shane

#1703581

My issue is resolved now. Thank you!