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

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.

我正在使用Codeigniter进行简单的CRUD应用程序。它在表格中显示结果。我做的是使用jQuery .ajax提交表单。它（几乎）完美地工作。

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.

我可以在没有重新加载的情况下提交表单，但除非我重新加载页面，否则结果不会显示。现在我使用location.reload（）;但它没有意义，毕竟我的意图是不重新加载页面。

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

我知道我应该回复数据，但不知道如何使用CI。

Some insides:

一些内容：

jQuery part

jQuery部分

$("#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

2 个解决方案

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

我不确定你是如何在实际例子中显示数据的，我猜测它是一个标准的HTML表格标签。

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)

我个人会在success函数中添加一个新的表行，为此（而不是调用reload）获取你的CI添加控制器函数来回显add函数末尾的表行（它有点脏，更好方法是让CI返回数据，然后使用视图对其进行格式化 - 但这应该有效）

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

因此，在add函数的末尾回显表行的HTML，包括表单中的新值。

In the JS change the success function to this:

在JS中将成功函数更改为：

    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.

如果处理表单时出错，则回显“错误”并且JS可以按照您希望的方式处理它，否则它会将新表行追加到表中。

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

这是我为可能帮助你的发票应用程序编写的东西，而不是将序列化数据传递回页面，只是使用显示视图的控制器函数或（在我的情况下）函数传递整个dom元素返回一个数字，我在jquery里面构建html，以附加到表体赞：

/* 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>');
        }
    });

});

#1