Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kieron 139 posts 355 karma points
    Aug 31, 2018 @ 09:19
    Kieron
    0

    "Lazy Loading" Additional content on scroll, without refresh.

    Hi all

    Did a search on this subject and found various answers such as:

    https://our.umbraco.com/forum/umbraco-7/using-umbraco-7/75559-pulling-child-node-content-via-ajax-or-some-other-method

    https://our.umbraco.com/forum/templates-partial-views-and-macros/76046-umbraco-ajax-load-more-onclick-of-a-button-using-surfacecontroller

    But looking to see now if there is a different way anyone would do anything, to summarise:

    Got a site which has various types of content, X, Y, Z etc, and when you load up the page to view all the X's, it only gives you 6, then on scroll, you get the next 6 etc.

    Requirements being it should be fast & not refresh the page, so this rules out pagination & probably rules out loading all content then showing them 6 at a time, but I do not know.

    I am a beginner to Umbraco so believe I will need to use some sort of controller etc to solve this, though I only work within the web interface of Umbraco so hopefully, this doesn't limit the solution.

    Thanks

  • Richard Eyres 95 posts 556 karma points
    Aug 31, 2018 @ 13:37
    Richard Eyres
    1

    Hello

    Would an Umbraco API controller work for you? https://our.umbraco.com/Documentation/Reference/Routing/WebApi/

    You could create an AJAX request to the API call to get the information you require.

    I do not have any code for an infinite scroll facility, but i have used Umbraco API controller before to get information i require to the view.

  • Kieron 139 posts 355 karma points
    Aug 31, 2018 @ 13:39
    Kieron
    0

    Sounds like the right direction, ill need to find more of a "guide" as the documentation doesn't really contain any specific examples on what I need to do.

  • Tim Geyssens 6419 posts 15021 karma points MVP 2x c-trib
    Aug 31, 2018 @ 13:52
    Tim Geyssens
    0

    Yes definitely take a look at WEBAPI,

    Let's say X has property name, intro and url

    Step 1, define your model (/models/NewsItem.cs)

     public class NewsItem
        {
            public string Url { get; set; }
            public string Name { get; set; }
            public string Intro { get; set; }
    
        }
    

    Step 2: create (strongly typed) partial view (/views/partials/NewsItem.cshtml)

    @model YourProjectName.Models.NewsItem
    
    
    <div class="item">
        <a href="@Model.Url">
            <div class="text">
                <h3>
                    @Model.Name
                </h3>
    
            </div>
        </a>
    </div>
    
  • Tim Geyssens 6419 posts 15021 karma points MVP 2x c-trib
    Aug 31, 2018 @ 13:53
    Tim Geyssens
    1

    Oops got posted to quick, was still writing... part 2 coming up

  • Kieron 139 posts 355 karma points
    Aug 31, 2018 @ 13:56
    Kieron
    0

    Don't worry, I'm still trying to find the Models folder... lol.

    Thanks for your help though I'm excited to try :)

    Edit; is it app_data/Models?

  • Tim Geyssens 6419 posts 15021 karma points MVP 2x c-trib
    Aug 31, 2018 @ 13:59
    Tim Geyssens
    0

    nope it's just /Models (you might need to create it) on the same level as App_Data

  • Tim Geyssens 6419 posts 15021 karma points MVP 2x c-trib
    Aug 31, 2018 @ 13:58
    Tim Geyssens
    0

    Step 3, add another partial view that will list newsitems (not a single one but a collection (/views/partials/NewsItems.cshtml)

    @model IEnumerable<NewsItem>
    
    @if (Model.Any())
    {
    <div class="row">
        @foreach (var item in Model)
        {
            @Html.Partial("NieuwsItem", item)
    
        }
    </div>
    }
    

    Step 4: add a surface controller that will handle the rendering of more news items (/controllers/MoreNewsItemsController.cs)

     public class MoreNewsItemsController: SurfaceController
    {
        public ActionResult LoadMoreNewsItems(int pageId, int ItemsPerPage,  int page)
        {
          //fetch the news items here and cast them to the model
          var newsItems = ...;
          return PartialView("~/Views/Partials/NewsItems.cshtml", newsItems);
    
  • Tim Geyssens 6419 posts 15021 karma points MVP 2x c-trib
    Aug 31, 2018 @ 14:03
    Tim Geyssens
    0

    then on the page where you output the news, you'll first output n number of items and then lazy load the rest with js

    here is a snippet to get you started but you'll need to finetune it

     <script>
    
        var lazyloadPage = 2,
            lazyloadHtml = '';
    
        function lazyload() {
    
            var requestData = {
    
                pageId: @Model.Content.Id,
                itemsPerPage: 6,
                page: lazyloadPage
            }
    
            $.get('/umbraco/surface/MoreNewsItems/LoadMoreNewsItems', requestData, function (data) {
    
                var newData = data.trim();
    
                if (newData.length > 0) {
    
                    $('#search-load-more').css('display', 'inline-block');
    
                } else {
    
                    $('#search-load-more').css('display', 'none');
                }
    
                lazyloadHtml = newData;
            });
        }
    
        $('#search-load-more').click(function (event) {
    
            event.preventDefault();
    
            setTimeout(function () {
    
                $('#search-result-wrapper').append(lazyloadHtml).find('.load-more-step').removeClass('load-more-step').fadeIn(200);
                lazyloadPage++;
                lazyload(lazyloadPage);
            }, 0);
        });
    
        lazyload(lazyloadPage);
    
    
    
    
    </script>
    
  • Tim Geyssens 6419 posts 15021 karma points MVP 2x c-trib
    Aug 31, 2018 @ 14:04
    Tim Geyssens
    1

    Hope this makes sense :) you'll also need jQuery since that is used in the js....

    The snippet basicly lazy loads the next n items on page load and then when a button is clicked is shows them plus lazy loads the next items

  • Tim Geyssens 6419 posts 15021 karma points MVP 2x c-trib
    Aug 31, 2018 @ 14:06
    Tim Geyssens
    1

    I'll try to wrap this in a exampe project but currently you'll have to do it with this

  • Kieron 139 posts 355 karma points
    Aug 31, 2018 @ 14:08
    Kieron
    0

    Ive implemented everything and will have a good go at figuring it out! Thanks very much.

    edit; Im getting a 404 here;

       domain.co.uk/umbraco/surface/MoreNewsItems/LoadMoreNewsItems?pageId=1075&itemsPerPage=6&page=4 404 (Not Found)
    

    I must have something in the wrong place!

  • Kieron 139 posts 355 karma points
    Sep 03, 2018 @ 09:10
    Kieron
    0

    Hey Tim, ive been fiddling around with this all for a couple days now & unfortunately am no further ahead. I wondered if you might be able to load it into a working example, only if you have the time of course.

    Thanks in advance!

  • Tim Geyssens 6419 posts 15021 karma points MVP 2x c-trib
    Sep 03, 2018 @ 09:16
    Tim Geyssens
    1

    Will do but it won't be until tomorrow evening...

  • Kieron 139 posts 355 karma points
    Sep 03, 2018 @ 10:19
    Kieron
    0

    No rush at all!

  • Kieron 139 posts 355 karma points
    Sep 11, 2018 @ 13:32
    Kieron
    0

    Hey Tim, just wondering if you found the time to whip up that example for me. Thanks :-D

  • ibrahim TUNC 38 posts 95 karma points
    Mar 21, 2019 @ 21:15
    ibrahim TUNC
    0

    I think Tim forgot about it.

Please Sign in or register to post replies

Write your reply to:

Draft