Eform ajax?

is it possible (beside iframe) to have a eForm on a page, the page isn't being refreshed after submitting the form?

Yes, you can put eForm in another resource and use that resource's URL as the AJAX request processor. All you need in the actual page to be displayed is a container (like a div) for the AJAX to load the eForm's return.

In fact, if you put the eForm in a regular resource, JQuery's AJAX library lets you specify the DOM container to fetch the request results from, so you can use the eForm resource as a fallback link in the case of javascript not being enabled.

Hi Susan,

Somehow i thought you would reply on this hehe,

I did wrote a threat from u, I haven't tried it yet, but i think thats something different than what i want to accomplish. https://forums.modx.com/index.php?topic=43476.0

It's a bit hard to understand how to work with ajax for me.

With AJAX, you are requesting a "page" just like any URL you enter into your browser address bar, or click a link or button. You can also send POST or GET data, again just like a URL (GET) or submitting a form, specifying the method as a form attribute. The only difference from a usual link or form submission is that the server's response is caught by the javascript and inserted into the DOM container specified, instead of loading the server's response as a new page.

With eForm, you can have the form on a page, fill out the fields, submit the form (click the Submit button) and your browser sends a request for the URL in the form's "action" attribute, sending on the field data as either POST or GET (tacked on to the action attribute's URL). The server (with eForm doing the form processing) sends the response, and your browser loads the response into a new page.

You can use the exact same MODx resource as the AJAX processor. MODx doesn't care who requested the page with the eForm snippet on it, nor does the server. Was it the normal browser form submission, or a Javascript request (AJAX)? They don't care, they just process the request with its GET or POST values and send it back. It's up to your javascript (AJAX) response handler to deal with the returned stuff. The JQuery library can parse the completed returned page and pick out the part that you tell it you want, i. e. a div container with the eForm snippet's output, and load just that part of the returned page into the container you told it to use.

You can also use a MODx resource with no template and no other content than the eForm snippet, but the JQuery AJAX library can pick out just the part you want from a complete page, so that makes it easy to deal with a case of no javascript enabled; the same page will be returned and loaded normally on a form submit.

Thank u for your explanation, really have to look to some tuts how to trigger it. Ajax can be very usefull.

http://www.jquerytools.org/demos/overlay/external.html

The trigger is this line using the load() function; that is the AJAX request all wrapped up pretty for you.



It basically loads whatever "href" returns into the wrap element, when the getTrigger event is ...er, triggered (in this case, a elements with a rel = overlay attribute). The href attribute of the trigger "a" element is used as the AJAX request URL; in our case it would be to the MODx-generated page containing the eForm snippet.
[ed. note: sottwell last edited this post 14 years, 1 month ago.]