Action not running with CakePHP Js->submit()

Question

I'm using CakePHP 1.3, and trying to make a simple message posting board with ajax. I'm trying to use the Js helper to submit a form on the index page, then refresh the message board's div to include the new message. This is all on a single page.

I have previously posted on this, but I wanted to rephrase the question and include some updates. The previous question can be seen here http://stackoverflow.com/questions/3901906/how-to-use-js-submit-in-cakephp

When I came back to this project after a couple days, I immediately tested and the form worked (sort of). Submitting the form added a message to the database (it didn't display the message, but I haven't attacked that part yet). It worked 2 times, adding 2 messages. Then I opened the controller file and commented out some debug code, and it stopped working. It appears the action is not being called.

Here is my messages_controller.php:

<?php

class MessagesController extends AppController {

 function index() {
  $messages = $this->Message->find('all');
  $this->set('messages',$messages);
 }

 function add() {

  $this->autoRender = false; 
  $this->Session->setFlash('Add action called');

  if($this->RequestHandler->isAjax()) {

   $this->Session->setFlash('Ajax request made');
   $this->layout = 'ajax';

   if(!empty($this->data)) {

    if($this->Message->save($this->data)) {

     $this->Session->setFlash('Your Message has been posted');
    }
   }
  }
 }


}

?>

Here is the index.ctp for my Message class

<div id="guestbook" class="section_box">

 <h3  id="toggle_guestbook"><div class="toggle_arrow"></div>Sign our Guestbook</h3>

 <?php

 echo $this->Form->create('Message');
 echo $this->Form->input('name', array('label' => 'From:'));
 echo $this->Form->input('text', array('label' => 'Message:'));     
 echo $this->Js->submit('Post Your Message', array(
  'url' => array(
   'controller' => 'messages',
   'action' => 'add'
  ),
  'update' => '#message_board'
 ));
 echo $this->Form->end();

 echo $this->Js->writeBuffer(array('inline' => 'true')); 
 ?>

 <div id="message_board">

  <?php foreach($messages as $message) { ?>

   <div class="message">

    <p class="message_txt">
     <?php echo $message['Message']['text']; ?>
    </p>

    <div>

     <div class="message_name">
      <?php echo $message['Message']['name']; ?>
     </div>

     <div class="message_date">
      <small>
       <?php echo $message['Message']['date']; ?>
      </small>
     </div>

    </div>

   </div>

  <?php } ?>

 </div>

</div>

When the submit button is clicked, I can see in the console that a POST is made to http://localhost/messages/add with the correct data. But there doesn't appear to be a response. The flash message "Add action called" is NOT set from the controller (or any of the flash messages, for that matter) and the contents of #message_board are emptied.

If I refresh the page at this point, the SECOND flash message appears ("Ajax request made"), and the contents of the #message_board are restored. However the new message was not saved, its the same 2 messages from before.

I'm stumped. I have a feeling maybe there are bigger issues causing my problem, but I can't see it. Any help would be appreciated.

Answer 1

But there doesn't appear to be a response ... and the contents of #message_board are emptied.

That is because you haven't set what action/view to render. You have to do this manually since you have $this->autoRender set to false. You could use render() to do this. More info can be found at its respective cookbook page.

If you have $this->autoRender set to true, then it'll replace the contents of #message_board with the contents of add.ctp

---

The flash message "Add action called" is NOT set from the controller (or any of the flash messages, for that matter)

I think you have to refresh the page or the part which contains the $this->Session->flash() bit for flash messages to appear.

The fact that the flash message appeared when you refreshed the page means that it did call and run the action.

AFAIK, you can only put/print one message from the flash key in the Messages array. The flash key is where the flash messages are stored by default. Each call to setFlash() will overwrite the flash message set by older calls.

Since only the second flash message was displayed, we could say that it failed at passing at least one of the conditions following the second call to setFlash() in the controller. You might want to put debug($this->data) statements near the conditions related to $this->data to help yourself in debugging your problem.

You could also use debug() to know if your application went through a certain action or path since it will almost always be displayed.

So you could do the following to check if it passed this condition:

    if(!empty($this->data)) {
        debug('Passed!');

If 'Passed!' will be printed after submitting the form, we would know that it passed that condition.

---

However the new message was not saved

It might be because $data is empty or it failed at validation. If your $data is not empty, it might have failed at validation and since your form doesn't display the validation errors; you might never have noticed them. One way to know if it passed validation is to do the following:

    $this->Message->set($this->data);

    if ($this->Message->validates()) {
        debug('it validated logic');
    } else {
        debug('didn't validate logic');
    }

Answer 2

Ramon's solutions worked for me. Here's the updated code.

Controller add function

function add() {

        $this->autoRender = false;  

        if($this->RequestHandler->isAjax()) {

            $this->layout = 'ajax';

            if(!empty($this->data)) {

                if ($this->Message->validates()) {

                    if($this->Message->save($this->data)) {

                         $this->render('/elements/message_board');
                    } else {

                      debug('didn\'t validate logic');
                    }
                }

            }
       }
}

Heres the add form view:

<?php

echo $this->Form->create('Message');
echo $this->Form->input('name', array('label' => 'From:'));
echo $this->Form->input('text', array('label' => 'Message:'));                  
echo $this->Js->submit('Post Your Message', array(
    'url' => array(
        'controller' => 'messages',
        'action' => 'add'
    ),
    'update' => '#message_board'
));
echo $this->Form->end();

echo $this->Js->writeBuffer(array('inline' => 'true')); 
?>
<?php pr($this->validationErrors); ?>

<div id="message_board">

    <?php echo $this->element('message_board'); ?>

</div>