alert if success update using ajax in codeigniter

Question

Help me please. I'm new in ajax. I'm using codeigniter.. I'm using a javascript modal (alert) to show if i successfully deleted a data.

here is my view:

<script type="text/javascript">
    $(document).on("click", ".delete-data", function () {
        var id = $(this).data('id');
        $("#id").val( id );
    });
</script>
<div class="down1">
    <button type="button" class="button-orange" onclick="add_child();" id="child_add">Add</button>
</div>
<div class="span11 offset1" id="childdv">
     <?php echo $child_set;?> <!--this one shows that table of children-->
</div>
the modal delete
<!--delete-->
            <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-haspopup="true" aria-hidden="true">
                <div class="modal-dialog">
                <div class="modal-content">
                    <div class="alert alert-danger fade in" id="alert">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h3>Heads Up!</h3>
                        <p>What you are doing will delete a data!</p>
                        <input type="hidden" name="id" id="id" value=""/>
                        <a onclick="delete_child();" id="okButton" class="btn btn-danger" data-dismiss="modal">
                              Confirm Delete
                        </a>
                        <a href="#" class="btn" data-dismiss="modal">
                              Cancel
                        </a>
                    </div>
                </div>
                </div>
            </div>

my main controller that shows the

$data_set['record_set'] = $this->emp->get_children($id);
$data['employee_header_menus'] = $this->load->view('employee_header_menus', NULL, TRUE);
$data['employee_header_logout'] = $this->load->view('employee_header_logout', NULL, TRUE);
$data['child_set'] = $this->load->view('swoosh_template/employee/child', $data_set, TRUE);  //<--- you can see in here that the $child_set came from here.
$data['info'] = $this->emp->get_myinfo($id);
$data['msg'] = "";
$data['color'] = "green";
$data['header_logo'] = $this->load->view('header_logo', NULL, TRUE);
$this->load->view('employee/personaldetails', $data);

now. where is that child_set . it is a view.

<?php if ($record_set !="" ) { ?> 
<table id="tblcount" class="table table-bordered">
<tr class="orange">
    <th>Name</th>
    <th>Date of Birth</th>
    <th>Dependent</th>
    <th>Delete</th>
</tr>
 <?php foreach ($record_set as $row): ?>
<tr>
    <td>
        <?php echo $row[ 'name'];?>
    </td>
    <td>
        <?php echo $row[ 'birth_date'];?>
    </td>
    <td>
        <?php echo ($row[ 'dependent']=='1' ? 'Yes': 'No');?>
    </td>
    <td>
        <img data-toggle="modal" data-id="<?php echo $row['id']?>" class="delete-data" href="#delete" style="cursor:pointer" height="15" width="15" src="<?php echo base_url(); ?>images/remove.gif">
    </td>
</tr>
<?php endforeach?>
</table>

here is my javascript that calls the modal.

function delete_child()
{   
  var id = $("#id").val(); 
  if (id!=null){
      swoosh(id, path+'swoosh_employee/swoosh_delete_child', 'childdv'); //<-- this is the function that calls my controller
      $('#success').modal('show');  // <-- this is the alert.
  }  
}

but I don't want to put the alert there. cause i want to validate first if my function in my controller runs successfully. and that's the time that I will show that alert.

here is my controller:

public function swoosh_delete_child()
{
    $P1 = $this->session->userdata('id');
    parse_str($_SERVER['QUERY_STRING'],$_GET);
    $id = $_GET['h'];

    $this->emp->delete_children($id); //  <-- in here , i want to validate this. if successful: alert success, else alert error

    $set['record_set'] = $this->emp->get_children($P1);
    $this->load->view('swoosh_template/employee/child',$set);
}

here is the model:

public function delete_children($P1)
{
    $this->db->delete('employee_children', array('ID' => $P1)); 
}

now . what I want to do is . "ajax".. that will check if the function runs successfully or if i deleted successfully like:

if success{
   $('#success').modal('show');
}
else{
   $('#error').modal('show');
}

I've been searching on how to use ajax. but i can't seem to understand it.. I'm just new in programming. Average.

Answer 1

Try this :
UPDATE
model :

public function delete_children($P1,$id)
{
    $delete = $this->db->delete('employee_children', array('ID' => $P1,'child_id' => $id)); 
    if ($delete){
     return "success";
    }
    else{
     return "failed";
    }
}

controller :

public function swoosh_delete_child()
    {
        $P1 = $P1 = $this->session->userdata('id'); // get the parent id
        $id = $this->input->post('id'); // get child id

        $delete = $this->emp->delete_children($P1,$id); // delete the child of current parent
        if($delete == "success"){
        echo $delete;
        }
        else{
        echo $delete;
        }
    }

I used to use this ajax :

function delete_child()
{   
  var id = $("#id").val();
  if (id!=null){

   $.ajax({
   url : "<?php echo base_url('swoosh_employee/swoosh_delete_child') ?>",
   data : "id="+id,
   type: "POST",
   success : 
   function (data){
     if (data == "success"){
     alert("delete success");
     }
     else{
     alert("delete failed");
     }
   } 
   }); 
  }  
}

To show the children of this parent, you can build another ajax.