How Can I add event listener to all search menu positions

Anonymous

#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

Anonymous

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

Trevor

#273055

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

Anonymous

#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);
});

Trevor

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

Anonymous

#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

Trevor

#273077

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

Anonymous

#273143

A name of selected category

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

[Author]

Posts