We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
  • Perhaps I'm glossing over the documentation, but is there a parameter that will tell gR how many items to display? I want the limit to be X which I can set with &limit, but is there not a &display parameter to say only show X of Total items?
      Sal Baldovinos
      SEO & DIGITAL MARKETING

      ARIEL DIGITAL | Maximize Your Potential
      www.arieldigitalmarketing.com
    • I'm confused. Total items means all your resources? Isn't &limit=`5` what you want? What is X?

      If you're trying to "load more" and get 5 more resources, try getPage.
      https://rtfm.modx.com/extras/revo/getpage
        Frogabog- MODX Websites in Portland Oregon
        "Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
        Having server issues? These guys have MODX Hosting perfected - SkyToaster
      • Quote from: frogabog at Jul 31, 2015, 02:57 AM
        I'm confused. Total items means all your resources? Isn't &limit=`5` what you want? What is X?

        If you're trying to "load more" and get 5 more resources, try getPage.
        https://rtfm.modx.com/extras/revo/getpage

        Scenario: Events landing page that is using gR to display child event. I want to only display X initially (x = cool ... then using a lazy load / infinite scroll method, I want to then load another X amount on the same page

        Event 1
        Event 2
        Event 3
        - load more button -
        Event 4
        Event 5
        Event 6
        (now I have 6 events showing and the load more button under those)

        - load more button -
        Event 7
        Event 8
        Event 9

        etc etc
          Sal Baldovinos
          SEO & DIGITAL MARKETING

          ARIEL DIGITAL | Maximize Your Potential
          www.arieldigitalmarketing.com
        • Ok, so X is 3. X doesn't matter so much anyway.


          You could do something with AJAX, perhaps modify http://demo.modmore.com/moregallery/ajax-load-more/ to work with getResources instead of gallery items. This method uses getPage and mgGetImages (use getResources in the place of &element=`mgGetImages`), and the ajax would need to be changed a bit as well.

          or try:

          http://williamwalker.me/blog/implementing-infinite-scroll-pagination-with-modx.html

          I'm not sure that the above infinite scroll method can't be done with just getPage and getResources actually. I don't see why, it's the same method really. Between the two demos though, you should be able to load more resources with AJAX somehow.
            Frogabog- MODX Websites in Portland Oregon
            "Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
            Having server issues? These guys have MODX Hosting perfected - SkyToaster
          • I’m using the example on modmore site for doing the ‘load more’ feature for the events page (and also case studies & knowledge base). Functionality seems to there with the AJAX part, but it’s not loading more content.

            Currently I have 3 sample events. The Events resource (20) is using getPage to call it’s children resources:

            Event Resource (ID=20)
            [[!getPage?
                &element=`getResources`
                &limit=`2`
                &parents=`[[*parent]]` 
                &tpl=`tpl_event_module`
                &includeTVs=`1` 
                &processTVs=`1`
                &tvPrefix=``
                &showHidden=`1`
                &sortbyTV=`event_date`
                &sortbyTVType=`datetime`
                &sortby=``
            ]]
            


            Connector Resource (ID=102)
            [[!getPage? 
                &element=`getResources` 
                &resource=`20` 
                &limit=`4` 
            ]]


            Script
            <script type="text/javascript">
                        $(document).ready(function(){
                            var currentPage = 1, 
                                connectorUrl = '[[~102? &page=`PAGEHERE`]]', 
                                itemsHolder = $('#list-items'), 
                                btn = $('#loadMore'); 
                    
                            btn.on('click', function() { 
                                btn.css('opacity', .5).text('Loading...');
                                
                                $.get(connectorUrl.replace('PAGEHERE', currentPage + 1), function(data) {
                                    if ($.trim(data) == '') { 
                                        btn.text('There are no more items! Please check back soon.');
                                    }
                                    else { 
                                        currentPage++;
                                        itemsHolder.append(data);
                                        btn.css('opacity', 1).text('Load more!');
                                    }
                                });
                            });
                        });
            </script>


            When I click the “load more” link on my events page - it doesn't return the next resources (should at least display one more resource). Have missed a step?
              Sal Baldovinos
              SEO & DIGITAL MARKETING

              ARIEL DIGITAL | Maximize Your Potential
              www.arieldigitalmarketing.com
            • You may need the &tpl parameter in the getPage call on the connector resource (102), so that getResources can display them. You may also need to add &getResourceFields=`1`. I'd also remove the sortBy in the getPage call on ID 20 if you're sorting by tv.

              I'm looking at the code from last time I did this with the Modmore example which is why I'm suggesting adding the tpl and getResourceFields. I am using mgGetImages and Swipebox in this case, which apparently needed both calls to order up the tpl for the images.

              what's your Load More button code look like?

              I went with pretty much exactly what was shown on the Modmore demo:
              <p class="text-center">
              <a href="javascript:void(0);" class="btn btn-default" id="loadMore">Load more Ink!</a>
              </p>


              Hope this helps!
                Frogabog- MODX Websites in Portland Oregon
                "Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
                Having server issues? These guys have MODX Hosting perfected - SkyToaster
                • 37984
                • 215 Posts
                Hey guys. I'm also attempting this and would LOVE to know how to accomplish it. I've tried Mark's Modmore gallery demo modified to work with getResources in multiple ways, as well as the technique used by Mr. Walker that was included above; neither works. The part I'm hung up on is getting the ajax to load the NEXT resources; it just continues to load the same resources each time the button is clicked, or none at all.
                  Jesse Couch
                  MODX Aficionado, Front-End Designer & Developer
                  http://www.designcouch.com
                  • 37984
                  • 215 Posts
                  Quick update - I pulled this off using getPage along with jQuery and no connector resource whatsoever. Simply used the url from the "next" item that getPage creates in its pagination in my ajax call.

                  Here's my getPage call, using a custom property set in getPage called, aptly, 'custom':

                  [[!getPage@custom? &pageNavOuterTpl=`[[+next]]` &pageNextTpl=`[[$customNextTpl]]` &element=`getResources` &limit=`5` &parents=`[[*id]]` &tpl=`blogPreview` &showHidden=`1` &initialOffset=`1` &processTVs=`1` &includeTVs=`1` &pageNavVar=`pagination`]]


                  I removed all pagination elements from the pageNavOuterTpl except for the next element, and then customized that element using the chunk (customNextTpl) below:

                  <span class="nextContainer">
                  <a class="loadMore" id="loadMore" href="[[+href]]">Load More</a>
                  <script>
                              $('#loadMore').click(function(){
                                  // gets url from clicked button
                                  var moreURL = $(this).attr('href');
                                 // calls url to get new data
                                  $.get( moreURL, function( data ) {
                                      // inspects data for desired elements, so that whole page doesn't render
                                      var newData = $(data).find('.page-content').children();
                                      // inserts desired data after existing content
                                      $(".page-content").append(newData);
                                  });
                                  // removes button and script so that there are not duplicates, as ajax call brought in a new button and script after loaded elements
                                  $(this).parent().remove();
                                  return false
                              });
                  </script>
                  </span>
                  


                  I then included the
                  [[!+pagination]]
                  placeholder where I wanted my Load More button to appear.

                  In case you're curious - the initialOffset property in my getPage call is custom, and unrelated. [ed. note: designcouch last edited this post 8 years, 5 months ago.]
                    Jesse Couch
                    MODX Aficionado, Front-End Designer & Developer
                    http://www.designcouch.com