Hello everyone, my sister has recently encountered a problem with the infinite-scroll plug-in. When the scroll reaches the second session, the ajax in the append will fail. Referring to the official documents, we have not found any available resources. I would like to share your opinions with you.
The structure of noodles is as follows: the noodles from append will be wrapped with
, and page2 has a set of ul li produced by ajax.
<div class="article-feed" data-infinite-scroll="{ "path": ".pagination__next", "append": ".article", "status": ".scroller-status", "hideNav": ".pagination" }">
<article class="article">
//page1
</article>
<article class="article">
//page2(append)
<ul class="latesNews"></ul>
</article>
</div>
The code of ajax is as follows: even if some data is printed from json, it can be easily printed in other fields, but console can also avoid errors due to the effect of face recognition in infinite-scroll append.
$.ajax({
url: "http://xxxxx/api/aall.json",
dataType:"json",
type: "GET",
data: "data",
cache: false,
ifModified: true,
success: function getData(data){
// console.log(data.ClassItem.NewsItems);
var str = "";
var List = $(".latesNews");
for(var i=0; i<10;iPP){
// var kindName = data.NewsItems[i].kindName;
var title = data.ClassItem.NewsItems[i].HeadLine;
var url = data.NewsItems[i].url;
var time = data.ClassItem.NewsItems[i].UpdateTime.substring(10);
if(title.length>25){
title = title.substring(0,25)+"...";
}
str += "<li><a href=""
+ url +"" target="_blank"><div><span class="time">"
+ time +"</span></div><div class="title">"
+ title +"</div></a></li>"
}
List.html(str);
},
error: function(result){ console.log("error"); }
});
Code of infinite-scroll: infinite-scroll also works normally, and includes some function in append.infiniteScroll
(officially recommended), but the younger sister wraps the whole string of ajax codes, but it still doesn"t work.
$(".article-feed").infiniteScroll({
// options
path: ".pagination__next",
append: ".post",
history: false,
});
$(".article-feed").on("append.infiniteScroll",function(){
videoResize();
youtubeFun();
SideBoxFun();
});
Please go ahead and give us some advice. Thank you!