cakephp 2 ajax form

Question

I'm having trouble building an ajax form in cakephp 2 which obviously has changed a lot since 1.3.

I'm using the following code:

<div id="commentForm">
<div id="commentStatus"></div>
<?php
echo $this->Form->create('Comment', array('action' => 'save', 'default' => false));
echo $this->Form->input('Comment.comments_name');
echo $this->Form->input('Comment.comments_email');
echo $this->Form->input('Comment.comments_text');
echo $this->Js->submit('Save', array('update' => '#commentStatus'));
echo $this->Form->end();
?>

However the form is not submitted when pressing the button.

I will be thankful for any help!

Thanks!

I don't know if it is relevant, but do you close the div #commentForm — laxris, Apr 17 '12 at 20:00

score 11 · Answer 1 · answered Apr 18 '12 at 05:55

Try this in your view file:

<?php

    $data = $this->Js->get('#CommentSaveForm')->serializeForm(array('isForm' => true, 'inline' => true));
    $this->Js->get('#CommentSaveForm')->event(
          'submit',
          $this->Js->request(
            array('action' => 'save'),
            array(
                    'update' => '#commentStatus',
                    'data' => $data,
                    'async' => true,    
                    'dataExpression'=>true,
                    'method' => 'POST'
                )
            )
        );
    echo $this->Form->create('Comment', array('action' => 'save', 'default' => false));
    echo $this->Form->input('Comment.comments_name');
    echo $this->Form->input('Comment.comments_email');
    echo $this->Form->input('Comment.comments_text');
    echo $this->Form->end(__('Submit'));
    echo $this->Js->writeBuffer();

?>

NOTE: #CommentSaveForm is ID generated by CakePHP, If you have your own then use that

its working.. thanks.. but when ajax request is in process i want to show the loading image .. can you tell me how to display it ? — deck john, Nov 23 '12 at 06:34

score 2 · Answer 2 · edited May 17 '13 at 09:39

You want to show the loading image, use 'before' and 'complete' in $this->Js->request():

<?php
    $this->Js->request(array('action' => 'save'), array(
       'update' => '#commentStatus',
       'data' => $data,
       'async' => true,    
       'dataExpression' => true,
       'method' => 'POST',
       'before' => "$('#loading').fadeIn();",
       'complete' => "$('#loading').fadeOut();",
   ));
?>

cakephp 2 ajax form

2 Answers2

Linked