echo custom fields with AJAX

时间:2016-09-28 作者:FRQ6692

在我的wordpress主题中,我试图打印多个custom fields 使用ajax的帖子数量。首先我得到title 正确使用ajax live搜索的帖子,现在需要在单击任何帖子标题后显示帖子数据。

之后Click 在任何title 在live search中,它会在同一页面上显示该帖子的自定义字段??

HTML:

<h2><a href="#" name="metakey" id="metakey"><?php the_title();?></a></h2>
<div id="viewspec"> Meta key result here </div>

Funtion:

<?php
add_action(\'wp_ajax_data_fetchmeta\' , \'data_fetchmeta\');
add_action(\'wp_ajax_nopriv_data_fetchmeta\',\'data_fetchmeta\');
function data_fetchmeta(){

$the_query = new WP_Query( array( \'s\' => esc_attr( $_POST[\'metakey\'] ), \'post_type\' => \'post\' ) );
if( $the_query->have_posts() ) :
    while( $the_query->have_posts() ): $the_query->the_post(); ?>       
<p>
    <?php echo get_post_meta( get_the_ID(), \'brand\', true );?>
    <?php echo get_post_meta( get_the_ID(), \'price\', true );?>
    <?php echo get_post_meta( get_the_ID(), \'cpu\', true );?>
    <?php echo get_post_meta( get_the_ID(), \'ram\', true );?>
</p>
  <?php endwhile;
  wp_reset_postdata();  
  endif;
  die();
}
?>

Script:

<script type="text/javascript">
function h2 a{

jQuery.ajax({
    url: \'<?php echo admin_url(\'admin-ajax.php\'); ?>\',
    type: \'post\',
    data: { action: \'data_fetchmeta\', metakey: jQuery(\'#metakey\').onclick() },
    success: function(data) {
        jQuery(\'#viewspec\').html( data );
    }
});
}
</script>

AJAX live search: working

<input type="text" name="keyword" id="keyword" onkeyup="fetch()"></input>
<div id="datafetch">  Search result here  </div>

<?php
// add the ajax fetch js
add_action( \'wp_footer\', \'ajax_fetch\' );
function ajax_fetch() {
?>
<script type="text/javascript">
function fetch(){
jQuery.ajax({
    url: \'<?php echo admin_url(\'admin-ajax.php\'); ?>\',
    type: \'post\',
    data: { action: \'data_fetch\', keyword: jQuery(\'#keyword\').val() },
    success: function(data) {
        jQuery(\'#datafetch\').html( data );
    }
});
}
</script>
<?php
}

// the ajax function
add_action(\'wp_ajax_data_fetch\' , \'data_fetch\');
add_action(\'wp_ajax_nopriv_data_fetch\',\'data_fetch\');
function data_fetch(){
if (  esc_attr( $_POST[\'keyword\'] ) == null ) { die(); }
$the_query = new WP_Query( array( \'posts_per_page\' => -1, \'s\' => esc_attr(     $_POST[\'keyword\'] ), \'post_type\' => \'post\' ) );
if( $the_query->have_posts() ) :
    while( $the_query->have_posts() ): $the_query->the_post(); ?>

        <h2><a href="#" name="metakey" id="metakey"><?php the_title();?></a> </h2>

    <?php endwhile;
    wp_reset_postdata();  
    endif;
    die();
    }

3 个回复
最合适的回答,由SO网友:mlimon 整理而成

我不知道你为什么用循环来显示你的帖子元。你的代码都很好,但你必须稍微改变一下。

Q. 为什么使用内联脚本?在我看来,您应该使用外部脚本文件来完成此操作

无论如何,这不是这里的主要问题。为了使用ajax的click函数生成内容。您必须以正确的方式绑定click函数,否则它将无法工作。

这里是一个例子,但我使用外部js文件来实现这一点,所以您只需注册即可。

/**
 * Add js file with Enqueues scripts.
 */
function wpse_scripts() {

    wp_enqueue_script( \'wpse-ajax-init\', get_stylesheet_directory_uri() . \'/js/wpse-ajax-init.js\', array( \'jquery\' ), \'1.0\', true );
    wp_localize_script( \'wpse-ajax-init\', \'ajaxwpse\', array(
        \'ajaxurl\' => admin_url( \'admin-ajax.php\' )
    ));

}
add_action( \'wp_enqueue_scripts\', \'wpse_scripts\' );
现在更改获取文章标题的标题标记。

// the ajax function
add_action(\'wp_ajax_data_fetch\' , \'data_fetch\');
add_action(\'wp_ajax_nopriv_data_fetch\',\'data_fetch\');
function data_fetch(){
if (  esc_attr( $_POST[\'keyword\'] ) == null ) { die(); }
$the_query = new WP_Query( array( \'posts_per_page\' => -1, \'s\' => esc_attr(     $_POST[\'keyword\'] ), \'post_type\' => \'post\' ) );
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ): $the_query->the_post(); ?>

    <h2><a href="#" name="metakey" id="<?php the_ID(); ?>"><?php the_title();?></a> </h2>

<?php endwhile;
wp_reset_postdata();  
endif;
die();
}
我在这里只是换了衣服<h2><a href="#" name="metakey" id="metakey"><?php the_title();?></a> </h2><h2><a href="#" name="metakey" id="<?php the_ID(); ?>"><?php the_title();?></a> </h2> 因为您需要动态获取标题的ID。

完成后,在您的wpse-ajax-init.js 你只需要注册和上钩admin-ajax.php.

(function ($) {
    $("#datafetch").on(\'click\', \'a\', function(e) {
        e.preventDefault();

        $(\'#keyword\').delay(100).attr(\'value\', \'\');
        $(this).delay(100).hide();

       $.ajax({
            url: ajaxwpse.ajaxurl,
            type: \'post\',
            data: { 
                action: \'data_fetchmeta\', 
                ID: $(this).attr(\'id\')
            },
            success: function(data) {
                $(\'#viewspec\').html( data );
            }
        });
    });
})(jQuery);
最终改变了你的data_fetchmeta() 像这样的函数查询

add_action(\'wp_ajax_data_fetchmeta\' , \'data_fetchmeta\');
add_action(\'wp_ajax_nopriv_data_fetchmeta\',\'data_fetchmeta\');
function data_fetchmeta(){
    $ID = esc_attr( $_POST[\'ID\'] ); ?>       
    <p>
        <?php echo get_post_meta( $ID, \'brand\', true );?>
        <?php echo get_post_meta( $ID, \'price\', true );?>
        <?php echo get_post_meta( $ID, \'cpu\', true );?>
        <?php echo get_post_meta( $ID, \'ram\', true );?>
    </p>
  <?php die();
}
你可以看到,我只是抓取了动态id并用于显示post meta。

希望这对你有意义。

SO网友:Benoti

如果用户单击链接时使用事件处理程序,则可以删除onClick事件。

a标记必须如下所示才能使用此方法(假设您的循环有$post)。

<a href="#" data-id="<?php echo $post->ID;?>" name="metakey" id="metakey"><?php echo $post->post_title;?></a>

js:

$(\'a #metakey\').on(\'click\',function(e){
    e.preventDefault();
    var post_id = e.target.dataset.id
    data = {
         action: \'data_fetchmeta\', 
         sel_action: \'show_metafield\',
         post_id: post_id,
         }
    $.post(ajaxurl, data, function(response) {
        var json = $.parseJSON(response);
        $(\'#viewspec\').html(json.metakey);
    });

});
回调函数

function data_fetchmeta(){
    if(isset($_POST[\'list_action\'])){
        $action = $_POST[\'list_action\'];
    }
    $action_params = array();
    parse_str($_POST[\'data\'], $action_params);

    switch ($action){

        case \'show_metafield\':
            ob_start(); // not necessary if you make a single string for $ result

            echo get_post_meta( $_POST[\'id\'], \'brand\', true );
            echo \'<br/>;
            echo get_post_meta( $_POST[\'id\'], \'price\', true );
            echo \'<br/>;
            echo get_post_meta( $_POST[\'id\'], \'cpu\', true );
            echo \'<br/>;
            echo get_post_meta( $_POST[\'id\'], \'ram\', true );

            $result = ob_get_clean();
           echo json_encode(array(
                    \'metakey\'  =>$result
                )
            );


            exit();
        break;
        default:
        break;

}
有很多方法可以做到这一点,我希望这一个可以帮助你。

SO网友:scott

单击搜索结果时,您似乎没有捕获事件。每个搜索结果的代码如下:

<a href="#" name="metakey" id="metakey">Sony Lite</a>

我想补充一下onclick=\'getPostMeta()\' 或者类似的。您可能需要传递一些数据,以便函数知道要查找哪些数据。

在新函数中,放置jQuery。ajax函数。这应该可以让您开始将数据获取到页面的元键部分。

相关推荐

浏览器刷新时删除数据库条目,AJAX PHP jQuery

我有一个表单,在通过ajax提交表单时更新数据库表中的列。一切都很好,数据库表列可以获取信息,但一旦刷新浏览器,信息就会从数据库中删除。如果meta\\u值不存在,但meta\\u值也在提交表单时创建的数据库中,则PHP将执行数据库更新。我希望信息保留在数据库中,直到或除非meta\\u值被删除或不存在。任何见解都将不胜感激。PHPadd_action(\'wp_ajax_hide_this\', \'hide_this_by_id\'); add_action(\'wp_ajax_nopriv_