为什么我的Wordpress Ajax功能不能在移动设备上使用?

时间:2019-02-28 11:05:20

标签: php jquery ajax wordpress

我有一个20i托管的Wordpress网站。我几乎可以肯定一切正常,直到我指向了一条记录以使该网站脱离其测试域并进入实际的域为止,这可能无关紧要,但我认为我会以防万一。无论如何,由于某种原因,我的Ajax函数在台式机上可以正常运行,但在移动设备上却无法正常运行。当我在移动设备上查看时,所有帖子均不可见,如果选择过滤器,则什么也不会发生。有谁知道这可能是什么?我一直在寻找答案,但似乎找不到解决方法。

这是我的代码;

jQuery

// submit form function
jQuery('#form').on('submit', function(e){
    e.preventDefault();

    var $ = jQuery; 
    var filter = $('#form');
    var form_data = $('#form').serializeArray();
    $('#load_more').data('page', 1);

    $.ajax({
        url: ajax_url,
        type: 'post',
        data: form_data,
        dataType: 'json',
        error : function(response){
            console.log(response);
        },
        success : function(response){
            $('#loop').empty();

            for( var i = 0; i < response.post_cont.length; i++ ){
                var html =''+
                    '<div class="col-12 col-md-4 column">'+
                        '<a href="'+ response.post_cont[i].permalink +'">'+
                            '<div class="card" style="width: 100%;">'+
                                '<div class="post_image" style="background-image: url('+ response.post_cont[i].image +');"></div>'+

                                '<div class="card-body">'+
                                    '<h5 class="card-title">'+ response.post_cont[i].title +'</h5>'+
                                '</div>'+
                            '</div>'+
                        '</a>'+
                    '</div>';

                $('#loop').append(html);
            }
        }
    });
});

php AJAX功能

<?php
    add_action('wp_ajax_nopriv_filter', 'filter');
    add_action('wp_ajax_filter', 'filter');

    // this function runs after it is called inside our_work_ajax.js
    function filter(){

        if( $_POST['type'] && !empty($_POST['type']) ){
            $category = $_POST['type'];
        }else{ 
            $category = array( 'Assisted Needs/Residential', 'Commercial/Educational', 'Private Housing', 'Social-Housing' );
        }

        $args = array(
            'post_type'         => 'our_work',
            'posts_per_page'    => 9,
            'orderby'           => 'date',
            'tax_query'         => array(
                array(
                    'taxonomy'      => 'category',
                    'field'         => 'slug',
                    'terms'         => $category
                )
            )
        );

        $query = new WP_Query( $args );

        $no_of_posts = $query->found_posts;

        if( $query->have_posts() ):
            while( $query->have_posts() ): $query->the_post(); 

                $main_field = get_field('Images');
                $first_row = $main_field[0];
                $img = $first_row['Image'];
                $imgsize = $img['sizes']['large'];

                // creating an array of content needed from array
                $post_cont[] = array(
                    "permalink" => get_the_permalink(),
                    "image" =>  $imgsize,
                    "title" =>  get_the_title(),
                );
            endwhile; 
        endif;

        // array getting the total number of posts 
        $max_posts[] = array(
            "no_of_posts"   => $no_of_posts
        );
        // converting arrays into json and submitting it to the ajax_url for the .js file
        echo json_encode(array( "post_cont" => $post_cont, "max_posts" => $max_posts));
        wp_reset_postdata();
        die();
    }
?>

HTML

<form action="" method="POST" id="form">

    <div id="filters">
        <div class="option">
            <p>Assisted Needs/Residential</p>
            <input type="checkbox" name="type[]" value="Assisted Needs/Residential">
        </div>

        <div class="option">
            <p>Commercial/Educational</p>
            <input type="checkbox" name="type[]" value="Commercial/Educational">
        </div>

        <div class="option">
            <p>Private Housing</p>
            <input type="checkbox" name="type[]" value="Private Housing">
        </div>

        <div class="option">
            <p>Social Housing</p>
            <input type="checkbox" name="type[]" value="Social Housing">
        </div>
    </div>

    <input type="hidden" name="action" value="filter">
</form>

<div id="loop" class="row">

</div>

<script>
jQuery(document).ready(function($){
    var inputs = $('#form .option input');

    inputs.each(function(){
        if( $(this).is(':checked') ){
            $(this).parent().addClass('active');
        }
    });

    $('#form').submit();
});
</script> 

functions.php中的AJAX网址

wp_localize_script( 'all_js', 'ajax_url', admin_url('admin-ajax.php') );

0 个答案:

没有答案