如何使用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>