Forums › Forums › Search & Filter Pro › How Can I add event listener to all search menu positions

Viewing 9 posts - 1 through 9 (of 9 total)
  • Anonymous
    (Private)  January 18, 2021 at 10:40 am #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
    (Private)  January 18, 2021 at 10:42 am #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
    (Private)  January 18, 2021 at 11:15 am #273055

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

    Anonymous
    (Private)  January 18, 2021 at 12:01 pm #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
    (Private)  January 18, 2021 at 12:04 pm #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
    (Private)  January 18, 2021 at 12:23 pm #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
    (Private)  January 18, 2021 at 12:31 pm #273077

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

    Anonymous
    (Private)  January 19, 2021 at 8:17 am #273143

    A name of selected category

    Ross Moderator
    (Private)  January 21, 2021 at 5:04 pm #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
Viewing 9 posts - 1 through 9 (of 9 total)