CodeIgniter + jQuery .ajax表单在表格行中提交返回结果

问题描述：

我认为它应该相当容易，我根本无法找到答案。CodeIgniter + jQuery .ajax表单在表格行中提交返回结果

我正在使用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); 
    } 
}

帮助？任何人？

干杯，

对于初学者'网址：“添加”，'在你的JS是不是一个好的开始，请告诉我你的控制器名称，如果你做了Ajax，你不能做重定向，不要这样工作，请把你的完整控制器。 – RobertPitt 2010-09-11 15:02:13

好吧......它当然可以工作......因为读取和添加功能都在同一个控制器中。我用过很多次，从来没有遇到过问题。 – 2010-09-11 15:08:03

我从来没有说过它不工作，我指的是你的路径结构，在你的头部模板中你应该有一个包含你的site_root的JavaScript变量，然后在js文件中你应该使用'url：site_root +“控制器/ method/param“，”这会给你更多的稳定性。 – RobertPitt 2010-09-11 15:10:31

答

我不知道你是如何在实际的例子显示的数据，我对表其内部标准的HTML表格标记猜测。

我个人会在成功函数中追加一个新的表格行，这样做（而不是调用reload）让你的CI add控制器函数在add函数的末尾回显表格行（这有点儿肮脏，更好的方法是获得CI返回数据，然后使用视图格式化 - 但这应该工作）

因此，在添加函数结束时，为表格行回显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 
     } 
    }

如果有一个错误处理您的形式，回声“错误”和JS可以处理它，你怎么想，否则将追加新的表格行放在表格上。

答

这里的东西，我写了一个开发票的应用程序，可以帮助你，而不是传递序列化的数据回页面只是要么通过使用显示视图或控制器功能的整个DOM元素（在我的情况）函数只返回一个数字，我建立了jQuery中HTML将追加到表体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>'); 
     } 
    }); 

});

CodeIgniter + jQuery .ajax表单在表格行中提交返回结果

相关推荐