codeigniter表單提交使用ajax和顯示返回數據在表

Question

我提交一個表單在視圖頁面，我想，當我點擊提交按鈕表單數據需要保存在數據庫表中，該數據需要顯示在沒有刷新頁面的表格中。

這是我的視圖代碼：

<div class="col-md-12"> 
<div class="row"> 
<div> 
<table class="table table-striped table-hover table-responsive"> 
<thead> 
<tr class=""> 
    <th>Director</th> 
    <th>Partner</th> 
    <th>Duration</th> 
    <th>Comments</th> 
</tr> 
</thead> 
<tbody id="hodm_results"> 

</tbody> 
</table> 
</div> 
</div> 
</div> 


<?php 
$attributes = array('class' => 'form-horizontal','id'=>'hodm_comments'); 
echo form_open('', $attributes); 
?> 
<div class="row"> 
<div class="col-md-12"> 
<div class="col-sm-3"> 
    <div class="input-group"> 
    <span>Director</span> 
    <?php echo form_input(['class'=>'form-control autofocus','id'=>'director','name'=>'director','value'=>set_value('director',$wip->director)]); ?> 
    </div> 
</div> 
<div class="col-sm-3"> 
    <div class="input-group"> 
    <span>Partner</span> 
    <?php echo form_input(['class'=>'form-control autofocus','id'=>'partner','name'=>'partner','value'=>set_value('partner',$wip->partner)]); ?> 
    </div> 
</div> 
<div class="col-sm-3"> 
    <div class="input-group"> 
    <span>Duration</span> 
    <?php echo form_input(['class'=>'form-control autofocus','id'=>'duration','name'=>'duration']); ?> 
    </div> 
</div> 
<div class="col-sm-3"> 
    <div class="input-group"> 
    <span>Comments</span> 
    <?php echo form_textarea(['class'=>'form-control autofocus','id'=>'comments','name'=>'comments','rows'=>'3']); ?> 
    <input type="hidden" name="id_hidden" value="<?php echo $wip->id; ?>"> 
    </div> 
</div> 
</div> 
</div> 
<input class="btn btn-primary" type="submit" name="submit" value="submit"> 
<?php 
echo form_close(); 
?> 
</section> 
<!--main content end--> 
</section> 

這是我的JQuery代碼：

<script type='text/javascript' language='javascript'> 
$('#hodm_comments').submit(function (event) { 
$.ajax({ 
url:"<?php echo base_url();?>digital/dashboard/insert_hodm_comments", 
type: 'POST', 
dataType: 'JSON', 

success:function (data) { 
$('#hodm_results').html(data); 
} 
}); 

event.preventDefault(); 
}); 
</script> 

這是我的控制器代碼：

public function insert_hodm_comments(){ 
/* Checking the all validation of Hodm Comment form form*/ 
$this->form_validation->set_rules('director', 'Name of Director', 'required'); 
$this->form_validation->set_rules('partner', 'Partner', 'required'); 
$this->form_validation->set_rules('duration', 'No Of Hours', 'required'); 
$this->form_validation->set_rules('comments', 'Comments of the task', 'required'); 

if ($this->form_validation->run()) { 
/* Taking the data from form*/ 
$partner = $this->input->post('partner'); 
$director = $this->input->post('director'); 
$duration = $this->input->post('duration'); 
$comments = $this->input->post('comments'); 
$id   = $this->input->post('id_hidden'); 

$data = array(
'partner'   =>$partner, 
'director'   =>$director, 
'duration'   =>$duration, 
'comments'   =>$comments, 
'hodm_id'   =>$id 
); 

$add=$this->pojo->add_hodm_comments($data); 
/* Display Success message if data inserted successfully in database*/ 

if($add){ 
$result_html = ''; 
$result_set = $this->pojo->get_hodm_comments(); 

foreach($result_set as $result) { 
$result_html .= ' 
    <tr> 
     <td>' . $result->director . '</td> 
     <td>' . $result->partner . '</td> 
     <td>' . $result->duratrion . '</td> 
     <td>' . $result->comments . '</td> 
    </tr>';     

} 

echo json_encode($result_html); 
//$this->session->set_flashdata('hodm_form',"All HODM Data Inserted Successfully."); 
//$this->session->set_flashdata('hodm_form_class','alert-success'); 
}else{ 
/* Displaying the error message*/ 
$this->session->set_flashdata('hodm_form',"failed to add, Please Try again"); 
$this->session->set_flashdata('hodm_form_class','alert-danger'); 
} 
return redirect('digital/dashboard/wip_hodm_comments_section'); 
} else { 
$this->load->view('digital/hodm/dashboard_hodm_work/wip_hodm_comments'); 
} 
} 

這裏是型號：

public function add_hodm_comments($data){ 

    $this->db->insert('hodm_wip_comments', $data); 
    return TRUE; 

    } 

    public function get_hodm_comments(){ 
    $this->db->select('*'); 
    $this->db->from('hodm_wip_comments'); 
    $query=$this->db->get(); 
    return $result=$query->result(); 
    } 

請幫我找到解決方案，我卡在這段代碼中。

謝謝

Answer 1

只是你的Ajax部分更改爲以下

<script type='text/javascript' language='javascript'> 
$('#hodm_comments').submit(function (event) { 
$.ajax({ 
url:"<?php echo base_url();?>digital/dashboard/insert_hodm_comments", 
type: 'POST', 
data : $('#hodm_comments').serialize(), 
success:function (data) { 
$('#hodm_results').html(data); 
} 
}); 

event.preventDefault(); 
}); 
</script> 

，並在你的控制人變更情況本echo json_encode($result_html);到echo $result_html;

這個完美的作品在我與你的代碼方面:)

Answer 2

你可以簡單地做的是從你的控制器函數中迴應響應，獲得一個jax調用並將其添加到一個div或作爲tr到一個現有的表。