How Can I add event listener to all search menu positions

Kamil Sawoń

#273043

Hello,
I want to run my own js function while click on search and filter option in filters menu. For example:

Category_field
*category 1
*category 2

If I click category 1 or 2 or any other I want to run my function. How to do that? I’ve tried this methods: https://flaviocopes.com/how-to-add-event-listener-multiple-elements-javascript/ with sf-label-radio class.

My function just have to make whole div with S&F collapse after choising an option

Add New Note to this Reply

Kamil Sawoń

#273044

There is a code:

<button class="mobile-menu-accordion" onclick="switchAccordion()">rozwiń filtry</button>
<div id="mobile-menu-panel">
<span id="ST">[searchandfilter id="4911"]</span>
</div>

<script>
function switchAccordion(){
	var x = document.getElementById("mobile-menu-panel");
		if (x.style.display === "none") {
			x.style.display = "block";
		} else { x.style.display = "none"; }
}

function switchAccordionAfterClick (){
	if (window.screen.width < 757){
		var x = document.getElementById("mobile-menu-panel");
		x.style.display = "none";
	}
}

document.querySelector('.sf-label-radio').addEventListener('click', switchAccordionAfterClick)
</script>

Add New Note to this Reply

Trevor Moderator

#273055

I have referred your question to the plugin developer, Ross, for his input.

Add New Note to this Reply

Kamil Sawoń

#273065

Thank You
Update – This code works, but only once. looks like afer use s&f resets my event listener

<button class="mobile-menu-accordion" id="mobile-accordion-button" onclick="switchAccordion()">rozwiń filtry</button>
<div id="mobile-menu-panel">
<span id="ST">[searchandfilter id="4911"]</span>
</div>

<script>
function switchAccordion(){
	var x = document.getElementById("mobile-menu-panel");
	var y = document.getElementById("mobile-accordion-button");
		if (x.style.display === "none") {
			x.style.display = "block";
			y.innerHTML = "zwiń filtry";
		} else {
			x.style.display = "none";
			y.innerHTML = "rozwiń filtry";
		}
}

var elements = document.getElementsByClassName("sf-label-radio");

function switchAccordionAfterClick (){
	if (window.screen.width < 757){
		var x = document.getElementById("mobile-menu-panel");
		var y = document.getElementById("mobile-accordion-button");
		x.style.display = "none";
		y.innerHTML = "rozwiń filtry";
		
	}
}

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', switchAccordionAfterClick, false);
}
</script>

Array.from(elements).forEach(function(element) {
    element.addEventListener('click', switchAccordionAfterClick);
});

Add New Note to this Reply

Trevor Moderator

#273067

You may need to reapply that code after any ajax event of the form. There are two such events; ajaxformfinish (which triggers after Auto Count updates the form) and ajaxfinish (after the form updates the results). You code would go inside this type of code:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    // call your script or function here
  });
}(jQuery));</script>

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
    // call your script or function here
  });
}(jQuery));</script>

Add New Note to this Reply

Kamil Sawoń

#273073

For feature:

<button class="mobile-menu-accordion" id="mobile-accordion-button" onclick="switchAccordion()">rozwiń filtry</button>
<div id="mobile-menu-panel">
<span id="ST">[searchandfilter id="4911"]</span>
</div>

<script>
function addListenerToSearchAndFilter(){
	var elements = document.getElementsByClassName("sf-label-radio");
	for (var i = 0; i < elements.length; i++) {
		elements[i].addEventListener('click', switchAccordionAfterClick, false);
	}
}

function switchAccordion(){
	var x = document.getElementById("mobile-menu-panel");
	var y = document.getElementById("mobile-accordion-button");
		if (x.style.display === "none") {
			x.style.display = "block";
			y.innerHTML = "zwiń filtry";
		} else {
			x.style.display = "none";
			y.innerHTML = "rozwiń filtry";
		}
	addListenerToSearchAndFilter();
}

function switchAccordionAfterClick (){
	var x = document.getElementById("mobile-menu-panel");
	var y = document.getElementById("mobile-accordion-button");		
	x.style.display = "none";
	y.innerHTML = "rozwiń filtry";
}
</script>

This code works well, however I would like to do one more thing. I would like to get name of the chosen filter to display. So now, the point is to find the way to get element label text

Add New Note to this Reply

Trevor Moderator

#273077

Do you need the name of the field, e.g. ‘Category_field’ or the term chosen/selected, e.g. ‘category 1’?

Add New Note to this Reply

Kamil Sawoń

#273143

A name of selected category

Add New Note to this Reply

Ross Moderator

#273529

Hi Kamil

You can do this on your event listener:

switchAccordionAfterClick

Because it is on the click event, you can get some additional data about what was clicked on by adding the event to the function:

switchAccordionAfterClick( event ) {
    console.log( event.target );
    ...

You should find a bunch of data in there to help you get find the label or text, you can also try these:
textContent – https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
innerHTML – https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Best

Add New Note to this Reply

[Author]

Posts