We Keep Coding

Hide Load More button on InfiniteScroll.js when hitting last page

I'm looking to hide my "Load More" button when I'm on the last page, but it seems to be refusing to hide the button when scrolling to the last page.
I am using infinitescroll.js
I have the current script to infinite scroll X pages, then show a load more button. Though I think this is causing conflict with checking if it's the last page. I've tried numerous ways, but I can't seem to make it work with both.
I have the following script code.
<script>
let $container = $('.article-feed').infiniteScroll({
path: '.nav-next a',
append: '.card',
history: 'push',
button: '.view-more-button',
hideNav: '.pagination',
status: '.page-load-status'
});
let $viewMoreButton = $('.view-more-button');
// get Infinite Scroll instance
let infScroll = $container.data('infiniteScroll');
$container.on( 'load.infiniteScroll', onPageLoad );
$container.on( 'last.infiniteScroll', onPageLoad, function( event, body, path ) {
console.log(`Last page hit on ${path}`);
$viewMoreButton.attr("style", "display: none !important");
});
function onPageLoad() {
if ( infScroll.loadCount == 1 ) {
// after 2nd page loaded
// disable loading on scroll
$container.infiniteScroll( 'option', {
loadOnScroll: false,
});
// show button
$viewMoreButton.show();
// remove event listener
$container.off( 'load.infiniteScroll', onPageLoad );
}
}
</script>
Any help with this would be great. The console.log reports that it has hit the last page properly, but the button does not hide itself.

Change option and reinitialize

I am using jscroll as an infinite scroll pager.
$j('.frontpage').jscroll({
loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
padding: 20,
nextSelector: 'div.next a',
contentSelector: '.latest-container',
autoTrigger: true,
autoTriggerUntil: 1
});
This is a pretty neat plugin and it uses the must-have for my project autoTriggerUntil.
Using that method you can limit the times that the content loads automatic and show the pagination's "next" button.
What I am trying to achieve is this.
Load the first set of posts (actually the 2nd page) with infinite. (DONE)
After the 2nd page, show a "Load All" button. (DONE)
Both 1 and 2 work but what I am trying to do is this: After clicking the "Load All" on page 2, I want to destroy the limiter and get back to an infinite view until the end.
I basically need to reinitialize this somehow. I have been messing with intervals and other bad practices the last couple of hours with no results.

After digging I came out with this solution:-
first, you need to add a callback function like this:-
$('.frontpage').jscroll({
//your existing settings ,
callback: function() {
if ($('div.next a').is(":visible")) {
$('.frontpage').jscroll.destroy();
$('div.next a').off('click');
}
}
});
Second Add onclick attribute to the load All a tag (only in the page where the load all a tag is visible)
onclick="loadAllClick(event);"
and the handler function should be like this:-
<script>
var loadAllClick = function(e) {
e.preventDefault();
$('.frontpage').jscroll( //your settings
);
}
</script>
and Here is a fully working plunker sample
Hope this answers your question

You can use the $(el).off() method and the plugin's callback option.
Tested on the plugin page http://jscroll.com/.
It can look something like this:
var counter = 0;
function scrollerCallback(){
counter++;
if(counter<2){return;}
var el = $j('div.next a'); //Your 'next' selector
el.off()
el.on('click',function(e){
e.preventDefault(); // we don't want the browser to go to redirect
// Add your code to show the rest of the comments here.
});
}
And then call bind the same way but add callback:
$j('.frontpage').jscroll({
loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
...
callback:scrollerCallback,
autoTriggerUntil: 1
});

In your CallBack function, try using this:
var counter = 0;
function scrollerCallback(){
counter++;
if(counter<2){return;}
var el = $j(document).find('div.next a');
el.on('click',function(e){
e.preventDefault();
console.log("This call gets executed!");
$j('.frontpage').jscroll({
autoTrigger: false,
autoTriggerUntil: false
});
});
}
What happens when you do this? I guess you have to modify the library itself for this to work, but I am not quite sure yet ...

How to pass data to a Jquery Dialog when it opens

I am trying to display the Jquery dialog when the JSP loads. I check for a flag from the bean (showPopupFlag), so this is different from user clicking a button on a already loaded page.
I am trying to push some data into the pop when it displays using the dialogContent.
Is this possible to send/push data to the dialog (I know it is) but some how I am missing something. Any help is appreciated. - Thanks
My html code is
<div id="dialogId" title="JqueryDialogTest">
<div id="dialogContent"></div>
</div>
My included Js is
$(document).ready(function () {
$(function(){
$("#dialogId")
.dialog({autoOpen: false, modal : true} );
} );
});
$(function(){
if($("#showPopupFlag").val() === "true") {
$("#dialogContent").html($("#displaySubjectNotFoundPopup").val());
$("#dialogId").dialog("open");
}
});

You are messing up the auto execute function and the document ready block. So you can do achieve it by :
//document ready block
$(document).ready(function () {
//initialize the dialog ui box
$("#dialogId").dialog({
autoOpen: false,
modal: true
});
//auto executing function
//or you could simply remove the function and let the code block be executed on document ready
(function(){
if($("#showPopupFlag").val() == "true") {
$("#dialogContent").html("someValue");
$("#dialogId").dialog("open");
}
}());
});
And here is the demo JSFIDDLE

Add separate playpause button in Flexslider

I'm trying to add a playpause button to my flexslider presentation. Instead of the standard playpause button (inside the presentation) I would like to add a separate button somewhere else on the html-page.
Unfortunately I'm no expert in javascript. I can't seem to figure out how to make an element (say an image) somewhere else on my page behave like the play-pause button. How to connect it to the right script?
And if this is simply too difficult, just a play-button would also do... since the presentation pauses automatically when the visitors click next or previous.
Hope anybody can help us out! Thanks

Create one button,
<input type='button' value='START SLIDESHOW' id='play-gallery' />
Then write js code for it,
put code in flexslide's function,
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
pausePlay: false,
slideshowSpeed: 4000,
slideToStart: 0,
start: function(slider) {
var slideshowPlaying = true;
$('#play-gallery').click(function() {
if($('ul.slides li').length > 1) {
if (slideshowPlaying == true) {
slideshowPlaying = false;
slider.pause();
$('#play-gallery').html('START SLIDESHOW');
} else {
slideshowPlaying = true;
slider.flexAnimate(slider.getTarget("next"));
slider.play();
$('#play-gallery').html('STOP SLIDESHOW');
}
}
});
}
});

#HB Kautil +1 for your answer. But I had to change just two parts of your code. Would've added this as a comment but my "reputation" isn't there yet.
$('#play-gallery').val('START SLIDESHOW');
And
$('#play-gallery').val('STOP SLIDESHOW');
Other than that your answer did all the heavy lifting :)

qTip has no method 'qtip' for dynamic content

I have this interface in my system.
I assign class mailListBtn for all Successful-[] Failed-[] link. When then user click at Successful-[] Failed-[] it will call this js code
$(".mailListBtn").click(function(){
var currentId = $(this).attr('id');
currentId = currentId.split("_"); //Need to split because ID like MCBTN_13
var actualId = currentId[1];
if($("#C_"+actualId).is(":visible"))
$("#C_"+actualId).hide("slow","swing");
$("img#LOADER_"+actualId).show();
var dataString ="action=getMailListByID"+
"&mailID="+actualId;
$.ajax({
type: "POST",
url: "include/get.php",
data: dataString,
cache: false,
async: true,
success: function(html)
{
$("#SPAN_"+actualId).empty();
$("#SPAN_"+actualId).append(html);
$("#C_"+actualId).show("slow","swing");
$("img#LOADER_"+actualId).hide();
if($("#C_"+actualId).is(":visible"))
$("#CC_"+actualId).show();
else
$("#CC_"+actualId).hide();
reQtip();
}
});
});
reQtip() code
function reQtip()
{
$("img[rel*='template/qTipUpdateContact.php?refID=']").each(function()
{
$(this).qtip({
content: {
text: '<img class="throbber" src="images/loader.gif" alt="Loading..." />',
ajax: {
url: $(this).attr('rel'),
once: false
},
title: {
text: 'UPDATE CONTACT INFO FOR NEWSSID - ' + $(this).attr('title'),
button: true
}
},position: {
at: 'middle left', // Position the tooltip above the link
my: 'right middle',
viewport: $(window), // Keep the tooltip on-screen at all times
effect: false // Disable positioning animation
},
show: {
event: 'click mouseenter',
solo: true // Only show one tooltip at a time
},
hide: {
event: 'click'
},
style: {
classes: 'qtip-dark'
}
});
});
}
If you can see, after the content load successful, I call reQtip() function so that the content that have qTip is activate the qTip for each element. The content look like below:-
As you can see, mouse hover at the green button will popup the qTip like below:-
The problem is, for the first time when I click on Successful-[0] Failed-[4] the content display and the qTip function normally. Than I click on Successful-[4] Failed-[9] the content display but qTip error. The error from inspect code in google chrome is Uncaught TypeError: Object [object Object] has no method 'qtip' . For your info, I already include qTip js file inside <head> in my php page. Why the qTip only can run for the first content but error on the second content.
I try to detect if the qTip function exist or not. For that, I add this piece of code on top of my reQtip() function.
if($.fn.qtip)
alert("Function exist");
else
alert("Function not exist");
The result is for the first content it alert "Function exist" than I hover to the icon and the qTip displayed. Than I click another Successful-[] Failed-[] to retrieve another content, than I got alert "Function not exist". My question, is qTip remove their function after we use it?

Found solution for my problem in this post
The problem is with my qTip page. I have js script and include js file inside my qTip page. Remove this or place it inside initial page will solve the problem.
Thank you.