Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Form Questions /

Searching Ajax form help...


Reply


5 Posts   3348 Views

Avatar
__fabrice

Community Member, 32 Posts

3 May 2009 at 9:45am

Edited: 03/05/2009 9:55am

Hi everybody,

I'm a new(bie) ;), in SilverStripe, and I like it :).

So, ..., i'm searching help, or a simple tutorial on ajax, and Form.

I do an ContactPage_Controller class :

function ContactForm() {
...
// Create actions
      $actions = new FieldSet(
      new FormAction('doContactForm', 'Submit')
      );
...

}

function doContactForm($data, $form) {

...
$objEmail = new Email($from, $to, $subject, $body);
if ($objEmail->send()){
// your form actions
   FormResponse::update_dom_id('ContactForm', 'Email has been sent...');
   FormResponse::status_message('responseForm', 'It works !');

   // will automatically show the status-message if called by ajax, or redirect on a normal HTTP-request
   return FormResponse::respond();
}
}

So, in the doContactForm function, i want to display a message (in a <div>) if the email is succefully sending, or not. All this, in Ajax...
But i don't know how to do this..., and i don't understand how works FormResponse.

Anybody can help me ? :)

Regards,
Fabrice

Avatar
Sean

Forum Moderator, 922 Posts

3 May 2009 at 3:21pm

FormResponse::update_dom_id('ContactForm', 'Email has been sent...');

That should've already done the trick. Just change "ContactForm" to an ID of a div of your choice.

Sean

Avatar
__fabrice

Community Member, 32 Posts

3 May 2009 at 9:35pm

Hi,

No, it isn't works fine... 'cause I think I must create an ajaxForm instead of a Form 'classic'... No ?

Fabrice

Avatar
jhirm

Community Member, 21 Posts

14 May 2009 at 8:04pm

Edited: 14/05/2009 8:07pm

The easiest way that I've found to get AJAX working with forms in SS is to use the jquery form plugin. In the init() function of your controller, add:

Requirements::block('jsparty/prototype.js');
Requirements::javascript('jsparty/jquery/jquery.js');
Requirements::javascript("jsparty/jquery/plugins/form/jquery.form.js");

Now you have the form plugin functions at your fingertips. You don't have to change the Form() function in your controller at all (or any of the functions that you're using to create forms) - jquery will handle it all. You should take a look at the jquery form plugin docs and sample code:

[url]http://malsup.com/jquery/form/#getting-started[/url]

The basic idea is that you'll also include (i.e. Requirements::javascript(...) in the init()) another file that contains the custom ajax behaviors for your particular case. The syntax is very simple, using the jquery form plugin. It might look something like this:

$(document).ready(function() {
var options = {
target: '#FormContainer', // target element(s) to be updated with server response
beforeSubmit: showLoading, // pre-submit callback
success: showResponse, // post-submit callback

// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit

// $.ajax options can be used here too, for example:
//timeout: 3000
};
$('#Form_Form').ajaxForm(options);
});

function showLoading(formData, jqForm, options) {
   $("#FormStatus").html("Loading...");
}

function showResponse(formData, jqForm, options) {
   $("#FormStatus").html("The first step has been saved. Please continue:");
}

By default the .ajaxForm() function will send all the form fields to the action defined by the form, in other words the $action you passed to the Form() in your controller. All of the form data can be accessed by your controller via a single parameter, so your action might look like this:

function doForm($params) {
   //for example, if one of the form fields was FirstName
   $member = new Member();
   $member->FirstName = $params["FirstName"];
   if($member->write()) {
      if(Director->is_ajax()) {
         return "Thanks, you've completed the form!";
      } else {
         return Array(); //returns the normal template - you could do something else here.
      }         
   }
   return Array("Title"=>"Error", "Content"=>"Houston, we have a problem saving the member.", "Form"=>"");
}

Ok? So if the action has been called via ajax, whatever value gets returned will be displayed in the DOM element you specified in your options in the javascript (the 'target' option).

I do wish the documentation for ajax use in SS was a bit better... for that matter, I wish there were Javascript/AJAX helper classes in the SilverStripe core that would eliminate some of the actual javascript one needed to write (like the symfony framework, for instance). Until then, this method seems to work well for handling form data with AJAX. Good luck!

Avatar
__fabrice

Community Member, 32 Posts

15 May 2009 at 8:55am

Hi,

thanks a lot for your message :). I try your example and I tell you back if it's work fine.

see ya,

Fabrice