jquery form plugin and cakephp submit problem.

Question

I have the following form in cakephp:

<div class="quickcontactDisplay">
<?php
    echo $form->create('Enquiry',array('action'=>'add','class'=>'quickcontact'));
    echo $form->hidden('visitor_id', array('value' => $visitor));       
    echo $form->input('name');
    echo $form->input('emailAddress',array('size' => 30));
    echo $form->input('enquiry');
    echo $form->end('Ok, I\'m done'); 
?>
</div>

As you can see, its wrapped in a div with class .quickcontactDisplay.

On submit, it goes to the add action of my enquiries controller and it does this via ajax, using the jQuery form plugin. Heres my jQuery:

$(document).ready(function(){           

    // bind 'quickcontact' and provide a simple callback function 
   $('form.quickcontact').ajaxForm(function(html) { 
        //updates the .quickcontactDisplay div with the action output.
     $('.quickcontactDisplay').html(html);
    }); 
});

The actual action of the enquiries controller doesn't do a fat lot at this point, apart from throw back the built in validation messages set in my model. Heres the code anyway:

function add() {
     $this->set('visitor', $this->Session->read("visitor"));
     if (!empty($this->data)) 
      {
       $this->Enquiry->create();
       if ($this->Enquiry->save($this->data)) 
       {
        //echo 'success';
        $this->layout = 'ajax';
       } 
       else 
       {
        //echo 'fail';
        $this->layout = 'ajax';
       }
      }
    }

My Problem:

When I submit the form, it updates my div with the error messages, and everything seems fine. However, when I submit it AGAIN, it doesn't trigger the ajax call and just submits directly to the action, resulting in a page containing just the action output html.

Heres what the action returns: Just the empty form and validation messages: ( I thought it was time for a pastebin as its getting a bit long-winded )

http://pastebin.com/m57401b13

It seems that when the form contained within the .quickcontactDisplay div is updated via ajax, it breaks the ajax bind, and doesn't kick in again. Can anyone see what could be happening here? Thanks.

Answer 1

You are right. By replacing the div with the form in it, any handlers that are bound to the old content are lost.

Look at jQuery's new live() function, which binds current and future matches to an event.

Alternatively, just re-apply the binding once the new HTML has been inserted into the DOM. eg

$(document).ready(function(){                                              

    function handleStuff(html)
    {
        //updates the .quickcontactDisplay div with the action output.
        $('.quickcontactDisplay').html(html);

        // re-do the form, as it has just been replaced
        $('form.quickcontact').ajaxForm(handleStuff);
    }

    // bind 'quickcontact' and provide a simple callback function 
    $('form.quickcontact').ajaxForm(handleStuff);
});

not tested this, but hopefully it will help.