Question

所以，我有一个由ajax加载的内容。当它被加载，然后＆＃34;下一个＆＃34;页面href修改如下：

正常href：未加载Ajax

未被ajax 加载的分页符合href设置：

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

href已修改：内容由ajax加载

由ajax 加载的分页符合href设置：

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

摘要

工作（好）：

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

不工作（差）：

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

由于没有＆＃34; bad＆＃34; href，我得到404.

所以我的问题是，为什么在ajax加载内容时会发生这种情况？另外，有没有解决这个问题？或jQuery＆＃34; hack＆＃34;还原它？

谢谢！

//////////////////////////////////////////// /////////

编辑：完整代码

创意：通过ajax加载div内容，然后通过无限滚动在同一div中加载next页面内容。

步骤1.通过ajax加载：

想法是在首次加载页面时单击#dhvc_id，然后将id提供给function.php，该函数找到相应的文件，然后在同一个div上解析它。

demo.php

<?php
/**
* Template Name: Demo
*/

get_header(); ?>

<div id="primary" class="content-area">
    <div id="content" class="site-content" role="main">
        <div class="dhvc_demo" id="dhvc_id"></div>              
    </div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

<script>

 //To trigger initial click
 jQuery(window).load(function() { 
    jQuery("#dhvc_id" ).trigger( 'click' );  
    return false;       
    }); 
 //Ajax loading
 jQuery(document).ready(function() {
    jQuery('#dhvc_id').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('.dhvc_demo').html(data);


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

        }); 

 }); 
 }); 

</script>

Function.php

//Ajax call for front page
function royal_front_tab_callback() {  
$template_part_path = 'page-parts/01_home_' . $_GET['id'];
get_template_part($template_part_path);
exit;
}
add_action('wp_ajax_royal_front_tab', 'royal_front_tab_callback');
add_action('wp_ajax_nopriv_royal_front_tab', 'royal_front_tab_callback');

01_home_dhvc_id.php

<?php echo do_shortcode('[some_shortcode]'); ?>

所以，这本身就可以正常工作（Ajax工作正常）。

步骤2.通过无限滚动加载下一个内容：

我按照此处的说明进行操作：http://wptheming.com/2012/03/infinite-scroll-to-wordpress-theme/

Function.php

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');

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

这也很好，只有当内容最初没有被ajax加载时。

这就是我的意思：

场景1：无限滚动（内容未由ajax加载）：正常工作

请参阅http://sevek.staging.wpengine.com/dhvc_working-demo/

上的工作示例

未被ajax 加载的分页符合href设置：

<a href="http://sevek.staging.wpengine.com/dhvc_working-demo/page/2/">2</a>

场景2：Ajax加载和无限滚动（内容由ajax加载）＆lt; - 这是我想要实现的但是分页的href（inspect元素）被修改

您可以看到http://sevek.staging.wpengine.com/dhvc-test/中的示例，并检查页面底部的元素，其中应该存在分页。

由ajax 加载的分页符合href设置：

<a href="http://sevek.staging.wpengine.com/wp-admin/admin-ajax.phppage/2/?action=royal_front_tab&amp;id=dhvc_id">2</a>

正如你所看到的，当内容由ajax加载时，href变得有点奇怪，现在它在href中包含"wp-admin/admin-ajax.phppage"，它不存在，无限滚动找不到它。

因此，当我检查元素检查器时，我得到了以下"modified"脚本。

修改后的脚本

 //To trigger initial click
 jQuery(window).load(function() { 
    jQuery("#dhvc_id" ).trigger( 'click' );  
    return false;       
    }); 
 //Ajax loading
 jQuery(document).ready(function() {
    jQuery('#dhvc_id').click(function(e) {
        e.preventDefault();

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

        jQuery.ajax({
            type: "GET",
            url: "http://sevek.staging.wpengine.com/wp-admin/admin-ajax.php", 
            dataType: 'html',
            data: ({ action: 'royal_front_tab', id: tab_id}),
            success: function(data){
                  jQuery('.dhvc_demo').html(data);

                jQuery('.dhvc-woo-row-fluid.dhvc-woo-grid-list').infinitescroll({
                        navSelector  : jQuery('.dhvc-woo-pagination'),            
                        nextSelector : jQuery('.dhvc-woo-pagination > a.next'),    
                        itemSelector :  '.dhvc-woo-row-fluid.dhvc-woo-grid-list > .dhvc-woo-row-fluid',
                        contentSelector: jQuery('.dhvc-woo-row-fluid.dhvc-woo-grid-list'),
                        msgText: " "
                    },function(newElements){
                        jQuery('.dhvc-woo-separator').remove();
                        jQuery('.dhvc-woo-row-fluid.dhvc-woo-grid-list > .dhvc-woo-row-fluid').after('<div class="dhvc-woo-separator"></div>');
                    });
        },
        error: function(data)  
        {  
        alert("Error!");
        return false;
        }  

        }); 

 }); 
 });

对于场景2，第二页应该是＆＃34; http://sevek.staging.wpengine.com/dhvc-test/ page / 2＆＃34;，而当由ajax加载时，修改后的href中缺少/dhvc-test/。

我想也许我可以使用jquery来"hack" href回到＆＃34; normal＆＃34;。

为什么ajax加载的内容已经修改了

0 个答案: