Jump to:

2011 Posts in 1436 Topics by 620 members

Form Questions

SilverStripe Forums » Form Questions » Searching Ajax form help...

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 3290 Views
  • __fabrice
    Avatar
    Community Member
    32 Posts

    Searching Ajax form help... Link to this post

    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

  • Sean
    Avatar
    Forum Moderator
    921 Posts

    Re: Searching Ajax form help... Link to this post

    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

  • __fabrice
    Avatar
    Community Member
    32 Posts

    Re: Searching Ajax form help... Link to this post

    Hi,

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

    Fabrice

  • jhirm
    Avatar
    Community Member
    21 Posts

    Re: Searching Ajax form help... Link to this post

    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:

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

    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!

  • __fabrice
    Avatar
    Community Member
    32 Posts

    Re: Searching Ajax form help... Link to this post

    Hi,

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

    see ya,

    Fabrice

    3290 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.