CodeIgniter + jQuery .ajax form submit return results in a table row

Question

Hello

I think it should be fairly easy, I simply can not find an answer for it.

I am using a Codeigniter for a simple CRUD application. It displays the result in table. What I did, was to use jQuery .ajax to submit the form. It works (almost) perfectly.

I am able to submit a form without reload but the results are not shown unless I reload the page. For now I use location.reload(); but it does not make sense, after all my intentions were not to reload the page.

I know I should echo the data back, but have no idea how to do it with CI.

Some insides:

jQuery part

$("#add_form").submit(function(e) {
    e.preventDefault();
    var dataString = $("#add_form").serialize();
    $.ajax({
        type: "POST",
        url: "add",
        data: dataString,
        success: function() {
            $("#lightbox").fadeIn(300).delay(1000).fadeOut(300);
            $("#notification-box").show();
            $("#notification-box").html('<p>Saving</p>');
        $("#addrow").hide();

        location.reload();
        }

    });
});

controller part

function add()
{
    if(!$this->ion_auth->logged_in())
    {
        redirect('auth/login', 'refresh');
    }else
    {
        // User ID
        $user_data = $this->ion_auth->get_user();
        $user = $user_data->id;

        // Prepare post data
        $data['user'] = $user; 
        $data['cdate'] = date('Y-m-d');
        $data['ctime'] = date('H:i:s');
        $data['mdate'] = date('Y-m-d'); 
        $data['mtime'] = date('H:i:s');
        $pair_value = $this->input->post('vpair');
        if(empty($pair_value))
        {
            $data['pair'] = "no pair";
        }else
        {
            $data['pair'] = $pair_value;
        }

        $reason_value = $this->input->post('reason');
        if(empty($reason_value))
        {
            $data['reason'] = "";
        }else
        {
            $data['reason'] = $reason_value;
        }
        $comment_value = $this->input->post('comment');
        if(empty($comment_value))
        {
            $data['comment'] = "";
        }else
        {
            $data['comment'] = $comment_value;
        }
        // Insert_data
        $this->journal_model->add_trade($data);
   }
}

Help? Anyone?

Cheers,

/J

Answer 1

I'm not sure how you are displaying the data in the actual example, i'm guessing by table its inside a standard HTML table tag.

I personally would append a new table row in the success function, to do this (rather than call reload) get your CI add controller function to echo out the table row at the end of the add function (it's a little bit dirty, a better approach would be to get CI to return the data and then format it using the view - but this should work)

So, at the end of the add function echo out the HTML for the table row, including the new values from the form.

In the JS change the success function to this:

    success: function(data) {
        $("#lightbox").fadeIn(300).delay(1000).fadeOut(300);
        $("#notification-box").show();
        $("#notification-box").html('<p>Saving</p>');
        $("#addrow").hide();

        if (data != 'error')
        {
             $('#tableid').append(data);
        }
        else
        {
             //handle your error here
        } 
    }

If there is an error processing your form, echo 'error' and the JS can handle it how you want it to, otherwise it will append the new table row onto the table.

Answer 2

here is something that i wrote for an invoicing application that may help you out, instead of passing the serialized data back to the page just either pass an entire dom element using a controller function that displays a view or (in my case) the function just returns a number and i build the html inside the jquery to append to the table body likeso:

/* user clicks the button */
$('#button_add_item_submit').click(function(event){

    /* prevent the page from scrolling to top via the # href */
    event.preventDefault();

    /* code to grab text input from the dom */

    /* ajax post */
    $.post('/invoice/index.php/create/add_item',{date:item_date,description:item_description,price:item_price,invoice_id:scraped_id},function(response){
        if(response!=''){
            /* inject response into the table, i named the table body #invoice_body */
            $('#invoice_body').append('<tr id="item_' + response + '"><td>' + item_date + '</td><td>' + item_description + '</td><td>$' + item_price + '.00</td></tr>');
        }
    });

});