0

I have some lines of code that filter wordpress-categories by AJAX after you chose the cartegory in a dropdown selectbox. But you have to press a button for starting the process. I would like to have this without pressing the button.

I thought that changing "submit" into "change" in the first line will do the job. But it does not work. Therefore my question: How can i avoid the button and make it run directly after choosing the category from the dropdown?

The Dropdown with button: 

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
    <?php
        if( $terms = get_terms( array( 'taxonomy' => 'category', 
                                        'orderby' => 'name',
                                        'include'          => array(32, 33, 34, 35, 36, 41 ) ) ) ) : 

            echo '<select name="categoryfilter"><option value="">Categorias</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; 
            endforeach;
            echo '</select>';
        endif;
    ?>


    <button class="emed_go">GO!</button>
    <input type="hidden" name="action" value="myfilter">
</form>
<div id="response"></div>

And here the jQuery:

$('#filter').submit(function(){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), 
            type:filter.attr('method'), 
            beforeSend:function(xhr){
                filter.find('button').text('Processing...'); 
            },
            success:function(data){
                filter.find('button').text('Apply filter');
                $('#response').html(data); 
            }
        });
        return false;
    });

Thanks rabox

rabox66
  • 149
  • 2
  • 10

1 Answers1

0

You cant just change it to $('#filter').change(... because the form #filter doesnt trigger a change event.

You would have to listen to the change on the actual select element, then you can delete the button from your page too.

The following should work.

Firstly I'd give your category filter an ID or class:

echo '<select class="categoryfilter" name="categoryfilter"><option value="">Categorias</option>';

Then in your Javascript just change the selector to the dropdown.

$('.categoryfilter').change(function(){

        var filter = $('#filter');

        $.ajax({
            url: filter.attr('action'),
            data: filter.serialize(), 
            type: filter.attr('method'), 
            beforeSend:function(xhr){
                //Show loading spinner
            },
            success:function(data){
                //Cancel loading spinner.
                $('#response').html(data); 
            }
        });
        return false;
});
Mikepote
  • 6,042
  • 3
  • 34
  • 38
  • It is too simple a question to answer. Already answered in a comment and marked as duplicate `$("[name=categoryfilter]")` is just as good as an ID or class – mplungjan Feb 08 '19 at 20:51
  • @mplungjan noted for next time. BTW, what is the policy on not answering questions like this but leaving comments only? Seems wrong to me? – Mikepote Feb 08 '19 at 20:56
  • It is just my personal feeling to determine if a question has sufficient dupes or is sufficiently close to being a "typo-type" question. I could comment the answer in a few seconds and in the minute it took you to answer I found many dupes. I am sure you knew it had already been answered many times – mplungjan Feb 08 '19 at 21:04
  • Sorry, for you it might be very easy. For me - who is tryoíng to lear jQuery it is definitely not. BTW, the poposal does not work. But I do not see the bug. Sorry. – rabox66 Feb 08 '19 at 21:11
  • @rabox66 - I'd suggest having googling for "jquery ajax call on select change" – Mikepote Feb 08 '19 at 21:23