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

27 Posts

pohkit Reply #1, 10 years, 9 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

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 10 years, 9 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

☆ A M B ☆
183 Posts

lokamaya Reply #3, 10 years, 9 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 10 years, 9 months ago.]

zaenal.lokamaya

☆ A M B ☆
183 Posts

lokamaya Reply #4, 10 years, 9 months ago

Note...

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

zaenal.lokamaya

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