Question

所以，我在我的Wordpress网站上启用了Ajax，如下所示：

所选div中任何锚点内的

id将被保存并用于查找适当的php文件，然后加载到适当的内容div。

PHP

<!--Menu part -->
 <div class="royal_front_menu">
      <a href="#rcp_front_front_id" class="mdl-tabs__tab is-active" id="front_id">All</a>       
      <a href="#rcp_front_electronic_id" class="mdl-tabs__tab" id="electronic_id">Electronics</a>         
</div>

<!--Content Part-->
<div class="active" id="rcp_front_front_id">  
     <div class="spinner"></div>
</div>
<div class="not_active" style="display:none;" id="rcp_front_electronic_id"> 
     <div class="spinner"></div> 
</div>      


<script>
//Ajax loading
jQuery(document).ready(function() {
    jQuery('.royal_front_menu a').click(function(e) {
        e.preventDefault();

        var tab_id = jQuery(this).attr('id'); 

        jQuery.ajax({
            type: "GET",
            url: "<?php echo admin_url('admin-ajax.php'); ?>", 
            dataType: 'html',
            data: ({ action: 'royal_front_tab', id: tab_id}),
            success: function(data){
                  jQuery('#rcp_front_' + tab_id).html(data);


        },
        error: function(data)  
        {  
        alert("Error!");
        return false;
        }  

        }); 

 }); 
 });
</script>

FUNCTION.PHP

//Ajax call for front page for Mobile
function royal_front_tab_rhm_callback() {  
     $template_part_path = 'page-parts/rhm/front/01_front_menu_' .  $_GET['id'];
get_template_part($template_part_path);
exit;
}
 add_action('wp_ajax_royal_front_tab_rhm', 'royal_front_tab_rhm_callback');
 add_action('wp_ajax_nopriv_royal_front_tab_rhm', 'royal_front_tab_rhm_callback');

01_front_menu_front_id.php

<div class="content">
    <?php echo do_shortcode('[Post_Shortcode]'); ?> 
</div>

到目前为止一直很好......

因此，通过以下设置，一切正常。只有在点击等时才会调用所有内容。很棒！

但是，我正在尝试添加一项功能：无限滚动

到目前为止我做了什么：

我按照以下说明操作：http://wptheming.com/2012/03/infinite-scroll-to-wordpress-theme/

所以，我在一个单独的虚拟网站上尝试了这个，看看它在搞乱之前是如何工作的。

设置

将以下内容添加到function.php：

// To add infinitescroll js
function custom_theme_js(){
    wp_register_script( 'infinite_scroll',  get_template_directory_uri() . '/custom_js/jquery.infinitescroll.min.js', array('jquery'),null,false );
    wp_enqueue_script('infinite_scroll');

}
add_action('wp_enqueue_scripts', 'custom_theme_js');

//To add selectors
function custom_infinite_scroll_js() {
    { ?>
    <script>
    jQuery('.royal_card.site-row-fluid.site-grid-list').infinitescroll({
        navSelector  : jQuery('.site-pagination'),
        nextSelector : jQuery('.site-pagination > a.next'),
        itemSelector :  '.royal_card.site-row-fluid.site-grid-list > .royal_card_outer.royal_card_content_grid',
        contentSelector: jQuery('.royal_card.site-row-fluid.site-grid-list'),
    msgText: "Yay"  
    },function(newElements){
        jQuery('.site-separator').remove();
        jQuery('.royal_card.site-row-fluid.site-grid-list > .royal_card_outer.royal_card_content_grid').after('');
     });
    </script>
    <?php
     }
 }
add_action( 'wp_footer', 'custom_infinite_scroll_js',100 );

当我在虚拟站点（没有Ajax）上尝试此操作时，它可以正常工作。我可以将下一页内容设为infinite scroll。

虚拟网站的"Normal"网址为：

 <a class="page-numbers" href="http://example.com/page/2/">2</a>

问题

所以，通过Ajax页面，我发现了一些奇特的东西。页面网址变得有点奇怪：

 <a class="page-numbers" href="http://example.com/wp-admin/admin-ajax.phppage/2/?action=royal_front_tab&amp;id=front_all_id">2</a>

因为它不是normal网址，所以它会导致“404”页面，因为它不存在。

这是我的猜测

我认为jQuery('.royal_front_menu a').click(function(e) { div中的任何锚点royal_front_menu都会受到影响。但内容是在div之外加载的。

好吧，我很困惑为什么会这样。

有什么建议吗？

Answer 1

对我而言似乎并没有在admin-ajax.php之后添加/，如果您尝试转到下面的链接，它会给您一个有效的页面吗？

<a class="page-numbers" href="http://example.com/wp-admin/admin-ajax.php/page/2/?action=royal_front_tab&amp;id=front_all_id">2</a>

Ajax中的无限滚动

1 个答案: