Issue in infinite-scroll plugin. WordPress
- REFUNDED
Hi,
I am using Infinite scroll plugin from - https://infinite-scroll.com. The main objective is to fire multiple queries to load data in three column simultaneously on scroll.
Link to the web page is : https://www.scrabbl.com/
I have written three similar function to load data in three column. The issue is data is loaded in just two column on scroll.
If the call sequence of the function is changed in document.ready function then, any two is called. Third function is either not called/ or data is not appended.
Note : There is no console error.
// Inside document.ready function .
$(document).ready(function() {
setTopViewedArticlesScroll(); // To load articles in second column
setArticlesScroll(); // To load articles in first column
setTopRatedArticlesScroll(); // To load articles in third column
});
// Definition of first function
function setArticlesScroll() {
var $container = $( '#first-column').infiniteScroll({
path: getPenPath,
append: false,
responseType: 'text',
checkLastPage: true
});
$container.on( 'load.infiniteScroll', function( event, jsonResp ) {
// code to append data in first-column
});
}
// Definition of second Function
function setTopViewedArticlesScroll() {
var $container_view = $( '#second-column').infiniteScroll({
path: getPenPathView,
append: false,
responseType: 'text',
});
$container_view.on( 'load.infiniteScroll', function( event, jsonResp ) {
// code to append data in second-column
});
}
// Definition of third function
function setTopRatedArticlesScroll(){
var $container_rate = $( '#third-column').infiniteScroll({
path: getTopRatedPath,
append: false,
responseType: 'text',
}); // End of container
$container_rate.on( 'load.infiniteScroll', function( event, jsonResp ) {
// code to append data in third-column
});
}
Answers (3)
Rempty answers:
Hello
can you try executing the 3 infinite scroll functions after all the first posts are loaded?
User179434 comments:
Hi
The post in the first column has to be loaded with scroll. If I load all the data in first column at once, that do not go well with my objective of scroll pagination.
On page load 2 articles are loaded in first column, 1 each in second and third. On scroll more data is loaded in first(2 post each scroll), second (1 post)and third (1 post) respectively.
Note : Before it was 12 posts were load on one load now I have changed to 2
Link to the web page is : https://www.scrabbl.com/
Dario Ferrer answers:
1) You're calling JQuery twice, and two different versions
<script type="text/javascript"
src="/scripts/jquery-1.5.1.min.js"></script>
and
<script type="text/javascript" src="/scripts/cms/jquery-1.11.0.min.js"></script>
Try to remove the older one (1.5.1)
2) On my end, seems to exist a conflict with the script googletagmanager. Disable it as a test.
User179434 comments:
I have removed the <script type="text/javascript" src="/scripts/jquery-1.5.1.min.js"></script>
committed the codes of googletagmanager.
The issue still persists.
User179434 comments:
sorry removed the codes of googletagmanager.
Link : https://www.scrabbl.com/
Dario Ferrer comments:
Well done, what you did will give us now the chance to keep searching the error with more accuracy:
Replace:
var articles = eval('(' + jsonResp + ')');
to
var articles = JSON.parse(xml);
After this press Control + F5 instead a simple F5 in your browser.
(Control + F5 makes a request directly from the server, so the cached files will be cleaned and restored)
Dario Ferrer comments:
Sorry the typo, replace with:
var articles = JSON.parse( jsonResp );
User179434 comments:
I have already tried JSON.parse(jsonResp)
It doesn't make much impact. I will make the changes in the code for you to review.
Dario Ferrer comments:
"I have already tried JSON.parse(jsonResp)"
Excellent. Dont't worry, these thing are solved little by little.
So far you are cleaning the path to find the real error. In the process you have been solved 2 errors (the duplicated jquery and the eval() function). Now I think we can see the problem.
You have some script givin the wrong url repeately:
var url = "http://localhost:8888/CMSUtils.action? [...]
Find the source of this error, change http://localhost:8888 for https://www.scrabbl.com and possibly your problem will be solved.
User179434 comments:
View the code now
User179434 comments:
That was the my mistake while deploying the code in live. You can review the code now.
Dario Ferrer comments:
Well done my friend! The page looks fine now.
Another thing I noted was that the values of the URL parameters (DOM generated) lastArticle, lastArticleTopViewed and lastArticleTopRated are are showing as "undefined". This is an error or you did it intentionally?
User179434 comments:
I did it. When DOM is generated I am loading articles in three section.
Dario Ferrer comments:
Perfect.
Cesar Contreras answers:
I have reviewed your code and it looks good,
Make sure your identifiers match