[Resolved] Showing only available filter options not working

[Author]

Posts

[sinanU-2]

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..

[Shane]

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

[sinanU-2]

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.

[Shane]

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

[sinanU-2]

My issue is resolved now. Thank you!