Tell us what you are trying to do?
I have created a view with a loop of images and implemented infinite scroll. However, I can't get the loading spinner working, it is not displayed. Attached a screenshot with the settings.
Is there any documentation that you are following?
I have searched the forum and found out that I should include the spinner shortcode; I tried to include it into the loop as well as into the filter section, but nothing worked.
Is there a similar example that we can see?
Unfortunately we have no working sample to show.
What is the link to your site?
hidden link
Thanks in advance for your help!
Hi, the first thing I noticed is that there is a JavaScript error on the page related to this code:
jQuery(function($) {
$('a[href*="#"]:not([href="#"])').click(function() {
var target = $(this.hash);
$('html,body').stop().animate({
scrollTop: target.offset().top - 110
}, 'linear');
});
if (location.hash){
var id = $(location.hash);
}
$(window).load(function() {
if (location.hash){
$('html,body').animate({scrollTop: id.offset().top -110}, 'linear')
};
});
})(jQuery);
The error is shown in the JS console:
(index):139 Uncaught TypeError: jQuery(...) is not a function
Usually this happens when JavaScript is enqueued before jQuery is ready. Can you tell me more about how this script is added to the site? Is it possible to add it to the site footer instead of the site header, or to enqueue it with jQuery as a dependency?
Hi, thanks for the feedback.
We removed this script completely from the site now, but still no spinner is displayed.
I'm not able to see the entire loop output code, but it looks like there is a JavaScript file included in the loop editor somehow - foobox.free.min.js is the filename. Each time a set of results loads, the JavaScript file is loaded again. May I log in to your wp-admin area and take a closer look at this code? Please provide login credentials in the private reply fields here.
Okay a few things I noticed:
1. The structure of the Loop Output was broken. There should be a closing div after the pad-last item, and were some unclosed divs causing problems, so I updated the loop structure. Notice there is now a closing div after index 3, and another closing div after index pad-last. It looks wrong, but it's actually correct here. Also note that the container element is outside the loop, and the div is closed just before the loop end comment. I moved the script up outside of the loop so it's not loaded so many times. Here is the full updated code:
[wpv-layout-start]
[wpv-items-found]
<script src="/wp-content/plugins/foobox-image-lightbox/free/js/foobox.free.min.js"></script>
<div class="container wpv-loop js-wpv-loop">
<!-- wpv-loop-start -->
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-md-4">[wpv-post-body view_template="loop-item-in-portfolio-images1"]</div>
[wpv-item index=2]
<div class="col-md-4">[wpv-post-body view_template="loop-item-in-portfolio-images1"]</div>
[wpv-item index=3]
<div class="col-md-4">[wpv-post-body view_template="loop-item-in-portfolio-images1"]</div>
</div>
[wpv-item index=pad]
<div class="col-md-4"></div>
[wpv-item index=pad-last]
<div class="col-md-4"></div>
</div>
</wpv-loop>
[wpv-filter-spinner spinner="<em><u>hidden link</u></em>" class="loadingspinner"]weitere Einträge werden geladen...[/wpv-filter-spinner]
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
2. Since there are no other filters, the spinner should not be added in the Search and Pagination panel. I have added it to the Loop Output editor as you can see above.
3. The spinner will only appear in case there is a significant delay in retrieving the next set of AJAX results. I have edited the preload settings so you can see the spinner now, but it does add a small delay to the pagination effect. If you turn on preloading, the pagination effect will be faster but the spinner probably won't appear because the next page's results have already been loaded with AJAX.
Hi Christian,
thanks a lot for setting the loop output right – this works now!
However, the client has also asked us to present a „Load More“ button as an alternative and we don’t get this to work properly either.
We have created a new page hidden link and a new view „Test-LoadMore“ in which we replaced the code for the spinner with the line
[wpv-pager-next-page force="true"][wpml-string context="wpv-views"]Load More Button here ...[/wpml-string][/wpv-pager-next-page]
Settings under Pagination and Slider Settings are the same, except that we changed the tolerance of infinite scrolling to „-5000“ pixels.
hidden link
The Load More button works basically when NOT scrolling to the very end of the page/footer. Neverthless, if I scroll the page to the very end/footer, it still loads and displays the 2nd, 3rd, 4th items-loop like with infinite scrolling.
I’m pretty sure that there is just one small thing in the setting wrong.
The full loop code is now:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<script type='text/javascript' src='hidden link;
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-md-4">[wpv-post-body view_template="schleifen-objekt-in-test-loadmore"]</div>
[wpv-item index=2]
<div class="col-md-4">[wpv-post-body view_template="schleifen-objekt-in-test-loadmore"]</div>
[wpv-item index=3]
<div class="col-md-4">[wpv-post-body view_template="schleifen-objekt-in-test-loadmore"]</div>
</div>
[wpv-item index=pad]
<div class="col-md-4"></div>
[wpv-item index=pad-last]
<div class="col-md-4"></div>
</div>
</wpv-loop>
[wpv-pager-next-page force="true"][wpml-string context="wpv-views"]Load More Button here ...[/wpml-string][/wpv-pager-next-page]
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]
However, the client has also asked us to present a „Load More“ button as an alternative and we don’t get this to work properly either.
Unfortunately there is no "Load More" button feature built-in to Views, and the system isn't designed to provide or support such a button. Some other users have hacked together solutions that more or less work for their own specific cases, but I don't recommend this. For example, in your case, it is easy to scroll to the bottom of the page. This will trigger the infinite scroll update without clicking the Load More button. You could try hacking this by making the footer much much taller so it's not so easy to scroll to the bottom of the page. But again, it's not a solid solution. It's a hack, and it's not guaranteed to work.
If you would like to see a "Load More" button added to the software, I recommend submitting your request here: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/
