showing confirmation message using jquery in codeigniter

Question

Good day all, I'm new to CodeIgniter and I really need some help. I'm trying to make a confirmation message(div id="delmsg") using jquery when deleting a mysql record. But only the delete operation works but I don't see any message.

Code for Model page:

function delete_post($postID)
{
    $this->db->where('post_id', $postID);
    $this->db->delete('khanposts');
}

Code for Controller page:

function deletepost($postID)
{
    $this->khanpost->delete_post($postID);
    redirect(base_url().'khanposts/index/');
}

Code for View page:

<div id="main_body">
if (!isset($posts)){
echo "<p>There are currently no active posts.</p>";
}else{
echo '<table align="center">';
echo '<tr><th>Email Address</th><th>Contact No.</th><th>Actions</th></tr>';
foreach ($posts as $row){
    echo '<tr><td><i>' .$row['email']. '</i></td><td><b>' .$row['contact']. '</b></td>
    <td><a href="' .base_url(). 'khanposts/deletepost/' .$row['post_id']. '" id="delete"><i>Delete</i></a></td></tr>';
}
echo '</table><br><br>';
echo '<br><br><div id="delmsg"></div>';
}
</div>

<script>
$('#delete').click(function() {
$("#delmsg").css("visibility", "visible");
$('<h3>Record Deleted!</h3>').appendTo('#main_body');
});
//return false;
});
</script>

Is there any way that I could use jquery message in codeigniter? And also do I've to load any jquery plugin file manually in codeigniter? Any help would be grateful. Tnx.

Answer 1

You can do this by an Ajax call, you shouldn't show deleted message until you get success return from your request, and you need to use jQuery library to do that, Codeigniter itself doesn't provide you this, so you have to import jQuery in your view file like this:

<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

To make an Ajax call, add a data attribute which will hold the id of the that item and remove the href attribute as this will make your page to go to that page if you don't prevent that, also id tags must be unique so change it to class:

foreach ($posts as $row){
    echo '<tr><td><i>' .$row['email']. '</i></td><td><b>' .$row['contact']. '</b></td>
    <td><a data-id="' .$row['post_id']. '" href="#" class="delete"><i>Delete</i></a></td></tr>';
}

Then, make the Ajax call like this:

$(".delete").on('click',function(){
     $.ajax({
         url: "<?php echo site_url('khanposts/deletepost');?>",
         type: 'POST',
         data: { "post_id": $(this).data("id") },
         success: function() {
             $("#delmsg").css("visibility", "visible");
             $('<h3>Record Deleted!</h3>').appendTo('#main_body');
         }
     });
 });

Then in your controller, get the post value like this, both the ajax method or browsing that page method can work if we configure it like this :

function deletepost($postID = null, $redirect = true)
{
    if($postID == null){
        $postID =  $this->input->post('post_id');
        $redirect = false;
    }
    $this->khanpost->delete_post($postID);
    if($redirect)
        redirect(base_url().'khanposts/index/');
}

Answer 2

Your'e redirecting the page, clicking on a link, in this situation you should show the delete confirmation message when you land back to the posts page:

function deletepost($postID)
{
    $this->khanpost->delete_post($postID);
    $this->session->set_flashdata('delmsg', 'Record Deleted!'); //this sets a one time accessable flash data
    redirect(base_url().'khanposts/index/');
}

Now, to show this message in your view:

echo '<br><br><div id="delmsg"><h3>'.$this->session->flashdata('delmsg').'</h3></div>';