想法:通过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。通过无限滚动加载下一个内容:
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/
<href设置:<a href="http://sevek.staging.wpengine.com/dhvc_working-demo/page/2/">2</a>
场景2:Ajax加载和无限滚动(内容均由ajax加载)
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&id=dhvc_id">2</a>
如您所见,当内容由ajax加载时,URL变得有些奇怪,并且现在URL中包含"wp-admin/admin-ajax.phppage"
,该URL不存在并且无限滚动找不到它。因此,当我检查元素检查器时,得到了以下
"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; } }); }); });
发生了什么事?如何使它工作?想法:通过ajax加载div内容,然后通过无限滚动加载同一div中的下一页内容。 1.通过ajax加载它:想法是在第一次加载页面时单击#dhvc_id,...