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.

General Questions /

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

Wanted! Simple Ajax Form Example/Tutorial


Reply


8 Posts   9138 Views

Avatar
b0bro

Community Member, 38 Posts

11 November 2009 at 11:56pm

Edited: 11/11/2009 11:58pm

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!

Avatar
ChrisBryer

Community Member, 95 Posts

12 November 2009 at 3:15pm

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

Avatar
b0bro

Community Member, 38 Posts

12 November 2009 at 5:12pm

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?

Avatar
juandavidgc

Community Member, 36 Posts

13 November 2009 at 7:59am

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!

Avatar
lanks

Community Member, 61 Posts

4 February 2010 at 2:34pm

Edited: 04/02/2010 2:34pm

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

Avatar
yurigoul

Community Member, 202 Posts

4 February 2010 at 10:23pm

Edited: 04/02/2010 10:25pm

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

Avatar
carlos

Community Member, 41 Posts

5 February 2010 at 10:04am

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>

Avatar
lanks

Community Member, 61 Posts

7 February 2010 at 6:23pm

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