[Tutorial] AJAXify your MODx site - and it degrades well, too!

hi,

First of all, gratz for the tutorial, I couldn’t find much about ajax with modx.
But I now got stuck on something, is it possible to send a form and let te results of the form load all with javascript.

so actually the same like loading a page but now using the <form action=""></form> and retrieving the variables by using $_POST.

Or is it maybe possible to adress the function directly, without the class thing.

okay nevermind, I overlooked a thing...

it’s solved by adding this in the form tag: onsubmit="docClickLoader.submitInto(this, ’klantlijst’, event)

Kudo, thanks for this! I was looking for something like that and I’m already using in my template (http://ds.supr.com.br/).

My question now is more in design... is there a way to put some scriptaculous effects on it? I mean... I wanted to put Effect.SlideDown on the DIV that is receiving the content but it goes a little weird... Any ideas?

Thank you again!

Mmmm... I don’t know. I’m not JS-savvy, I don’t know if it’s possible!
Eventually I’d try applying the effect on a container and using the link to load the content inside and with a onclick event on the same link I’d expand the container while loading the content inside.
See the example:

The inner div would be loaded with ajax, the outer one will have the expanding effect.

If you find a solution, please, share with us!

Quote from: sottwell at Aug 29, 2006, 10:51 PM

http://www.onjava.com/pub/a/onjava/2005/10/26/ajax-handling-bookmarks-and-back-button.html

Is there anyone trying this? Bookmarking is really the only thing missing here.

Quote from: kudolink at Feb 14, 2007, 04:35 AM

Mmmm... I don’t know. I’m not JS-savvy, I don’t know if it’s possible!
Eventually I’d try applying the effect on a container and using the link to load the content inside and with a onclick event on the same link I’d expand the container while loading the content inside.
See the example:

<div class="expandingContainer">
    <div class="ajaxLoadedContent">
        <p>Blah blah</p>
    </div>
</div>

The inner div would be loaded with ajax, the outer one will have the expanding effect.

If you find a solution, please, share with us!

I tryed, but it acts exactly the same as if I do the effect in the inner DIV. It’s better for you to have an idea going to http://ds.supr.com.br/ and clicking on any links above (Ação, Aventura, Corrida, Esporte, so on)... you can notice that the effect happens, but the image loading goes away too fast and makes it all very weird.

I’m going to test a few things out and I’ll let you know.

Mmm... I think the JS way to do this is to add the switch of the expansion to the last action of the Ajax call, when it inserts the content in the html (I don’t remember if it uses "innerhtml()"or other method) you can fire the function to change the height of the box.

BTW I like the site.

Quote from: kudolink at Feb 14, 2007, 10:54 AM

Mmm... I think the JS way to do this is to add the switch of the expansion to the last action of the Ajax call, when it inserts the content in the html (I don’t remember if it uses "innerhtml()"or other method) you can fire the function to change the height of the box.

I’m going to try, but I don’t expect doing it soon...
Quote from: kudolink at Feb 14, 2007, 10:54 AM

BTW I like the site.

Thanks! It’s under development.


Now I figured something out about the "history" problem and back buttom function in browsers. I did something really basic and worked. You only need to insert onclick="document.location=’LINK’" in your links. In my case, using Wayfinder to build my menus, I did this: onclick="document.location=’[+wf.link+]’". So my final chunk "cssplay_row" went like this:



Now my users can history.back their actions and even bookmark the pages correctly. And it works with my smart friendly URLs. How’s that? ;-)


[red]EDIT: Well, after running some tests, the problem about it is... the page is, in fact, reloaded. What a shame... my internet link here at work made me not notice that, but it’s true: the div shows the waiting image, then the page reloads. It’s good for nothing. Any ideas?

Does your script also update divs which have menu or breadcrumb snippets or does it only update the ’content’ div?

Wouter

Hi,

Thank you very very very....... very much.
it is what i looked for it EXACTLY.
i use it in 0.9.5 and it works well.

REGARDS
AHHP

I think solving problems with "history & back" issue and release it as a complete tutorial on wiki will be more useful for all ajax sites.


Thanks
AHHP