[Resolved] Adding custom JS that works on page load AND after updating Views filters

[Author]

Posts

[Ido Angel]

hey,

small help - i got this to work with this code:

    $(document).ready(function () {
        $('.radio label input[type="radio"]').click(function () {
            $('input:not(:checked)').parent().removeClass("checkedpoem");
            $('input:checked').parent().addClass("checkedpoem");
        });
        $('input:checked').parent().addClass("checkedpoem");
    });

I even added this -

$(".radio:first-child label input").attr("checked", true).trigger('change');

to make sure the first label is always checked.

BUT:

it only works when "Always show all values for inputs" is on, and not when "Show only available options for each input" is on.

any ideas?

thanks!

PS: i really think it would be a good suggestion to either add this functionality to views (add a class to the parent label of a checked radio, that is), or instead just design the html differently, so that the parent .radio gets a class.

[Nigel]

Hi Ido

You are using the dom ready event to add your JS.

When you use the "Show only available options for each input" option the filters are updated via ajax whenever one is changed and your JS added with dom ready is lost.

You need to re-attach it, for which you can use a custom Views JS event.

Note in the custom JS box there is a Front-end Events button, which brings up a dialog as per my screenshot, which highlights the event you need to use.

[Ido Angel]

perfect! missed that button.
now the first code works, but the second one, in charge of making the first radio checked at the beginning - doesn't.
i've tried placing it outside the event, but still doesn't work.
where do i put this if i want it to load on page load?

$(".radio:first-child label input").attr("checked", true).trigger('change');

[Nigel]

That custom event fires when the filters are changed and the results updated.

If you want something to run on page load you will also have to use the dom ready event, i.e. you may need to duplicate your code, running initially with dom ready, and again with the custom event.

[Ido Angel]

i tried:

jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
  
  $(document).ready(function () {
        $('.radio label input[type="radio"]').click(function () {
            $('input:not(:checked)').parent().removeClass("checkedpoem");
            $('input:checked').parent().addClass("checkedpoem");
        });
        $('input:checked').parent().addClass("checkedpoem");
    });

	
});    

jQuery( document ).on( 'js_event_wpv_parametric_search_triggered', function( event, data ) {

$(".radio:first-child label input").attr("checked", true).trigger('change');
	
});

but didn't help.

[Nigel]

Hi Ido

You can't put something which is triggered on dom ready inside a function which is triggered by the custom event because the dom ready event happens first.

I haven't looked too closely at your actual code, just at how you are structuring it.

You need to do something like this:

( function( $ ) {
	$( document ).ready( function(){
		
		// Code you want to run when the page loads, e.g.
	    $('.radio label input[type="radio"]').click(function () {
	        $('input:not(:checked)').parent().removeClass("checkedpoem");
	        $('input:checked').parent().addClass("checkedpoem");
	    });
	    $('input:checked').parent().addClass("checkedpoem");
	});

	$( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {

		// Code you want to run when filters have been changed
	    $('.radio label input[type="radio"]').click(function () {
	        $('input:not(:checked)').parent().removeClass("checkedpoem");
	        $('input:checked').parent().addClass("checkedpoem");
	    });
	    $('input:checked').parent().addClass("checkedpoem");
	});

})( jQuery );

[Ido Angel]

perfect! so it was:

( function( $ ) {
    $( document ).ready( function(){
         
        // Code you want to run when the page loads, e.g.
$(".radio:first-child label input").attr("checked", true).trigger('change');

    });
 
    $( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
 
        // Code you want to run when filters have been changed
        $('.radio label input[type="radio"]').click(function () {
            $('input:not(:checked)').parent().removeClass("checkedpoem");
            $('input:checked').parent().addClass("checkedpoem");
        });
        $('input:checked').parent().addClass("checkedpoem");
    });
 
})( jQuery );

cheers!