Change the codeigniter view contents without reload - ajax

Question

I have created an email utility which shows the email-ids from which email is received their subject line and date. Every email id has a checkbox alongside it. Whichever checkbox is clicked the email is sent to that email id. My problem is that i want to display "message sent successful" or error message on the same page without reload.
I think, it is possible with ajax, but I don't know how. Here is my view:
<?php echo form_open_multipart('accessmail/sendmail'); ?>
<div>
//here I display my emails
<div>
<div class="table_wrap1">
<div>Subject:</div>
<div><input type="text" required="required" id="subject" name="subject"></div>
</div>
<div class="table_wrap1">
<div>Email:</div>
<div><input type="email" id="replyto" name="replyto"></div>
</div>
<div id="txteditor">
<textarea name="textarea">
</textarea>
<button name="submit" value="process" type="submit">Send</button>
</div>
<?php } ?>
</div>
</form>
And my controller name is "accessmail", method name is "send mail":
public function sendmail()
{
$this->load->library('email');
$count=$this->input->post('mailcount');
$subject = $this->input->post('subject');
$msg = $this->input->post('textarea');
$replyto = $this->input->post('replyto');
//variable for checking whether any email id is selected or not
$status=0;
//for sending email to checked email id's
for($i=0;$i<$count;$i++)
{
// check whether the checkbox for a particular email id is checked or not
if(!$this->input->post('emailid'.$i))
{
continue;
}
else
{
//set the values for this email and send it
$this->email->from('abc#abc.com', 'abc');
$this->email->subject($subject);
$this->email->message($msg);
$idtosend = $this->input->post('emailid'.$i);
$this->email->to($idtosend);
if ($this->email->send())
{
$status++;
}
}
}
//for sending email to email id provide in textbox
if(!empty($replyto))
{
$this->email->from('abc#abc.com', 'Abc');
$this->email->subject($subject);
$this->email->message($msg);
$this->email->to($replyto);
if ($this->email->send())
{
$status++;
}
}
if($status>0)
{
//this message should be displayed on the same page along with other contents of the page
echo "Your message has been sent";
}
if($status==0)
{
//this message should be displayed on the same page along with other contents of the page
echo "Select any Email-id first";
}
}
my problem is the success message should be displayed on the same view preserving the contents of the page. Thanks in advance.

Answer 1

Yeah, that's a typical Ajax thing. But unfortunately that's a bit too big to just deliver you the answer (or I am too lazy, but you would benefit the most out of it, by figuring this out yourself).
My suggestion is, that you learn jQuery and Ajax (if you don't know that already).
For your problem, you specifically want to send the mails to your PHP-Function sendmail() via Ajax. This function either returns a Success- or an Errormessage (with json_encode() around it, that's how I'd do it). The Ajax-function then displays the message.
This is neither tested nor should be the final solution... just a hint:
The PHP Function:
<?php
function sendmail()
{
$mails = $_POST['mails'];
$countEmails = count($mails);
$success = 0;
foreach ($mails as $mail) {
// Check and send mails here
if ($this->email->send()) {
$success++;
}
}
if ($success < $countEmails) {
echo json_encode('One or more E-Mails were not sent');
return;
}
echo json_encode('E-Mails successfully sent');
}
Ajax Function (don't forget to include jquery):
$('#id_of_your_send_mails_button').bind('click', function(evt) {
evt.preventDefault();
$.ajax({
type: 'post',
url: 'path/to/sendmail',
dataType: 'json',
data: {
mails: $('#id_of_your_form').serialize();
},
success: function (data) {
$('#id_of_your_status_div').html(data);
}
});
});
Again, this is just pseudocode-ish stuff, to get you to it, but you have to do the learning on your own.
Hope that helps a bit.
EDIT
You might also try:
$('#id_of_your_send_mails_button').bind('click', function(evt) {
evt.preventDefault();
$.ajax({
type: 'post',
url: 'path/to/sendmail',
dataType: 'json',
data: {
name: $('#id_of_your_name_field').val(),
email: $('#id_of_your_name_field').val() // and so forth
},
success: function (data) {
$('#id_of_your_status_div').html(data);
}
});
});