如何使用jQuery .Ajax和Codeigniter重新加载部分视图3

Question

我有一个包含“notes”表的部分视图。提交新笔记时，我想重新加载部分视图并显示我的新笔记，这样我就不必刷新整个页面。

我有注释被插入到数据库中，并且ajax调用正在工作，但在.ajax成功上我正在调用location.reload（）。相反，我想调用我的部分视图，并替换在“view edit_employee”之前调用的视图生成的html。

对此问题的任何帮助非常感谢，感谢您花时间查看我的代码。

查看

 <div class="col-md-6 col-lg-6"> 
 
      <div class="panel panel-default"> 
 

 
       <div class="panel-title"> 
 
        Notes 
 
       </div> 
 
       
 
       
 
       <div class="panel-body"> 
 
        <div id="notesList"> 
 
         <?php $this->load->view("partial_views/note_list"); ?> 
 
        </div> 
 
        <form id="noteForm" class="form-horizontal"> 
 
         <div class="form-group"> 
 
          <div class="col-sm-12"> 
 
           <textarea class="form-control" rows="3" id="noteText" placeholder="Write a new note here..." required></textarea> 
 
          </div> 
 
         </div> 
 
         
 
         <div class="form-group"> 
 
          <div class="col-sm-12"> 
 
           <button type="submit" name="addNoteSubmit" id="addNoteBtn" class="btn btn-primary" style="width:100%;">Add Note</button> 
 
          </div> 
 
         </div> 
 
        </form> 
 

 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
    </div> 
 
</div> 
 

 
<script> 
 
    $(document).ready(function() { 
 
     $("#noteForm").submit(function(e) { 
 
      e.preventDefault(); 
 
      $.ajax({ 
 
       url: "<?php echo base_url("human_resources/add_note/".$contact->contact_id); ?>", 
 
       type: "post", 
 
       data: "noteText="+$("#noteText").val(), 
 
       dataType: "text", 
 
       success: function (data) { 
 
        alert(data);    
 
        location.reload(); 
 
       }, 
 
       error: function(jqXHR, textStatus, errorThrown) { 
 
        console.log(textStatus, errorThrown); 
 
       } 
 
      }); 
 
     }); 
 
</script>

管窥

<?php if($notes != null): ?> 
 
    <a href="#" id="deleteCheckedBtn" class="btn btn-danger float-r"><i class="fa fa-check"></i>Delete Checked</a> 
 
    <table class="table table-hover"> 
 
     <thead> 
 
      <tr> 
 
       <td class="text-center"><i class="fa fa-trash"></i></td> 
 
       <td>ID</td> 
 
       <td>Note</td> 
 
       <td>Date</td> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <?php foreach($notes as $note): ?> 
 
       <tr> 
 
        <td class="text-center"><div class="checkbox margin-t-0"><input id="<?php echo "note".$note['note_id'] ?>" type="checkbox" name="noteItem" value="<?php echo $note['note_id'] ?>"><label for="<?php echo "note".$note['note_id'] ?>"></label></div></td> 
 
        <td>#<b><?php echo $note['note_id']; ?></b></td> 
 
        <td width="70%"><?php echo $note['note']; ?></td> 
 
        <td width="20%"><?php echo date("m/d/Y", strtotime($note['created_date'])); ?></td> 
 
       </tr> 
 
      <?php endforeach; ?> 
 
     </tbody> 
 
    </table> 
 
<?php endif; ?>

控制器

public function add_note($contact_id) { 
 
    $this->Note_model->create($contact_id); 
 
     
 
    $data['notes'] = $this->Note_model->read($contact_id); 
 
    $view = $this->load->view('partial_views/note_list', $data, TRUE); 
 
    return "{hello: world}"; 
 
}

型号

<?php 
 

 
class Note_model extends CI_Model { 
 
    
 
    public $note_id; 
 
    public $contact_id; 
 
    public $note; 
 
    public $created_date; 
 
    
 
    public function __construct() { 
 
     // Call the CI_Model constructor 
 
     parent::__construct(); 
 
    } 
 
    
 
    public function create($id = null) { 
 
     if($id != null) { 
 
      $data = array(
 
       'note_id' => null, 
 
       'contact_id' => $id, 
 
       'note' => $this->input->post("noteText"), 
 
       'created_date' => date("Y-m-d") 
 
      ); 
 
      $this->db->insert('note', $data); 
 
     } 
 
    } 
 
    
 
    public function read($id = null) { 
 
     if($id != null) { 
 
      $query = $this->db->get_where('note', array('contact_id' => $id)); 
 
      return $query->result_array(); 
 
     } 
 
    } 
 
    
 
    public function update() { 
 
     
 
    } 
 
    
 
    public function delete() { 
 
     $checkbox_list = $this->input->post("checkboxs"); 
 
     foreach($checkbox_list as $checkbox_id) { 
 
      $this->db->delete('note', array('note_id' => $checkbox_id)); 
 
     } 
 
     
 
    } 
 
}

Answer 1

你几乎没有。正如你所说，你需要取代location.reload（）您的成功功能与东西部分加载一部分一些html。这个'东西'是jQuery .load（）方法。它的工作原理是这样的：

$("#container_to_load").load("/url_to_get #fragment_of_url_to_get"); 

您可能需要添加一对夫妇的ID在你的HTML超过您加载的页面片段更好的控制。另外，如果您需要在加载的片段上进行一些交互操作，请记住使用jQuery的“单击”不能加载元素。您需要使用.on（）访​​问它们并通过加载片段的祖先来访问它。

有关此方法的更多信息，请参阅jQuery .load()。

Answer 2

尝试这个

<script> 
    $(document).ready(function() { 
     $("#noteForm").submit(function(e) { 
      e.preventDefault(); 
      $.ajax({ 
       url: "<?php echo base_url("human_resources/add_note/".$contact->contact_id); ?>", 
       type: "post", 
       data: "noteText="+$("#noteText").val(), 
       dataType: "text", 
       success: function (data) { 
        alert(data);    
        window.location.href = 'url'; 
       }, 
       error: function(jqXHR, textStatus, errorThrown) { 
        console.log(textStatus, errorThrown); 
       } 
      }); 
     }); 
</script>