AJAX not mating up with Codeigniter Controller

Question

I am learning AJAX and have borrowed a script from NETTUTS Codeigniter from Scratch: AJAX The script itself works perfectly as adapted to my form, however it is not updating the database per the controller. Firebug says the post went fine from the AJAX script. I guess my question is, how and where am I failing to start the controller?

The form_open script

echo form_open('contacts/entry', $form);

Ajax script(there is validation script above what I am showing that works fine)

 var form_data = {
    fname: $('#fname').val(),
    lname: $('#lname').val(),
    email: $('#email').val(),
    phone: $('#phone').val(),
    relate: $('#relate').val(),
    ajax: '1'
};

$.ajax({
    url: "<?php echo site_url('contacts/entry'); ?>",
    type: 'POST',
    data: 'form_data',
    success: function() {
        $('#status').text('Update successful!'); 
    }
});

return false;   

});

Note that I have included "AJAX: 1" in the form_data
The controller

function entry()
{
   if ($this->input->post('ajax')) {  
   $data = array
           (
           'fname' => $this->input->post('fname'),
           'lname' => $this->input->post('lname'),
           'email' => $this->input->post('email'),
           'phone' => $this->input->post('phone'),
           'relate' => $this->input->post('relate'),
           );

   //removed validation set rules to shorten the question

   if ($this->form_validation->run() == TRUE)
   {
    $this->db->insert('contacts', $data);   
    $this->index();    
   } else
   {
    $this->index();
   }       
} 
}

Is the use of "if ($this->input->post('ajax'))" the right way to initiate the controller? Without the jquery the form works fine by itself and does run the controller. So I know the two individual pieces work, they just are not meshing. Thanks

Answer 1

First of all I'll delete the var form_data { ajax: '1' } and use something like this:

if($this->input->server('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest')
{
    // This is AJAX
}
else {
    // This is standard HTTP
}

A nice way to handle this if is to use a MY_Controller. If you use it, add a function like this:

protected function is_ajax() {
    return ($this->input->server('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest') ? TRUE : FALSE;
}

And you can use:

if($this->is_ajax())
{
    // This is AJAX
}
else {
    // This is HTTP
}

Then you've to echo the results to pass it to the actual view and handle the operation. Like this:

if ($this->form_validation->run() == TRUE)
{
    // Tip: you've to do the data management on MODELS
    $action = $this->db->insert('contacts', $data);

    // With this method you can handle AJAX and HTTP on the same
    // validation. If is AJAX you print, if not you redirect.
    if($this->is_ajax())
        echo $action;
    else {
        // if worked, redirect the user to the success 
        // else send it to the form error
        if($action)
            redirect("form_success");
        else
            redirect("form_error");
    }
else {
    if($this->is_ajax())
        echo false;
    else {
        $this->load->view("error_form");
    }
}

And you've to correct you jQuery code to handle the operation:

$.ajax({
    url: "<?php echo site_url('contacts/entry'); ?>",
    type: 'POST',
    data: form_data, // Like said jondavidjohn
    success: function(data) {
        if(data)
        {
            $('#status').text('Update successful!');
        } else {
            $('#status').text('Operation failed!');
        } 
    }
});

Answer 2

you're posting the string 'form_data' instead of the variable form_data , remove the quotes around form_data and try again.

$.ajax({
    url: "<?php echo site_url('contacts/entry'); ?>",
    type: 'POST',
    data: form_data,    // <-- previously you had data: 'form_data', which would pass the string 'form_data', not the variable.
    success: function() {
        $('#status').text('Update successful!'); 
    }
});

I would also echo the result of your db operation and then use the returned data to test if the db operation completed successfull.

php/CI

...
echo $this->db->insert('contacts',$data);
...

jQuery/AJAX

...
success: function(data) {
    if(data) {
        //alert success
    }
    else {
        //alert failure
    }
}