We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered ModX Revo - What is the right way to call document Resources via Ajax?

    • 51474
    • 27 Posts
    pohkit Reply #1, 8 years, 3 months ago
    Hello guys, I'm using MODX Revo 2.4.2-pl

    Below is my Work resources, it have 4 levels :
    - Work
    - Category
    - Client
    - Project

    On my home page I wanted to display 4 project only, then it will have a button to press 'Load More' and perform the Ajax loop and load another 4 project.

    I'm planning to open a document for ajax to call the Url, and inside the document is store with getResources

    home-page-ajax :
    [[getResources?
    &parents=`5`
    &showHidden=`1`
    &tpl=`home-projectHolder-level1`
    &includeTVs=`1`
    &processTVs=`1`
    &limit=`0`
    &depth=`0`
]]



    home-projectHolder-level1 :
    [[getResources?
    &parents=`[[+id]]`
    &showHidden=`1`
    &tpl=`home-projectHolder-level2`
    &includeTVs=`1`
    &processTVs=`1`
    &limit=`0`
    &depth=`0`
]]


    home-projectHolder-level2 :
    [[getResources?
    &parents=`[[+id]]`
    &showHidden=`1`
    &tpl=`home-projectHolder-level3`
    &includeTVs=`1`
    &processTVs=`1`
    &limit=`4`
    &depth=`0`
]]


    When at home-projectHolder-level3, the limit is not correct, it limit by folder instead of the resources
    <li>
    <a href="[[~[[+id]]? &scheme=`full`]]">
        <img src="[[+tv.ProjectImage]]" alt=""/>
        <h4>[[+pagetitle]]</h4>
    </a>
</li>


    Am I in the correct way to use Ajax call?
    Any plugin / right method to perform Ajax call with the method of gettings all project and with limit & offset?

    Thanks all.....appreciate the help!...

    This question has been answered by sottwell. See the first response.

    • discuss.answer
      sottwell Reply #2, 8 years, 3 months ago
      There are a lot of ways this could be done. The way MODX works does not limit you to any "one true way".

      One way: https://github.com/bezumkin/AjaxSnippet/blob/master/README.md
      Another way: https://rtfm.modx.com/revolution/2.x/case-studies-and-tutorials/loading-pages-in-the-front-end-via-ajax-and-jquery-tabs
      And yet another using pdoPage: https://www.youtube.com/watch?v=pVVol-gCiv4
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
      • lokamaya Reply #3, 8 years, 3 months ago
        Usually I create resource container (e.g. "ajax" folder) in root of web context to serve js, json, xml. Assumed the root of your 'web' context look like this:

        • [1] Home - yourdomainCom/index.html
        • [2] Work - yourdomainCom/work/
        • [3] Category - yourdomainCom/category/
        • [4] Client - yourdomainCom/client/
        • [5] Project - yourdomainCom/project/
          ---- Project 1 - yourdomainCom/project/project-1.html
          ---- Project 2 - yourdomainCom/project/project-2.html
          ---- Project 3 - yourdomainCom/project/project-3.html
          ---- Project n - yourdomainCom/project/project-n.html
        • [6] ~Ajax~ (hidden from menu) - yourdomainCom/ajax/
          ---- Home-Ajax-Project.JSON (content type: JSON, hidden, uncached) - yourdomainCom/ajax/home-ajax-project.json

        Put your getResource code into Home-Ajax-Project.JSON. Than call the URI of that resource (yourdomainCom/ajax/home-ajax-project.json) using javascript.




        But I think it's not enough. There are many possibilities to get it works properly...

        #1
        When user click "load more" for the first time, its return all of your project pages but only display the second 4 project. Then when they click "load more" once again, you only have to display the next 4 project without having to make ajax call.

        OR...

        #2
        Create a new snippet (e.g. getProjectAjax), then put it into your Home-Ajax-Project.JSON. In this snippet you can run get getResouce programatically. For example you can make ajax call yourdomainCom/ajax/home-ajax-project.json?page=1 or yourdomainCom/ajax/home-ajax-project.json?page=2. Then in your getProjectAjax snippet, you can get URI argument "page", and calculate the offset/limit of getResource.

        $page = isset($_GET['page'])? 0 : (int)$_GET['page'];
$offset = $page * 4;

$projectList= $modx->runSnippet (
  "getResources" , array(
     "tpl" => "listProjectAjax", 
     "parents"=> 5, //ID of Project resource
     "offset"=> $offset, 
     "limit"=> 4,
     "depth"=> 1,
     "sortby"=> "id", //or datecreated
     "sortdir"=> "DESC"
     ) 
);

return $projectList;



        See:
        https://rtfm.modx.com/revolution/2.x/developing-in-modx/other-development-resources/class-reference/modx/modx.runsnippet
        http://bobsguides.com/blog.html/2015/06/01/calling-getresources-in-code/ [ed. note: lokamaya last edited this post 8 years, 3 months ago.]
          zaenal.lokamaya
        • lokamaya Reply #4, 8 years, 3 months ago
          Note...

          Since we want to output getResource as JSON, we have to carefully create the proper TPL for it. See http://forums.modx.com/index.php?action=thread&thread=67146&i=1
            zaenal.lokamaya