无法使用ajax和jquery从数据表中删除行[ajax调用不起作用]

时间:2018-07-17 05:32:21

标签: jquery ajax codeigniter datatable delete-row

我试图使用带有ajax的jquery从数据表中删除一行。 即使它在模式中显示确认消息,但ajax调用也不起作用,我还要附加控制台和代码的图像 而且我使用的是CodeIgniter框架,因此我还附加了模型和控制器。 控制器的代码是-

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                               
                       ));}}

该模型的代码是-

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

jquery的代码是-

 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();
                            }
   });
    });
 }

该视图的代码是-

    <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>

任何帮助将不胜感激。 enter image description here

2 个答案:

答案 0 :(得分:0)

在您的$.ajax通话中,您正在传递BASE_URL。因此,您需要定义BASE_URL,它是localhost:3000之类的api主机。

BASE_URL = 'localhost:3000';

您的网址类似于url: BASE_URL + '/dashboard/educational_qualification/delete'

答案 1 :(得分:0)

像这样在您的视图中定义您的BASE_URL

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

然后编辑代码,并像这样从您的$("#deleteMessageButton").on("click", function () {}); 文件中的代码中删除此js

    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();
        }
   });
 }