Tutorial – CakePHP Ajax “Quick Save” with jQuery

When you are in an administration panel, sometimes you want a “quick save” feature that allows you to save without leaving the page.Here is how to accomplish this with CakePHP and jQuery.

To start, download jQuery and the jQuery Form Plugin JavaScript . Include them in your view with the JavaScript helper:

$javascript->link(array('jquery', 'form'), false);

Include the RequestHandler in your controller detect an Ajax save attempt.Also include the JavaScript helper if you haven’t already.

var $helpers = array('Javascript'); 
var $components = array('RequestHandler');

Next we want to override our save function with the ajax quick save.Put this right before your $this->Model->save($this->data) in your save action.

if ($this->RequestHandler->isAjax()) { 
  if ($this->Article->save($this->data)) { 
    echo 'success'; 
  } 
  Configure::write('debug', 0); 
  $this->autoRender = false;
  exit(); 
}

This detects if the request is ajax, then saves the data. Then it sends back a simple, “success” message to let you know things went fine. It also writes debug to 0 and doesn’t render anything, then exits.

Lastly, lets create and include a JavaScript file that performs the quick save.

jQuery(function($){ 
  $('<input type="button"value="Quick Save"/>') 
    .click(function(){ 
      $(this).parents("form:first").ajaxSubmit({ 
        success: function(responseText, responseCode) { 
          $('#ajax-save-message').hide().html(responseText).fadeIn(); 
          setTimeout(function(){ 
            $('#ajax-save-message').fadeOut(); 
          }, 5000); 
        } 
      }); 
      return false; 
    }) 
    .appendTo('form div.submit'); 
});

This adds a button called, “Quick Save” to each form on the page where a div with class="submit" exists (you may want to switch this to the id of the form you want to add quick save to). Then It also attaches a click event to the button that submits the form via the jQuery Form Plugin.

In a few simple steps, we’ve created a quick save feature that saves your data whenever you want without leaving the page.

Comments

  1. says

    Thanks for this tutorial, it’s realy usefull.
    But, for work, i need to create a div with id ajax-save-message in my page, for print the success message, and i comment the Configure::write(‘debug’, 0); and set autoRender to TRUE.
    With this, the message are show.

  2. says

    Hello,

    There seems to be a problem if we use the Security component.
    Indeed, the use of this component, the hidden fields (hidden type) are not properly transmitted vision controller, and instead of saving it creates a new record in the table.

    With the Security component, the id field of the page (or section) is transmitted like this if we use $ form-> hidden ( ‘Page.id’):
    data [_Page] [id]
    Note the underscore before Page.

    To solve the problem temporarily, you must write the hard-hidden field, such as:

  3. says

    Additionally, there is a problem using ajaxSubmit in relation to receiving back the response “Length Required”. It seems there’s a 411 error that’s returned sometimes. This problem can be fixed by using a GET request instead, but there are times where that doesn’t suffice (like when you have a lot of data to submit, the URL gets too long and borks).

    So, as much as I’d love to use this method, it seems that until the 411 error code that gets returned is fixed either by CakePHP or by allowing us to send a Content-Length header through the JQuery request, we may be forced to use some other methodology.

    Unfortunately, I don’t have a solution quite yet, but I’ve heard that .ajax() can work if you include a blank data{} variable. We’ll see.

    I hope this helps someone else looking for a solution to this problem.

  4. Edmond says

    Hi nice piece of code!
    but I have a problem implementing it.
    The quick save button doesnt do anything and firebug gives the error
    $(this).parents(“form:first”).ajaxSubmit isn’t a function
    Any help on this?

  5. Dave Miller says

    Thanks Marc! Works well for me.

    On the off off chance that someone is trying to use this technique with a form containing a text field that contains FCKedit (hey, you never know!) you have to tell FCKEdit to spit out it’s current contents before you submit. If your FCKedit text field model.field is, say, Post.message, then your quicksave.js would be:

    jQuery(function($){
      $('<input type="button" value="Quick Save" />')
      .click(function(){
        FCKeditorAPI['Instances']['data[Post][message]'].UpdateLinkedField();
        $(this).parents("form:first").ajaxSubmit({
          success: function(responseText, responseCode) {
            $('#ajax-save-message').hide().html(responseText).fadeIn();
            setTimeout(function(){
              $('#ajax-save-message').fadeOut();
              }, 5000);
            }
          });
        return false;
      })
      .appendTo('form div.submit');
    }); 

  6. says

    Hi …

    So, using the line below:

    if ($this->RequestHandler->isAjax()) {
    echo “success”
    }

    I assume that this will only return true if the request is via ajax request. If the user does not have JS enabled, say, you were using this on a public facing contact form etc, then would the normal action take place, and the regular view be displayed … does that make sense?

  7. says

    Thanks very much, Marc. I currently learning about Cake via books etc, and have just read about the Ajax helper. The examples did not show any way to process the request if JS was not in use. The author was using:
    $this->render(‘blah’, ‘ajax’);

    And I was looking for a way to safe guard against no-js users/version so thanks very much.

  8. says

    Following up from my last comment…

    I decided to split my action function into two: ajax and non_ajax.

  9. nikolay says

    hi,

    can you help me where i can find jQuery Form Plugin JavaScript, mentioned above? current link is dead…

  10. says

    Great tutorial, I had this working at one point but it seems something in the success response text is causing cakephp to throw warning notices about missing controllers.

    The ajax message goes away after the 5000ms in firefox and the form goes back to normal, however chrome just stops. I’ll see what happens when I turn the cakephp debug level down to 0. Any idea what could be happening?

  11. says

    It turns out i forgot to correctly name the form action in my view!
    < ?php echo $form->create(‘Article’,array(‘action’ => ‘addquick’) );
    ?>

  12. Ravi Panchumarthy says

    Thanks. Really cool plugin, much better than the inbuilt cakephp ajaxsubmit !

  13. Angelica says

    Hello. I’ve been trying to solve the issue of FCKedit, but it has not fully functioned.

    I created my editor as follows:* echo $fck-> load (‘ParametroValor’)*.

    In the js function I have included the line: *FCKeditorAPI [‘ParametroValor’][‘data[parameter] [value]’].UpdateLinkedField ();
    *
    This value is correctly stored textArea (I’m happy about that), but the error console shows me “FCKeditorApi” is not defined, and additionally other actions that follow this instruction do not execute well.

    Could guide me on what I should do?

    I thank you very much.

  14. saddam hossain says

    Hello. I?ve been trying to solve the issue of FCKedit, but it has not fully functioned.

    I created my editor as follows:* echo $fck? load (?ParametroValor?)*.

    In the js function I have included the line: *FCKeditorAPI [?ParametroValor?][?data[User] [presentaddress]?].UpdateLinkedField ();
    *
    This value is correctly stored textArea (I?m happy about that), but the error console shows me ?FCKeditorApi? is not defined, and additionally other actions that follow this instruction do not execute well.

    Could guide me on what I should do?

    I thank you very much.

  15. says

    this is frikkin awesome !

    love cakephp .. coppieee !

    go team people who made this thing, and also you for writing a swoit tutorial nice one brutha

  16. says

    Took me time to read all the comments, but I really enjoyed the article.
    It proved to be very helpful to me and I am sure to all the commenters
    here! It’s always nice when you can not only be informed, but also
    entertained!

  17. says

    awesome!!!

    I wanted to use this all the time instead of adding a quick submit button, so I changed the code as follows, works great. Thanks for sharing

    $("#YourFormName").click(function(){
          $(this).ajaxSubmit({ 
            success: function(responseText, responseCode) { 
              $('#ajax-save-message').hide().html(responseText).fadeIn(); 
              setTimeout(function(){ 
                $('#ajax-save-message').fadeOut(); 
              }, 5000); 
            } 
          }); 
          return false; 
        }) 

  18. says

    Ugh. yeah that was working but it was making the whole form a click, such a noob. Anyway, I got it to work by removing my submit button and using this code to insert the button into the submit div, and then all well!

  19. Leo says

    Hi,

    everything clear, but still I am having error with the following linw
    $javascript->link(array(?jquery?, ?form?), false);

    where exactly I should put it in my view?

  20. says

    Great! Works for me, thanks!
    I am using tinyMce in my fields. It doesn’t work for those fields if I don’t send the data back to the form before submitting. To solve the problem, just add this in the click function, before the ajax query :

    tinyMCE.triggerSave();

  21. says

    I’m follow all your steps, and it’s work, but it’s just save the empty data instead the data I entered. I’m using CKeditor. Does it work with Ckeditor? What can I sold my problem? thank you

  22. says

    I sold my problem, but now, I have a question about how to update the post instead of saving it, I mean the first time we save it and after update this post?