Travus Gonzalez Travus Gonzalez - 4 months ago 100
Ajax Question

How to reload partial view with jQuery .Ajax and Codeigniter 3

I have a partial view with a table of "notes". When I submit a new note I want to reload just the partial view and show my new note so I do not have to refresh the whole page.

I have the note being inserted into the database, and the ajax call working, but on .ajax success I am currently calling location.reload(). instead I would like to call my partial view and replace the html generated by the view that was called before it "view edit_employee".

Any help with this problem is greatly appreciated, thank you for taking the time to look over my code.

View



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





Partial View



<?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; ?>





Controller



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





Model



<?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

You are almost there. As you said you need to replace location.reload() on your success function with something that partially loads a portion of some html. That 'something' is the jQuery .load() method. It works like this:

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

You may want to add a couple of IDs on your HTML for better control over the page fragments you are loading. Also, if you need some interaction over the loaded fragment, remember that loaded elements won't be accesible using jQuery 'click'. You need to access them using .on() and access it through an ancestor of the loaded fragment.

Take a look at jQuery .load() for more information on this method.

Comments