Hi!
I was wondering how to use Ajax to call some data on a website without a page Reload. I was searching the Forum but only found posts from 2005...
I'd like to know how to make a "FormIt" or any other Form submission with Ajax to get a success message while the form was submitted successfully? All without Page reload?
I really have no clue where to start. Has anybody Modx tutorials with working Ajax examples? I know the Gallery Tutorial in the migx section, but it doesn't really makes clear how to start with the formit stuff....
thank you!
AD
-
☆ A M B ☆
- 24,524 Posts
Use a resource with no template as your back-end processor. Put the snippet you want to run in that resource. Use the URL to that resource in your AJAX request.
-
☆ A M B ☆
- 894 Posts
I'm actually working on doing this right now for my new site but I have resorted to do all the validation via JS and have the regular FormIt validation as a fallback for people with JS disabled.
@Susan can you elaborate what you mean? FormIt handles all the stuff so I am not using any snippet so I would like to know about your method to see if there is anything I can do better.
Thanks.
-
☆ A M B ☆
- 894 Posts
You need to use ajax success method in order to show the success message if the form was successfully submitted, you also need to prevetnDefault the submit buttons click function that way the page doesn't go to your success message page unless the user has JS disabled.
Something like this:
$.ajax({
type: "POST",
url: this.url,
data: form_data,
beforeSend: function() {
//show this while sending
},
error: function() {
//display error message here
},
success: function() {
//display success message here
},
complete: function() {
//do this after form is done submitting
}
});
Good luck.
-
☆ A M B ☆
- 24,524 Posts
Actually it's very easy to implement AJAX in MODx.
1. Create a snippet to generate whatever output you want to load with your AJAX request, if you need back-end PHP processing. It goes on a resource with no template. Or, if you're using JQuery's load() function, have the desired output in a specific HTML element; the load() function takes a parameter to indicate which HTML element you want to insert. So you can use one resource to handle a number of AJAX requests.
2. Use that resource's URL as the AJAX request's URL.
That's all, as far as MODx is concerned. Creating the triggers and setting up the structure is up to the developer.
-
☆ A M B ☆
- 894 Posts
@Susan Yeah the problem with that is that FormIt handles the error/success messages and these don't exist until you refresh the page since MODX needs to parse them.
From the sound of it, it seems in order to use Ajax with MODX to submit forms you would need to create a custom validation snippet thus negating the use of FormIt or end up doing all the validation in JS and use the FormIt validation as a fallback for users with JS disabled.
I'm very sure, its possible to let formit, may be wrapped in a custom-snippet do the validation on the ajax-page and return a success- or error- json-responce.
you can use the formit-placeholders to fill-out the json-response.
