Cakephp: Saving a Form via Ajax

Question

i have a User Module where users can set their status message (tweet) from the profile page.

When some one clicks Share it should go to an action and save the status message. I am not sure how to do this in CakePHP.

I would wnna use jQuery. If you can point me to the right document. it would be of great help

I am new to Ajax.

Answer 1

Forms are submitted via ajax in exactly the same way they might be without CakePHP. If it's me, Here's what I'd do...

In my view:

<?php echo $this->Html->script( 
  array( 'vendors/jquery.min', 'customjs' )
  , array( 'inline' => false, 'once' => true ) 
) ?>

<?php echo $this->Form->create( ... ) ?>
  ... your form content here ...
<?php echo $this->Form->end( 'Share' ) ?>

In a custom Javascript file (/js/custom.js):

$(function() {
  $('#your-form' ).submit( function() {
    // make your ajax call
    $.post( ... );

    return false; // prevent a new request
  });
});

Finally, create a new controller and/or action to handle the URL being requested by your ajax call. Those are just the highlights, of course, but they illustrate the key distribution of concerns:

1. Include the necessary JS files so your view has access to them.
2. Attach the submit event handler on document.ready (not inline)
3. Prevent the form from performing its regularly scheduled submit after the ajax call by returning false from the event handler.

Hope that helps.

Answer 2

CakePHP has a Js Helper which uses the JQuery library by default. The method you are looking for is the submit() method.

An example usage would be:

    <?php echo $form->create('Tweet'); ?>
    <!-- form elements -->
    <?php echo $this->Js->submit('Share',
                                array(
                                    'update' => '#content'
                                )
                            ); ?>

The contents of the element #content would be changed with the HTML returned from the controller.

In the action where the ajax form will be submitted, add() in the example above, you might want to change the layout to ajax whenever an ajax request is detected. You could do this using the isAjax() method and the controller's $layout attribute.