[英]Infinite scroll within Ajax
So, I have Ajax enabled on my Wordpress site as the following: 所以,我在我的Wordpress网站上启用了Ajax,如下所示:
id
within any anchor within the chosen div will be saved and used to find an appropriate php file then loaded at an appropriate content div. 将保存所选div中任何锚点内的
id
并用于查找适当的php文件,然后在适当的内容div中加载。
PHP 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 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 01_front_menu_front_id.php
<div class="content">
<?php echo do_shortcode('[Post_Shortcode]'); ?>
</div>
So far so good... 到现在为止还挺好...
So, with the following setup, everything is working fine. 因此,通过以下设置,一切正常。 All the contents are called only when clicked etc. GREAT!
只有在点击等时才会调用所有内容。太棒了!
However, I am trying to add one more feature: Infinite scroll 但是,我正在尝试添加一个功能: 无限滚动
What I have done so far: 到目前为止我做了什么:
I followed the following instruction: http://wptheming.com/2012/03/infinite-scroll-to-wordpress-theme/ 我按照以下说明操作: http : //wptheming.com/2012/03/infinite-scroll-to-wordpress-theme/
So, I tried this on a separate dummy site to see how it works before messing things up. 所以,我在一个单独的虚拟网站上尝试了这个,看看它在搞乱之前是如何工作的。
SET UP 设定
Add the following to the function.php
: 将以下内容添加到
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 );
When I tried this on a dummy site (without Ajax), it works fine. 当我在虚拟站点(没有Ajax)上尝试这个时,它工作正常。 I can get the next page content as
infinite scroll
. 我可以将下一页内容视为
infinite scroll
。
The "Normal"
URL from the dummy site is this: 虚拟站点的
"Normal"
URL是这样的:
<a class="page-numbers" href="http://example.com/page/2/">2</a>
Problem 问题
So, with the Ajax page, I found something peculiar. 所以,通过Ajax页面,我发现了一些奇特的东西。 The page URL became somewhat odd:
页面网址变得有点奇怪:
<a class="page-numbers" href="http://example.com/wp-admin/admin-ajax.phppage/2/?action=royal_front_tab&id=front_all_id">2</a>
Because it is not a normal
URL, it leads to a "404" page as it does not exist. 因为它不是
normal
URL,所以它会导致“404”页面,因为它不存在。
Here is my guess 这是我的猜测
I thought that jQuery('.royal_front_menu a').click(function(e) {
which any anchor within royal_front_menu
div will be affected. But the content is loaded outside of the div. 我认为
jQuery('.royal_front_menu a').click(function(e) {
其中royal_front_menu
div中的任何锚点都会受到影响。但是内容是在div之外加载的。
Okay, I am confused to why it is happening. 好吧,我很困惑为什么会这样。
Any suggestions? 有什么建议么?
对我来说似乎没有添加/在admin-ajax.php之后,如果你尝试进入下面的链接它会给你一个有效的页面吗?
<a class="page-numbers" href="http://example.com/wp-admin/admin-ajax.php/page/2/?action=royal_front_tab&id=front_all_id">2</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.