Can someone guide me in the right direction with Ajax & getPage?

Hello,

I am currently working for a project for my sister and I have seriously hit a wall that at this point it's making me a little looney. I want to use getPage to render out a list of post from Articles. I'd like to have the pagination to be ajax but I just cannot for the life of me grasp the concept.


I know there is the ajax processor file which is the empty document to process the results i'd want to put on the front page I'd like to be putting my content:

[AJAX PROCESSOR BLANK TEMPLATE RESOURCE]
Which to my understanding is where my "getPage" snippet would be called.
[/AJAX PROCESSOR BLANK TEMPLATE RESOURCE]

But how do I Ajax the links and the content from getPage?

Please help. I've done search here, online, but most tutorials I read are for standalone builds with php, mysql, queries and such. I am aware modx is built on php, so do I need to make a new snippet that calls getPage?

But then from there what do I do , what information do I need to have it properly ajaxing what I need?

Your AJAX would need to send limit, offset, and page to be fetched to the getPage, and you would have to wrap your getPage in a wrapper snippet to get these values from the POST.

I would use a JQuery paging script, with getPage as my back-end. Google comes up with a ton of JQuery-AJAX-PHP paging scripts. You would need to have a wrapper for getPage to receive the POST values and put them in the limit, offset and page properties to get each set of resources.

sottwell,

Thank you for the information. So in the ajax processor resource I would need (from what I am understanding) a snippet made by moi that has getPage wrapped around it. Then on the page where I'd like to use the information to display is where I would be using a JQuery paging script. Is that correct?

Being that the limit / offset / page properties I get from that wrapped getPage snippet would be then given to the front-end JQuery script? Am I following correctly?

I think i am close to figuring it out.

I have a snippet call within my ajax processor file looking something like this:



But that's not entirely working. The echo was placed to see if my ajax was working from jQuery. Now you state to use a pagination that's jquery based, but I don't understand how that works because most of these that show up in google (like jPage) do the paging for you based off information that you provide to it. Does this mean I would have to find some way to incorporate the jQuery code within the above snippet?

For example: I don't get the whole "page.nav" business. If I wanted to use the pagination from the jQuery, how do I go on about overwritting getPages pagination?

Also, I do not understand how these three work in conjunction to each other in getPage: pageVarKey, offset, and page. Reading in the documentation someone states:

if you are making your custom snippet to work with get page there are three things that your snippet needs to do ...

• limit
• offest
• totalVar

Does this apply to me as well? Because this would confuse me with your post of using limit, offset, and page.

p.s: Why do I need "limit" to be determined every time? The other two make sense, but limit throws me off. I don't see that value changing, so why would I need to create a POST for it?

p.p.s: To add to what I meant by pageVarKey, offset, and page:

pageVarKey: The key of a property that indicates the current page within the $_REQUEST, and sets the value of page. In 1.2.2+, $_GET is searched before $_REQUEST explicitly.

What does the author mean by $_REQUEST? Does getPage automatically send $_REQUEST variable and stores where I can call it already within that wrapper snippet? If so, why is it's default value "page". Wouldn't it be a numerical value? It states 'and sets the value of page'. [ed. note: tonitox2 last edited this post 13 years, 3 months ago.]

Yea I am stuck, I don't get this. I don't get who's "in command" when it comes to the naviagation information. Who am I feeding who?

getPage values to jQuery pagination? Or jQuery values to getPage pagination? If the second is the one, then how do I overwrite the navigation on getPage so it's the jQuery one.

I am notes after notes in writing on my notebook and I just don't get it. I got ajax to send the information to the snippet, but nothing happens. I know it has to be something to my logic because I don't understand getPage.

Help?

The whole point is that somehow getPage needs to know which resource to start with when loading its next batch, as well as how many to load in the batch. It adds these numbers to the URL query string on page load, so that on the next request it can grab the numbers and calculate where to start for this batch. So your AJAX will have to send those numbers, and itself keep track of where it is so that on the next request it can send the appropriate numbers.

If you use an AJAX paging script, it will send the numbers for the offset into the database to start fetching from, as well as how many to fetch. On the surface, that should be easy enough to work with on the back-end, using a snippet to get those values and feed them to getResources using runSnippet with something like this:

The $offset and $limit values would come from the GET or POST sent by the AJAX request. The AJAX paging scripts keep track of this and send the proper numbers; the trick would be to adjust the script to be able to handle the return value sent by getResources.

https://forums.modx.com/thread/26847/pagination-without-refreshing-the-page?page=4#dis-post-472248

I can see why it's confusing. Normally, getPage is sending that information to itself, so it seems odd to send the information yourself.

To expand on what Susan said, you might think of it this way (I haven't looked at the getPage code in a while, so I'm partially making this up -- but I think it's close enough to explain the process):

Normally, when you request a page with a getPage tag on it, the getPage snippet runs and displays a particular page of data (usually, some collection of abbreviated resources). It also creates "links" to the next and previous pages. Those links contain $_GET parameters that getPage has calculated to tell the receiving page (getList again) where to start and how many items to get. When you click on one of those links, it's kind of like submitting a form. It looks like you're going to another page, but you're actually just reloading the same page, but with new parameters which are interpreted by the getPage snippet to show different data.

What you want to do is simulate that with Ajax. Basically, the previous and next buttons, rather than being href links, would launch some JavaScript code in the browser. That code would issue an Ajax request to the page with the getPage snippet on it -- sending the same parameters that getPage would have sent to itself if operating normally.

All that said, I'm not sure I see why you want to do it this way. The usual use of JavaScript in this situation is to avoid reloading the page, but every Ajax request is going to do just that if you want to use getPage to display the data. And if the JavaScript code that issues the Ajax requests is going to have to calculate and keep track of the limit and offset, why use getPage (the main purpose of which is to do the same thing)?

I think I would use either getPage or Ajax, but not both.

If you think about it, many of the manager pages already do exactly what you're talking about. The System Settings grid, for example, lets you navigate forward and back through pages of System Settings. They could just as well be Resources instead of System Settings. Site -> Search is a better example, it actually lets you navigate through a selected set of resources, showing a page at a time, with forward and back buttons.

One way to go, as Susan suggests, would be to have the JavaScript keep track of the limit and offset and send an Ajax request to a page with a getResources snippet that used the parameters to create a page to display.

Another way (how it's done in the Manager pages) is to have a getList processor like the ones used in the Manager that gets *all* the selected resources and returns the desired fields from them as a JSON object. The JavaScript would take the data from the Ajax response, figure out which records belonged to the current page, and display just those records (along with next and previous links when appropriate).

I hate to even bring it up, but ExtJs/modExt does this all automatically if you don't mind having the display in a grid (which in theory, you could style to look any way you want). All you do is set up the Ext grid in JavaScript (specifying the URL of the getList processor). I think you could actually use the existing Resource getList processor to retrieve the resources.


The number of different ways you can do something in MODX is both a curse and a blessing. I hope I haven't made you even more confused.

here's a package, which should work:
https://forums.modx.com/thread/26847/pagination-without-refreshing-the-page?page=4#dis-post-472261