load more facing issue - Umbraco 8

Sowndar M 54 posts 148 karma points

Apr 30, 2019 @ 11:57

Load More issue

I have 7 post in the list. it has to show each 3 post when I click the Loadmore. Load More work until reach the 6 post then after it won't show the remaining one post and freeze after reach the 6 posts

@inherits Umbraco.Web.Mvc.UmbracoViewPage
@using ContentModels = Umbraco.Web.PublishedModels;
@{
    Layout = "master.cshtml";

    var site = Model;
    var listing = Model.Descendants("listing").Where(x => x.IsVisible()).OrderByDescending(x => x.CreateDate);

    var skip = 3;

    if (!string.IsNullOrEmpty(Request.QueryString["num_of_listing"]))
    {
        skip = Convert.ToInt32(Request.QueryString["num_of_listing"]);
    }


    var stop = listing.Count();

}

@Html.Partial("~/Views/Partials/Shared/Banner.cshtml")

@if (listing.Any())
{


    <section class="listing padding-top-100 padding-bottom-100">
        <div class="container">
            <div class="row">
                <div class="col-12 top-head">
                    @if (site.Value("listingMainTitle") != null)
                    {
                        <h2 class="text-center mb-5 title-underline">@site.Value("listingMainTitle")</h2>
                    }

                    @if (site.Value("listingMainContent") != null)
                    {
                        <p class="width-half text-center mx-auto">@site.Value("listingMainContent")</p>
                    }


                </div>
                @foreach (var item in listing.Take(skip))
                {

                    var listingImage = item.Value<IPublishedContent>("bannerImage");
                    var bannerTitle = item.Value<IPublishedContent>("bannerTitle");
                    <div class="col-md-4 mb-4  text-center">
                        <div class="listing-item">
                            @if (listingImage != null)
                            {
                                <img class="img-fluid mb-4" src="@listingImage.Url" alt="@item.Name" />
                            }
                            <div class="listing-item-content">
                                @if (bannerTitle != null)
                                {
                                    <a href="@item.Url"><h5>@bannerTitle</h5></a>

                                }
                                else
                                {

                                    <a href="@item.Url"><h5>@item.Name</h5></a>
                                }

                                @(Html.Raw(item.Value("bannerContent").ToString().Truncate(100)))
                            </div>
                        </div>

                    </div>
                }

                @if (skip > stop)
                {

                    <div class="post-bottom mx-auto"><h5 class="text-center">You have reached the bottom...!</h5></div>

                }
                else
                {

                    <div class="col-md-12 text-center mt-5">
                        <button class="btn load-more">Load More </button>
                    </div>

                }
            </div>
        </div>

    </section>


<script>

        var skip = @skip;
        var count = skip;
        $(".load-more").click(function () {

            debugger;
            skip = skip + count;

            var stop = @listing.Count();

            $.ajax({
                        url: '@Model.Url',
                        Type: 'get',
                        data: {
                            num_of_listing: skip,


                        },
                        success: function (html) {
                            var div = $('.listing .container', $(html));
                            $('.listing').html(div);
                        }
                    });
        });
    </script>


}

Copy Link

Rhys Hamilton 140 posts 942 karma points

Apr 30, 2019 @ 13:28

By the looks of things, the value in your num_of_listing appears to be 6 - which matches the number of items that you're successfully returning.

I'm assuming the num_of_listing refers to the number of records returned? If you change this value to 10, I'd expect your "load more" function to work for 10 items.

If this is the case, then perhaps your num_of_listing should read num_of_listing: stop instead of num_of_listing: skip - since stop appears to get the total number of items whereas skip does not.

Hopefully this helps!

Copy Link

RyanW 33 posts 148 karma points

Apr 28, 2021 @ 10:41

Hi, sorry for bringing this up when it's 2 years old! Found this and you helped with a blog I was working on. So found your issue and a better solution to your woes. Hopefully it helps someone else in the future too.

Setting num_of_listing: stop isn't a solution, since that just means you load all remaining articles rather than load the next 6. Not ideal!

The solution is using event delegation instead because you are rewriting the HTML on every click and the bindings are being lost. This is why we don't even hit the debugger on clicking Load More the second time. By making use of event delegation you are binding the event for present elements in the DOM and future ones that will be appended to the DOM such as those ones resulting from your AJAX calls.

Change: $(".load-more").click(function () {

To: $(document).on("click", ".load-more", function() {

I'm using this in Umbraco 8.13.0. My full script changes very little but looks like so:

<script>
    var Skip = @Skip;
    var Count = Skip;
    $(document).on("click", ".load-more", function() {
        debugger;
        Skip = Skip + Count;

        $.ajax({
            url: '@Model.Url()',
            Type: 'get',
            data: {
                num_of_listing: Skip,
            },
            success: function (html) {
                var div = $('.listing .container', $(html));
                $('.listing').html(div);
            }
        });
    });
</script>

Copy Link

is working on a reply...

Flag this post as spam?

Load More issue