理念:加载阿贾克斯的一个div内容随即被无限滚动加载相同的分区中的接下来
页面内容
Idea: Load the a div content by ajax then load the next
page content within the same div by infinite scroll.
1。加载通过AJAX:
的想法是, #dhvc_id
单击第一次加载页面时,那么 ID
是考虑到function.php其定位相应的文件,然后分析它在同一个分区。
Idea is that #dhvc_id
is clicked when the page is first loaded, then the id
is given to the function.php which locates the appropriate file then parse it on the same 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]'); ?>
所以,这本身只是正常(阿贾克斯正常工作)。
So, This itself works just fine (Ajax works fine).
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加载。
This works just fine as well, only when the content is not initially loaded by the 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加载)&LT; - 我试图实现,但分页的URL(检查元素)进行修改
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加载,链接变得有些古怪,它现在包含可湿性粉剂管理员/管理员,ajax.phppage
在URL中,不存在和无限滚动找不到了。
As you can see, when the content is loaded by ajax, the url becomes somewhat odd, and it now contains "wp-admin/admin-ajax.phppage"
in the url, which does not exist and the infinite scroll cannot find it.
所以,当我检查元素督察,我得到了以下修改
脚本。
So, when I checked the element inspector, I got the following "modified"
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: "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;
}
});
});
});
这是怎么回事?我怎样才能使它工作?
What is happening? How can I make it work?
你见过此链接:http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/
另外,你需要用AJAX做呢?你可以使用jQuery而不是..如果是这样..这里有5个样本,它在jQuery的工作 http://www.sitepoint.com/jquery-infinite-scrolling-demos/
Also, do you need to do it with AJAX? Can you use Jquery instead.. if so.. here are 5 samples of it working in Jquery http://www.sitepoint.com/jquery-infinite-scrolling-demos/