Codeigniter - Call another controller from a view using ajax - php

Question

Initially I am trying to load two views from one controller.
On submission I am passing one view to one controller and another view to another controller using ajax dynamically. Here is the skeleton of the controller
function edit(){
if (!$this->login_model->is_logged_in())
{
redirect('auth/login', 'refresh');
}
$this->load->library('form_validation');
$this->data['custom_error'] = '';
//------------- Getting Student data----------------
if ($this->form_validation->run('students') == false)
{
$this->data['custom_error'] = (validation_errors() ? '<div class="form_error">'.validation_errors().'</div>' : false);
} else
{
$data = array(
'username' => $this->input->post('username'),
'city' => $this->input->post('city')
);
if ($this->student_model->edit('students',$data,'id',$this->input->post('id')) == TRUE)
{
redirect(base_url().'index.php/students/manage/');
}
else
{
$this->data['custom_error'] = '<div class="form_error"><p>An Error Occured</p></div>';
}
}
$this->data['result'] = $this->codegen_model->get('students','id,username,city,created_on,date_created','id = '.$this->uri->segment(3),NULL,NULL,true);
$this->data['message'] = $this->db->get('messages')->result();
//---------------------- Posting student data for Edit--------------
$this->load->view('pheader');
$this->load->view('/students/students_edit', $this->data);
//-------- loading comment controller for comment box --------------
$msg_data['result'] = $this->db->get('messages')->result();
$this->load->view('commentView', $msg_data);
}
So the problem is when I m submitting the messages_view both the controllers are loaded , but I need to load only one controller
Here is my student_edit view where I edit my details
<?php
echo form_open(current_url()); ?>
<?php echo $custom_error; ?>
<?php echo form_hidden('id',$result->id) ?>
<p><label for="username">Username<span class="required">*</span></label>
<input id="username" type="text" name="username" value="<?php echo $result->username ?>" />
<?php echo form_error('username','<div>','</div>'); ?>
</p>
<p><label for="city">City<span class="required">*</span></label>
<input id="city" type="text" name="city" value="<?php echo $result->city ?>" />
<?php echo form_error('city','<div>','</div>'); ?>
</p>
<?php echo form_submit( 'submit', 'Submit'); ?>
</p>
<?php echo form_close(); ?>
Here is the commentView that I am loading separately from the controller
<div id="content-table-inner">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<?php foreach ($result as $comment): ?>
<tr valign="top">
<p>Posted By : <?=$comment->created_by?></p>
<p>Posted On : <?=$comment->created->on?></p>
<p>Message : <?=$comment->message?></p>
</tr>
<br/>
<?php endforeach; ?>
</table>
<div class="submitComment" id="insertbeforMe">
<h3>Add a message</h3>
<form id="form" method="POST" action="">
<p>
<textarea name="message"></textarea>
</p>
<input type="hidden" value="<?=base_url()?>" id="baseurl"/>
<button name="submit comment">Submit Comment</button>
</form>
</div>
<script type="text/javascript">
function comment(){
var baseurl = $('#baseurl').val();
$('.submitComment').click(function(){
$.ajax({
url : baseurl + 'index.php/comment/insert',
data : $('form').serialize(),
type: "POST",
success : function(comment){
$(comment).hide().insertBefore('#insertbeforMe').slideDown('slow');
}
})
return false;
})
}
</script>
</div>
Can anyone tell me whats the problem ?

Answer 1

If I understand correctly...
The event you should be capturing is the form's "submit", not the submit-button's "click". You're essentially running the AJAX request and submitting the form.
Try something like this instead:
$('form').on('submit', function(e) {
e.preventDefault(); // this prevents the form from submitting
// do AJAX stuff
});

Answer 2

Unless I am mistaken you are attaching the event to a click event on the '.submitComment' div.
Should you not give the button an id and attach the .click event to it ?
Then you need to define the view you want to call via ajax to return some json which your function can use:
The Javascript:
$('#button').click(function(){
$.ajax({
url : baseurl + 'index.php/comment/insert',
data : $('form').serialize(),
type: "POST",
dataType: "json",
success : function(comment){
$('table').append('<tr><p>'+comment.createdby+'</p><p>'+comment.createdon+'</p><p>'+comment.message+'</p></tr>');
}
})
return false;
})
The Controller method (comment/insert):
function insert() {
$comment = $this->input->post('message');
$result = $this->commentModel->insert($comment);
if($result["OK"]) {
$data['json'] = json_encode(array('createdon' => $result["createdon"], 'createdby' => $result["createdby"], 'message' => $result["message"]));
$this->load->view('json_comment_view', $data);
}
//ELSE deal with errors (flashdata etc...)
}
The View (loaded via ajax):
<?php
$this->output->set_header('Content-Type: application/json; charset=utf-8');
echo $json;
?>
I haven't tested this code - or used codeigniter extensively in about a year, but the concepts covered should put you on the right track for what you want to achieve. Let me know!