Action not running with CakePHP Js->submit() - ajax

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

Answer 3

I tried to use the same solution as you used but it's not working. Ajax is ok when I access it directly in the URL, and I have the impression that the click is doing nothing. When I use
<fieldset><legend><?php __(' Run 1');?></legend>
<div id="formUpdateID"><div id="#error-message"></div>
<?php
$orders=array_merge($emptyarray,$orders['r1']['Order']);
echo $this->Form->create('Order');
echo $this->Form->input('id', array('value'=>$orders['id'],'type' =>'hidden'));
echo $this->Form->input('race_id', array('value'=> $orders['race_id'],'type' =>'hidden'));
echo $this->Form->input('driver_id', array('value'=>$session->read('Auth.User.driver_id'),'type' =>'hidden'));
echo $this->Form->input('run', array('value'=>$run,'type' =>'hidden'));
echo $this->Form->input('pm', array('value'=>$orders['pm'],'error'=>$err[$run]));
echo $this->Form->input('pr', array('value'=>$orders['pr'],'error'=>$err[$run]));
echo $this->Form->input('fuel', array('value'=>$orders['fuel'],'error'=>$err[$run]));
echo $this->Form->input('pit', array('value'=>$orders['pit'],'label' => __('Pit on lap '),'error'=>$err[$run]));
echo $this->Form->input('tyre_type', array('value'=>$orders['tyre_type'],'error'=>$err[$run]));
echo $this->Js->submit('Modify', array(
'url' => array(
'controller' => 'orders',
'action' => 'ajax_edit'
),
'update' => '#error_message'
));
echo $this->Form->end();
?>
<?php pr($this->validationErrors); ?>
</div></fieldset>
in view and in controller "orders":
function ajax_edit($id=null){
$this->autoRender = false;
if($this->RequestHandler->isAjax()) {
die(debug('In Ajax'));
$this->layout = 'ajax';
debug('didn\'t validate logic');
}
echo 'hi';
}
None of the messages are displayed.
I have some hard coded JS/ajax before which is not targeting this code part.
I did copy ajax layout in th webroot/view folder.
I can see the AJAX code displayed in formatted source code
<div class="submit"><input id="submit-1697561504" type="submit" value="Modify" /></div> </form><script type="text/javascript">
//<![CDATA[
$(document).ready(function () {$("#submit-1697561504").bind("click", function (event) {$.ajax({data:$("#submit-1697561504").closest("form").serialize(), dataType:"html", success:function (data, textStatus) {$("#error_message").html(data);}, type:"post", url:"\/Webmastering\/form1C\/frame\/orders\/ajax_edit\/1"});
return false;});});
//]]>
</script>
BTW, I start getting bored of the lack of doc in cakephp and its non efficacity to realize task more complicated than just posting a post in a blog. So thank you for your help before I start destroying my computer ;)

Answer 4

I know it's an old topic, but I stumbled acros the same problem in my application, so now I think what Thrax was doing wrong, namely he didn't put echo $this->Js->writeBuffer(array('inline' => 'true')); in the view (or in the layout) file, like Logic Artist did, so the scripts for handling the submit button's click weren't generated.