Stay on same page but switch content

I am stupid (that’sthat out of the way)

I will give a big wet digital kiss to anyone who can explain how to do this simply!

I have this document structure:

Mother
-child 1
-child 2
-child 3

I want to display the contents of each child document, within a specified div, without leaving the mother document, at the press of a button(s).

Am I missing a function in MODx that will allow me to do this?

Many thanks

Well, you will need to utilise one of the JS frameworks that can handle Ajax requests for you - you could program up your own Ajax implementation but there’s little point when you have a choice from mootools, jQuery, Ext ....

Then, how I would do it is:

1. Create a page that will act as the Ajax handler - this could be a MODx page, using a blank template, with a snippet that returns the document content for the page ID you want to display on your main page. (make sure you pass in the ID using a variable name like ’pageID’ to avoid conflicts with the ’ID’ request variable used by MODx) - this page can be published but hidden from view.
2. Write a JS function encapsulating an Ajax request which will allow you post the ID of the document you want to fetch to the Ajax handler. You can use a function attached to the onSuccess event of the Ajax request to then push the response into your desired DOM element.
3. Attach the JS function to the ’click’ event of your links/buttons.
4. Click away!

How you call the Ajax request is going to be dependant on which JS framework you decide to use but most of them have decent documentation that will help you in this respect.

Now that’s a brief overview but should hopefully help get you started

You could also use an <iframe> HTML tag.