Jump to:

22975 Posts in 11620 Topics by 2826 members

General Questions

SilverStripe Forums » General Questions » Wanted! Simple Ajax Form Example/Tutorial

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Page: 1
Go to End
Author Topic: 8152 Views
  • b0bro
    Avatar
    Community Member
    38 Posts

    Wanted! Simple Ajax Form Example/Tutorial Link to this post

    I have been pulling my hair out trying to get ajax working on ss. There seems to be very little documentation on it and what I do find seems to be as usefull as tits on a bull.

    Can some one please please explain to me the step by step instructions to get one simple text box in a form to submit and display a thankyou message to a div on the same page. ALL with ajax. You will be forever my hero!

  • ChrisBryer
    Avatar
    Community Member
    95 Posts

    Re: Wanted! Simple Ajax Form Example/Tutorial Link to this post

    not sure if this helps, but the examples here seemed to work and got me started off with ajax flawlessly:

    http://doc.silverstripe.org/doku.php?id=recipes:ajax_basics

  • b0bro
    Avatar
    Community Member
    38 Posts

    Re: Wanted! Simple Ajax Form Example/Tutorial Link to this post

    Hi Chris,

    Yeah i did find that page but it seems no help to me in relation to get a form to submit via ajax. No examples no mention of a form!! Frustrating. I've even had a go at duplicating the post comment code. Im really missing something cos it aint working.

    Could you please post some working code for me to have a play with?

  • juandavidgc
    Avatar
    Community Member
    36 Posts

    Re: Wanted! Simple Ajax Form Example/Tutorial Link to this post

    Hey! this is an example ( no the best, but work for me - )

    First, you need to put your form in the ss file, for example page.ss

    <form action="home/processForm" method="post" class="AjaxForm">
    <fieldset class="message" style="display: none">
    </fieldset>
    <fieldset>
    <label for"Email">Email</label>
    <input type="text" name="Email" id="Email" />
    </fieldset>
    <fieldset>
    <inpút type="submit" value="Send" />
    </fieldset>
    </form>

    Then, you put the JS in the page.ss or in a js file, (I work with Jquery, so you need to call the Jquery file first):

    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery("form.AjaxForm").submit(function(){
    jQuery.ajax({
    type: "POST",
    url: jQuery(this).attr("action"),
    data: jQUery(this).serialize(),
    success: function(data){
    jQuery(this).find(".message").html("The data was submited. Thanks! " + data);
    }
    });
    return false;
    });
    });
    </script>

    Finally, you need to put a funcition processForm in Page.php:

    function processForm()
    {
    //process the form
    }

    This is not the best way to do that, but as i said this works form me

    Good luck!

  • lanks
    Avatar
    Community Member
    61 Posts

    Re: Wanted! Simple Ajax Form Example/Tutorial Link to this post

    Hi Juan

    I too am trying to get an ajax for working in SS. Have tried your code without success so far. I put the javscript and form in the body of my page and the function in to the page_controller.
    I also called the jquery file using:

    Requirements::javascript("jsparty/jquery/jquery.js");

    When I hit the send button on the form it is just going to a url containing "/home/processForm" displaying a blank page. I haven't put any code in the processform function so I think this may be the problem? Or do you think that it is just no running the jquery code in the page.
    Any help would be much appreciated.

    Thanks
    Liam

  • yurigoul
    Avatar
    Community Member
    202 Posts

    Re: Wanted! Simple Ajax Form Example/Tutorial Link to this post

    I do not use the Requirements::etc thing for several reasons, one of them that you can not control where it exactly appears in your code.

    The other thing is that you have to tell jQuery to use jQuery() instead of $()

    I use this code in my head:

    <script type="text/javascript" src="jsparty/jquery/jquery-packed.js"></script>

       <script type="text/javascript">
          jQuery.noConflict();
       </script>

    <!-- YOUR JQUERY EXTENSIONS/PLUGINS -->

    <script type="text/javascript">
    jQuery(document).ready(function(){

    ETC...

  • carlos
    Avatar
    Community Member
    41 Posts

    Re: Wanted! Simple Ajax Form Example/Tutorial Link to this post

    Hi b0bro,

    The 'right' way to create forms in SS is in your page controller, don't do it in the template.

    Step 1, create the form in your page controller

    Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js'); (don't forget to call jquery, I'm using SS 2.4, we will need to change the path)
    Requirements::javascript("themes/blackcandy/javascript/coolform.js"); my js
    function CoolForm() {
          $fields = new FieldSet(
             new TextField('yourName', 'Your Name:')
          );

          $actions = new FieldSet(
             new FormAction('MyName', 'name') //maybe you will nedd to create a dummy function 'MyName', it wont do anything tho
          );

          $form = new Form($this, 'CoolForm', $fields, $actions);
          $form->forAjaxTemplate();
          return $form;
       }

    step 2. create the js

    (function($) {
       $(document).ready(function() {
          $("#Form_CoolForm").submit(function(){
             $('#result').load('CoolController', {values: $(this).serialize()});
             return false;
          });
       });
    })(jQuery);

    step 3 create the controller to get receive values from the JS and display them in the page
    class CoolController extends Controller {
       
       function index(){
          Debug::dump($this->requestParams);
          echo $this->requestParams['values'];
       }
       
       
    }

    and last step, create the div in your page template <div id="result"></div>

  • lanks
    Avatar
    Community Member
    61 Posts

    Re: Wanted! Simple Ajax Form Example/Tutorial Link to this post

    Hi carlos
    Thank you for showing how to use Ajax with a form. I have successfully got your code to work however I am wanting to use a function to return dataobjects which is the forms action. I am not quite sure what the index function does in the controller. However would you please be able to show me how I can get this function to work in the controller and display it in the template upon the form being submitted, the form is a drop down field.

    public function CodeSnippetsforform($data, $form) {
    if(!isset($_GET['start']) || !is_numeric($_GET['start']) || (int)$_GET['start'] < 1) $_GET['start'] = 0;
    $SQL_start = (int)$_GET['start'];
    $doSet = DataObject::get(
    $callerClass = "CodeSnippet",
    $filter = "`ParentID` = '".$this->ID."' AND `CodeSnippet_Classifications`.ClassificationID = ' ".$data['ID']."'",
    //$data['ID']
    $sort = "SnipDate DESC",
    $join = "LEFT JOIN `CodeSnippet_Classifications` ON `CodeSnippet`.ID = `CodeSnippet_Classifications`.CodeSnippetID",
    $limit = "{$SQL_start},5");
    return $doSet ? $doSet : false;
    }

    Thanks Liam

    8152 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.