I have news-list with 5 news on the screen and when user clicks on Load more button - i need to load 5 more news etc. I have id of the next page gotten from back-end (ex. 2).
But when i click on the button Load more i got an error - lazyload is not defined (…). How to fix this? And i'm not sure about var url = "./" + {{$nextPage}};
Any help is appreciated. Thanks
<a id="button-more" class="button button--blue load-more" onClick="lazyload.load()"> -> here its an error
var lazyload = lazyload || {};
(function($, lazyload){
var buttonId = "#buttonId",
loadingId = "#loading-div",
newsContainer = ".news-list__list";
lazyload.load = function() {
var url = "./" + {{$nextPage}};
$(buttonId).hide();
$(loadingId).show();
$.ajax({
url: url,
success: function(response) {
if(!response || response.trim() == "NONE") {
$(buttonId).fadeOut();
$(loadingId).text("No more news to load!");
return;
}
appendContests(response);
},
error: function(response) {
$(loadingId).text("Sorry, there was some error with the request. Please refresh the page");
}
});
};
var appendContests = function(response) {
$(buttonId).show();
$(loadingId).hide();
$(response).appendTo($(newsContainer));
};
})(jQuery, lazyload);