Unable to delete a row from datatable using ajax and jquery [ajax call not working]

Question

I trying to delete a row from data-table using jquery with ajax. even it's showing the confirmation message in the modal but the ajax call is not working I'm also attaching the image of console and code And I'm using CodeIgniter framework so I' also attaching model and controller. the code for the controller is-

public function delete(){

$record['id'] = $this->input->post('id');
if($this->Educational_qualification_model->Delete($record['id'])){

  echo json_encode(array( 
                         "Status" =>1                               
                        )); 
       }else{

echo json_encode(array( 
                         "Status" =>0                               
                       ));}}

code for the model is-

public function Delete($id){     
    $this->db->where('id', $id);
    $this->db->delete('educational_qualification');
    return 1;}

code for jquery is-

 function deleteQualification(Id){
$("#deleteAlertBox").modal('show');
$('#deleteMessageHeading').html('Delete this qualification information?');
 $('#deleteMessageText').html("Are you sure you want to delete this qualification information?");
    $("#deleteMessageButton").on("click", function () {

   $("#deleteAlertBox").modal('hide');
   $("#Loading").show();
   $.ajax({
       type: 'post',
       url: BASE_URL + 'dashboard/educational_qualification/delete',
       data: {
           'id': Id
       },

      dataType: "json",
                success: function (data) {

                            if(data.Status){

                            $("#messageModal").modal('show');
                            $("#messageBox").html('<p>Qualification information deleted successfully.</p>');
                            $('#item' + Id).remove();
                            $("#Loading").hide();

                            }else{

                            $("#messageModal").modal('show');
                            $("#messageBox").html('<p>Sorry,something went wrong.Try again after sometime.</p>');
                            $("#Loading").hide();  

                            }
                },
                error: function () {

                            $("#messageModal").modal('show');
                            $("#messageBox").html('<p>Sorry,something went wrong.Try again after sometime.</p>');
                            $("#Loading").hide();
                            }
   });
    });
 }

And the code for the view is-

    <div class="row"> 
                 <div class="span6">
                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
          <h3><a href="#">Example article with thumbnail image</a></h3>
          </div></div>
            <div class="span2">
                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
           <a href="<?php echo base_url()."dashboard/educational-qualification/add"; ?>"> <button class="btn btn-small btn-success" type="button">Add Qualification</button></a>
        </div></div>
        </div></div>
        <div class="row">
        <div class="span8">
        <span id="Loading" style="display:none;padding-left:10px;"><img src="<?php echo base_url(); ?>assets/admin/input-spinner.gif"> Please wait...processing</span>

        </div>
        </div>
        <div class="row">

          <div class="span8">
          <table id="mytable" class="stripe" style="width:100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Year</th>
            <th>Class</th>
            <th>School</th>
            <th>Board</th>
            <th>Percentage</th>
            <th>Tools</th>
        </tr>
    </thead>
    <tbody>
    <?php
    foreach($contentdata as $rows){ 
               ?>
               <tr class="odd gradeX" align="center" id="item<?php echo $rows['id']; ?>">
                 <td>&emsp;&emsp;&emsp;<?php echo $rows['id']; ?></td>
                 <td>&emsp;&emsp;&emsp;<?php echo $rows['year']; ?></td>
                 <td>&emsp;&emsp;&emsp;<?php echo $rows['class']; ?></td>
                 <td>&emsp;&emsp;&emsp;<?php echo $rows['school']; ?></td>
                 <td>&emsp;&emsp;&emsp;<?php echo $rows['board']; ?></td>
                 <td>&emsp;&emsp;&emsp;<?php echo $rows['percentage']; ?></td>
               <td align="center">




                <div>

                <a title="Update" href="<?php echo base_url()."dashboard/educational-qualification/edit/".$rows['id'];?>"><i class="fa fa-edit"></i> </a>



                <a title="Delete" onclick="deleteQualification('<?php echo $rows['id'];?>')"  href="javascript:;" > <i class="  fa fa-trash-o"> </i> </a>

           </div>



                </td> </tr>
    <?php } ?>    
    </tbody>
    <tfoot>
        <tr>
        <th>Id</th>
            <th>Year</th>
            <th>Class</th>
            <th>School</th>
            <th>Board</th>
            <th>Percentage</th>
            <th>Tools</th> 
        </tr>
    </tfoot>
</table>
          </div>
        </div>
      </article>

Any help will be appreciated.

Answer 1

define Your BASE_URL in your view like this.

<script>
     BASE_URL = "<?php echo base_url(); ?>";
</script>

then edit code and remove this $("#deleteMessageButton").on("click", function () {}); from code in your js file like this

    function deleteQualification(Id){
$("#deleteAlertBox").modal('show');
$('#deleteMessageHeading').html('Delete this qualification information?');
 $('#deleteMessageText').html("Are you sure you want to delete this qualification information?");    
   $("#deleteAlertBox").modal('hide');
   $("#Loading").show();
   $.ajax({
       type: 'post',
       url: BASE_URL + 'dashboard/educational_qualification/delete',
       data: {
           'id': Id
       },

      dataType: "json",
        success: function (data) {
            if(data.Status){
                $("#messageModal").modal('show');
                $("#messageBox").html('<p>Qualification information deleted successfully.</p>');
                $('#item' + Id).remove();
                $("#Loading").hide();
            }else{
                $("#messageModal").modal('show');
                $("#messageBox").html('<p>Sorry,something went wrong.Try again after sometime.</p>');
                $("#Loading").hide();  
            }
        },
        error: function () {
            $("#messageModal").modal('show');
            $("#messageBox").html('<p>Sorry,something went wrong.Try again after sometime.</p>');
            $("#Loading").hide();
        }
   });
 }