CodeIgniter + jQuery .ajax форма отправлять возвращаемые результаты в строке таблицы

Question

Я думаю, что это должно быть довольно просто, я просто не могу найти ответ на него.

Я использую Codeigniter для простого приложения CRUD.Он отображает результат в таблице.Я использовал jQuery .ajax для отправки формы.Работает (почти) отлично.

Я могу отправить форму без перезагрузки, но результаты не отображаются, пока я не перезагрузил страницу.На данный момент я использую location.reload();, но это не имеет смысла, после всех моих намерений не было перезагрузить страницу.

Я знаю, что должен вернуть данные, но понятия не имею, как это сделать с помощью CI.

Некоторые внутренности:

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();
        }

    });
});

часть контроллера

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);
   }
}

Помощь?Кто-нибудь?

Приветствия,

/ J

Answer 1

вот что я написал для приложения для выставления счетов, которое может помочь вам, вместо того, чтобы передавать сериализованные данные обратно на страницу, либо просто передать весь элемент dom, используя функцию контроллера, которая отображает представление, или (в моем случае)функция просто возвращает число, и я строю HTML внутри jquery, чтобы добавить к телу таблицы 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>');
        }
    });

});

Answer 2

Я не уверен, как вы отображаете данные в реальном примере, я предполагаю, что таблица находится внутри стандартного тега таблицы HTML.

Я лично добавлю новую строку таблицы в случае успехачтобы сделать это (вместо перезагрузки вызова), получите функцию контроллера CI add для вывода строки таблицы в конце функции add (это немного грязно, лучше было бы заставить CI возвращать данные изатем отформатируйте его, используя представление - но это должно сработать)

Итак, в конце функции add выведите HTML-код для строки таблицы, включая новые значения из формы.

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

Если при обработке вашей формы возникла ошибка, выведите «error» в виде эха, и JS может обработать ее так, как вы этого хотите, иначе он добавит новыйстрока таблицы на стол.