delete data using ajax and codeigniter - php

Question

I have problem in deleting data using ajax I tried first to test if I click the button to make alert action so it not work.
this is my controller code
public function indexajax()
{
$this->load->model("usersmodel");
$data["allu"]=$this->usersmodel->ShowAllUsers("users");
$data['pagetitle']=" -->All Users Using Ajax<--";
$this->load->view("template/admin/header",$data);
$this->load->view("users/allusersusingajax");
$this->load->view("template/admin/footer");
}
public function get_all_users()
{
if($this->input->post("action")=='FetchAllUserUingAjax1'){
$this->load->model("usersmodel");
$x= $data["allu"]=$this->usersmodel->ShowAllUsers("users");
foreach ($x as $a):
echo'<tr>
<td>'.$a->id.'</td>
<td>'.$a->username.'</td>
<td><button class="deletenew" id="'.$a->id.'">delete</button></td>
</tr>';
endforeach;
}
public function deleteusers()
{
$id=$this->input->post("id");
$this->load->model("usersmodel");
$this->usersmodel->deleteusers($id);
}
this is my model code for deleting
public function deleteusers($id)
{
$this->db->where('id',$id);
if($this->db->delete("users")){
return true;
}else{
return false;
}
}
/**************this is view page *****/
<div class="userdataajax table-responsive">
<table class=" table table-responsive table-bordered">
<tr>
<th>#</th>
<th>name</th>
<th>image</th>
<th> full name</th>
<th>email</th>
<th>usertype</th>
<th>status</th>
<th>reg date</th>
<th>reg time</th>
<th>delete</th>
<th>edit</th>
<th>Activate</th>
<th>disactivate</th>
</tr>
</table>
</div>
<script>
$(document).ready(function () {
FetchAllUserUingAjax();
function FetchAllUserUingAjax() {
$.ajax({
url:'<?php echo base_url()?>Users/get_all_users',
method:"post",
success:function (data) {
$(".userdataajax table").append(data);
}
})
var action="FetchAllUserUingAjax1";
$.ajax({
url:"<?php echo base_url()?>Users/get_all_users",
method:"post",
data:{action:action},
success:function (data) {
$(".userdataajax table tr").not("table
tr:first").remove();
$(".userdataajax table").append(data);
Table();
}
})
};
$(".deletenew").on("click",function () {
alert("engex");//this alert not working
var id=$(this).attr('id');
$.ajax({
url:"<?php echo base_url()?>Users/deleteusers",
method:"post",
data:{id:id},
success:function () {
alert("deleted");
FetchAllUserUingAjax();
}
})
})
})
</script>
// but if I remove foreach (foreach) from controller and put it in view page, delete is working. I want to know what is my problem.

Answer 1

At the moment you set the click handler for the delete buttons, these buttons do not exist in the page (yet...) as they are being loaded with another ajax request.
To bind the buttons that are later added to the page, you can use event delegation. To do that, you need to change your click handler from this:
$(".deletenew").on("click",function () {
to:
$('body').on('click', '.deletenew', function () {
I have delegated it to the body element, but you can use any element that will contain the buttons and is already available on page load / DOM ready.

Answer 2

controller code
I think your alert is not showing because your table is showing by ajax In this code you have to use deletenew function, when click on delete button.
public function get_all_users()
{
if($this->input->post("action")=='FetchAllUserUingAjax1'){
$this->load->model("usersmodel");
$x= $data["allu"]=$this->usersmodel->ShowAllUsers("users");
foreach ($x as $a):
echo'<tr>
<td>'.$a->id.'</td>
<td>'.$a->username.'</td>
<td><button class="deletenew" id="'.$a->id.'" onclick="deletenew(this.id);">delete</button></td>
</tr>';
endforeach;
}
view page delete function
This is deletenew function this will work when you click on delete button
function deletenew(id){
alert("engex");
$.ajax({
url:"<?php echo base_url()?>Users/deleteusers",
method:"post",
data:{id:id},
success:function () {
alert("deleted");
FetchAllUserUingAjax();
}
})
}
I hope this code will work for you

Answer 3

//change Controller function
public function get_all_users()
{
if($this->input->post("action")=='FetchAllUserUingAjax1')
{
$this->load->model("usersmodel");
// print_r($this->input->post("action"));
echo ($this->input->post("action"));
$data["allu"]=$this->usersmodel->ShowAllUsers("users");
$this->load->view("template/admin/header");
//make another view show_users,make a button in page
//alluersusing ajax give that button id 'but'
$this->load->view("users/show_users,$data");
$this->load->view("template/admin/footer");
}
//copy paste the code below in show_users view
foreach ($x as $a):
echo'<tr>
<td>'.$a->id.'</td>
<td>'.$a->username.'</td>
<td><button class="btn btn primary" onclick=del(<?php echo '.$a->id.' ?>)>delete</button></td>
</tr>';
endforeach;
//Ajax Delete function
<script>
function del(id) {
$.ajax({
type: "POST",
url: '<?php echo base_url('Users/deleteusers')?>' +"/"+ id,
success: function (data) {
$("#get").html(data);
}
});
}
</script>