隐藏'显示更多'使用AJAX的按钮

时间:2015-06-17 08:24:34

标签: javascript php jquery ajax wordpress

我有按钮"显示更多"在我的WP网站上。默认情况下会显示2个帖子,点击此按钮会显示其他2个帖子。所以我需要检查页面加载,如果有超过2个帖子。它没有,按钮隐藏。我为此使用AJAX。但我的代码不起作用。

的functions.php

function buttonHide() {
   $posts_count = wp_count_posts()->publish;
   if ($posts_count <= 2) {
    echo '<script>function hideLoadMore(){$("#load-post").hide();}</script>';
     }
     // Reset Query
    wp_reset_query();

    die();
}

add_action('wp_ajax_buttonHide', 'buttonHide');
add_action('wp_ajax_nopriv_buttonHide', 'buttonHide');

load.js

$(function() {

        checkLoadButton();

        function checkLoadButton() {
            $.ajax({
                url: "/wp-admin/admin-ajax.php",


                data: ({               
                     action: 'buttonHide'
                }),
                type: "GET",
                success: function() {
                    if (hideLoadMore) {
                        hideLoadMore(); //function from functions.php
                    }
                }
            });
        }
    });

2 个答案:

答案 0 :(得分:1)

检查

的functions.php

function buttonHide() {
   $posts_count = wp_count_posts()->publish;
   if ($posts_count <= 2) {


      $result['type'] = "success";
       $result['status'] = 'hide'  ;
       $result = json_encode($result);
        echo $result;
        die();
     }else{

        $result['type'] = "success";
        $result['status'] = 'show'  ;
        $result = json_encode($result);
        echo $result;
        die();
     }


    die();
}

add_action('wp_ajax_buttonHide', 'buttonHide');
add_action('wp_ajax_nopriv_buttonHide', 'buttonHide');


add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {

   wp_localize_script( 'more_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'more_script' );

}

load.js

 function checkLoadButton() {
             jQuery.ajax({


            type : "post",
            dataType : "json",
            url : myAjax.ajaxurl,
            data : {action: "buttonHide"},


             success: function(response) {
            if(response.type == "success") {


                if(response.status=="hide"){
                    jQuery("#load-post").hide();
                }else if(response.status=="show"){
                    jQuery("#load-post").show();
                }

            }
            else {
               alert("Error")
            }
         }
            });
        }

$(function() {
        checkLoadButton();

    });

答案 1 :(得分:0)

您的变量 hideLoadMore 确实没有定义。

如果您希望此变量是对Ajax的响应,则应更正回调函数:

$(function() {
    checkLoadButton();

    function checkLoadButton() {
        $.ajax({
            url: "/wp-admin/admin-ajax.php",
            data: ({               
                 action: 'buttonHide'
            }),
            type: "GET",
            success: function(response) {
                if (response) {
                    hideLoadMore(); //function from functions.php
                }
            }
        });
    }
});

如果你想获得一个函数作为结果,你必须在你的AJAX中使用JSONP作为 accept: -option