控制台中没有错误,但AJAX调用似乎不起作用

时间:2019-03-26 作者:Jaimee Page

尝试使用动态过滤器,该过滤器将通过单击按钮按自定义分类法过滤自定义帖子类型。是得到了一个错误的ajax\\u url是未定义的,但我想我已经解决了这一部分。。。然而,我现在剩下的东西仍然不起作用,但没有错误!我希望所有产品在默认情况下显示,然后按应用程序和分析器对其进行过滤functions.php 文件:

    function ajax_filter_tests_scripts() {
    wp_enqueue_script( \'ajax_filter_tests\', get_stylesheet_directory_uri(). \'/src/js/components/_filter.js\', array(), \'1.0\', true  );
    wp_localize_script(\'ajax_filter_tests\', \'ajax_url\', admin_url(\'admin-ajax.php\') );
}

function ajax_filter_tests_shortcode() {
    ajax_filter_tests_scripts();
    ob_start(); ?>
    <a href="#"><i class="fas fa-th"></i> All Products</a>
    <?php
        global $post;
        $applications = wp_get_post_terms( $post->ID, \'applications\' );
        $thisAnalyser = get_field(\'select_analyser_for_test_filter\');
        foreach ( $applications as $application):
            $tests = new WP_Query(
                array(
                    \'post_type\' => \'tests\',
                    \'tax_query\' => array(
                        array(
                            \'taxonomy\' => \'applications\',
                            \'terms\' => array($application->slug),
                            \'field\' => \'slug\'
                        ),
                    ),
                )
            );
     ?>
     <a href="#"><?php echo $application->name; ?></a>
     <?php
        $tests = null;
        wp_reset_postdata();
    endforeach;
    ?>
    <?php
    return ob_get_clean();
}

add_shortcode(\'ajax_filter_tests\', \'ajax_filter_tests_shortcode\');

//Ajax Callback

add_action(\'wp_ajax_ajax_filter_tests\', \'ajax_filter_tests_callback\');
add_action(\'wp_ajax_nopriv_ajax_filter_tests\', \'ajax_filter_tests_callback\');

function ajax_filter_tests_callback() {

    header("Content-Type: application/json");

    $thisAnalyser = get_field(\'select_analyser_for_test_filter\');
    $tax_query = array(\'relation\' => \'AND\');

    if(isset($_GET[\'application\'])) {
        $application = sanitize_text_field( $_GET[\'application\'] );
        $tax_query[] = array(
            \'taxonomy\' => \'applications\',
            \'field\' => \'slug\',
            \'terms\' => $application
        );
    }

    if(isset($thisAnalyser)) {
        $analyser = $thisAnalyser;
        $tax_query[] = array(
            \'taxonomy\' => \'analyser\',
            \'field\' => \'slug\',
            \'terms\' => $analyser
        );
    }

    $args = array(
        \'post_type\' => \'tests\',
        \'posts_per_page\' => -1,
        \'tax_query\' => $tax_query
    );

    $test_query = new WP_Query( $args );

    if( $test_query->have_posts() ) {
        $result = array();

        while ( $test_query->have_posts() ) {
            $test_query->the_post();

            $result[] = array(
                "id" => get_the_ID(),
                "title" => get_field(\'test_title\'),
                "subtitle" => get_field(\'test_subtitle\'),
                "image" => get_field(\'test_image\'),
                "permalink" => the_permalink()
            );
        }
        wp_reset_query();

        echo json_encode($result);

    }
    wp_die();

}
在我的_filter.js 文件:

    $ = jQuery;

var aft = $("#ajax-filter-tests");
var aftLinks = aft.find(\'a\');

aftLinks.click(function(e) {
    e.preventDefault();

    var application = $(e.target).text();
    var application_slug = application.replace(/\\s+/g, \'_\').toLowerCase();
    console.log(application_slug);

    var data = {
        action : "ajax_filter_tests",
        application : application_slug
    }

    $.ajax({
        url : ajax_url,
        data : data,
        success : function(response) {
            aft.find(\'#filterResults\').empty();
            if(response) {
                for(var i = 0; i < response.length; i++) {
                    var html = "<div class=\'test-filters__results__holder\'>";
                        html += "   <div class=\'test__holder__image\'>";
                        html += "       <img src=\'" + response[i].image + "\' alt=\'" + response[i].title + "\' />";
                        html += "   </div>";
                        html += "   <div class=\'test__holder__text\'>";
                        html += "       <h4>" + response[i].title + "</h4>";
                        html += "       <h5>" + response[i].subtitle + "</h5>";
                        html += "       <a href=\'" + response[i].permalink + "\'>Learn More</a>";
                        html += "   </div>";
                        html += "</div>";
                    aft.find(\'.test-filters__results .row\').append(html);
                }
            } else {
                var html = "<div>Sorry, there are no suitable tests here.</div>";
                aft.find(\'#filterResults\').append(html);
            }
        }
    });
});
如果我没有解释我实际上想做得很好,这里有一张成品的图片

enter image description here

1 个回复
SO网友:MikeNGarrett

我无法测试所有内容,因为对某些标记和功能有一些依赖关系,但以下是我目前发现的内容。

将脚本包装为以下内容,而不是$ = jQuery;. 这是a better way to handle possible conflicts.

(function($){
    // your code here
})(jQuery);
虽然您将脚本排队的方式很有效,但最好提前注册它们并将它们排队到短代码中。您还需要将jQuery设置为的依赖项ajax_filter_tests. 类似这样:

function ajax_filter_tests_scripts() {
    wp_register_script( \'ajax_filter_tests\', get_stylesheet_directory_uri() . \'/src/js/components/_filter.js\', array(\'jquery\'), \'1.0\', true );
    wp_localize_script( \'ajax_filter_tests\', \'ajax_url\', admin_url( \'admin-ajax.php\' ) );
}
add_action(\'wp_enqueue_scripts\', \'ajax_filter_tests_scripts\');

function ajax_filter_tests_shortcode() {
    wp_enqueue_script( \'ajax_filter_tests\' );
    // ...the rest of your code
}
您还需要检查以确保您正在呼叫$.ajax 根据您使用的jQuery版本正确。从文档中:

弃用通知:jqXHR。success(),jqXHR。error()和jqXHR。从jQuery 3.0开始,complete()回调被删除。您可以使用jqXHR。done(),jqXHR。fail()和jqXHR。而是始终()。

var jqxhr = $.ajax({
    url : ajax_url,
    data : data
}).done(function() {
    alert( "success" );
}).fail(function() {
    alert( "error" );
}).always(function() {
    alert( "complete" );
});
这将确保您的脚本始终处于启动状态,无论ajax响应是什么。这里可能还有其他问题,例如使用the_permalink() 而不是get_permalink(), 但这会给你一个好的开始。

最后,问题可能是php而不是javascript。确保打开“调试”并进行检查,以确保其余代码没有出现错误。

相关推荐

“POSTS_WHERE”筛选器未在`wp_ajax`中应用“WP_Query”

我有一个函数,它添加了posts_join 和aposts_where 在中搜索WP_Query. 它在普通的php呈现的搜索页面上运行良好。然而,我也将其用于ajax产品搜索和其他posts_join 和aposts_where 似乎不适用。以下是连接和位置:function search_by_meta_join($join) { global $wpdb; if (is_search()) { $join .= \" LEFT JOI