WordPress AJAX отправить результаты открывается в admin- ajax. php вместо содержимого div

Question

Итак, у меня проблема с обработчиком AJAX в WordPress. Это моя форма здесь:

form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter" name="filter">
            <input type="hidden" name="action" value="myfilter">
            <?php
                if( $terms = get_terms( array( 'taxonomy' => 'category', 'orderby' => 'name' ) ) ) :

                    echo '<div class="d-flex justify-content-center">';

                    foreach ( $terms as $term ) :
                        if($first) : echo '<label><input type="radio" class="radio-formular" value="' . $term->term_id . '" name="categoryfilter" onclick="this.form.submit();" checked>' . $term->name.'</label>'; // ID of the category 
                        else : echo '<label><input type="radio" class="radio-formular" value="' . $term->term_id . '" name="categoryfilter">' . $term->name. '</label>'; // ID of the category as the value
                        endif;

                    endforeach;
                echo '</div>';
            endif;
        ?>

        <button id="sbm">Apply</button>


    </form>

, и я хочу, чтобы при выборе одного из рад ios форма отправлялась и обрабатывалась следующим фрагментом кода:

<script type="text/javascript">
    jQuery(function($){
    $('#filter').submit(function(e){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                //filter.find('button').text('Processing...'); // changing the button label
            },
            success:function(data){
                //filter.find('button').text('Apply filter'); // changing the button label back
                $('#response').html(data); // insert data
            }
        });
        return false;
    });
});


</script>

Оба фрагмента находятся в одном файле.

функций. php

add_action('wp_ajax_myfilter', 'misha_filter_function'); // wp_ajax_{ACTION HERE} 
add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');

function misha_filter_function(){
    $args = array(
        'orderby' => 'date', // we will sort posts by date
        'order' => $_POST['date'] // ASC or DESC
    );

    // for taxonomies / categories
    if( isset( $_POST['categoryfilter'] ) && $_POST['categoryfilter'] != '0' )
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => $_POST['categoryfilter']
            )
        );


    // if you want to use multiple checkboxed, just duplicate the above 5 lines for each checkbox

    $query = new WP_Query( $args );

    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post();
            echo '<div class="container-apartament m-3 text-center">';
                echo '<img src="'. wp_get_attachment_url(get_post_thumbnail_id($query->post->ID),'full') .'">';
                echo '<div class="mt-2 mb-2 card-body">';
                    echo '<h4>' . $query->post->post_title . '</h4>';
                    echo '<a href="#myModal-'. $query->post->ID . '" class="band-text-inner"><img src="wp-content/uploads/2020/03/house-plan.png"> Plan </a>';
                    echo '<p class="card-price">'. get_field("price") .'€ no VAT</p>';
                    echo '<p class="card-yield">'. get_field("yield") .' NET <span class="text-mic-card">yield/yr: '. (string)0.05*get_field("price")*1000 .' € </span></p>';
                    echo '<a href="'. get_permalink() .'" class="invest-now">Invest Now </a>';
                echo '</div>';
            echo '</div>';
        endwhile;
        wp_reset_postdata();
    else :
        echo 'No posts found';
    endif;

    die();
}

Проблема заключается в следующем: Отправка формы с помощью кнопки работает, как и ожидалось, но когда я установил Событие onclick на переключателях застревает в admin- ajax. php вместо возврата значений. Где ошибка? Я борюсь с этим с обеда, и я не могу найти решение. Я пытался protectDefault (), как я видел в другом посте здесь, но он останавливает отправку формы, и я вообще не получаю ответа. Извините за мой плохой английский sh и / или неоднозначное объяснение, и заранее спасибо!

Answer 1

Вот фрагмент, который представляет собой скелет того, что, как я полагаю, вы пытаетесь сделать:

• , препятствующего фактической отправке формы (чтобы не загружалась новая страница)
• делать что-то отличное от значения по умолчанию при отправке формы (например, это просто запись в консоль, но это может быть просто запрос Ajax)
• , инициирующий действие не по умолчанию, когда изменение значений формы

jQuery(function($) {
  $('#mainForm').on('submit', function(event) {
    event.preventDefault()
    // Do whatever you want to happen when the form "submits" here, such as your ajax request
    // in the current context "this" refers to the form html object, not the jquery object
    console.info('Running submit action. Form data:', $(this).serialize())
  }).on('change', function(event){
    // trigger a submit anytime something in the form sends a 'change' action. 
    //You could also filter this to specific items in the form if you wanted
    console.warn('form changed')
    // use jquery to trigger the submit event
    // in the current context "this" refers to the form html object, not the jquery object
    // note that if you do `this.submit()` the form will submit and the submit handler won't be called
    $(this).trigger('submit')
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="https://postman-echo.com/get" id="mainForm">
  <label><input type="radio" name="radioChoice" value="a"/>a</label>
  <label><input type="radio" name="radioChoice" value="b"/>b</label>
</form>

Обратите внимание, что форма вызывает событие отправки при изменении значения переключателей, но не загружает новую страницу. Чтобы увидеть разницу, попробуйте отредактировать фрагмент так, чтобы вместо вызова submit с запросом вы вместо этого вызывали .submit() для объекта формы DOM (вызов this.submit() в обработчике изменений). Вызов submit для объекта DOM обходит обработчики событий jQuery.

Запуск события submit для каждого изменения работает нормально, если в вашей форме есть только радиокнопки, но если у вас есть поля, которые могут изменяться очень быстро ( как текстовые вводы), вы, вероятно, не хотите запускать так много событий, поэтому вы можете использовать что-то , чтобы отменить или ограничить действие отправки.

Answer 2

Я нашел обходной путь для этого парня. Мне удалось добавить событие onclick, которое запускает нажатие на кнопку, которая заставляет все работать. Тем не менее, есть причина, почему отправка формы через поля была невозможна, и если я ее найду, я опубликую здесь.