使用jquery和ajax删除记录

Question

When I am using this code it goes in success else condition and show error. But when I refresh the page the record is deleted automatically. Please suggest me what I can do.

jquery script:

<script>
$(document).ready(function(){

$(".delete").click(function(event){
 alert("Delete?");
 var href = $(this).attr("href")
 var btn = $(this);

  $.ajax({
    type: "GET",
    url: href,
    success: function(response) {

      if (response == "Success")
      {
        $(btn).closest('tr').fadeOut("slow");
      }
      else
      {
        alert("Error");
      }

    }
  });
 event.preventDefault();
 })
 });
</script> 

View file:

<table style="width:100%" border="1" class="table">
    <thead>
    <tr>
            <th>score Id</th>
            <th>student name </th>
            <th>subject Name</th>
            <th>student marks</th>      
            <th>Action</th>
        </tr>
    </thead>    
        <?php foreach($score as $r): ?>
    <tbody> 
        <tr><td><?php echo $r->score_id; ?></td>
            <td><?php echo $r->student_name; ?></td>
            <td><?php echo $r->subject_name; ?></td>
            <td><?php echo $r->marks; ?></td>
            <?php if($status <> 1): ?>
            <?php if($admin_id == $r->admin_id): ?>
            <td><a class="btn btn-info" href="<?php echo base_url(); ?>index.php/score_listing/edit/<?php echo $r->score_id; ?>" > Edit</a><a class="btn delete btn-danger" href="<?php echo base_url(); ?>index.php/score_listing/delete/<?php echo $r->score_id; ?>"> Delete</a></td>
            <?php endif; ?>
            <?php else: ?>
            <td><a class="btn btn-info" href="<?php echo base_url(); ?>index.php/score_listing/edit/<?php echo $r->score_id; ?>" > Edit</a><a class="btn delete btn-danger" href="<?php echo base_url(); ?>index.php/score_listing/delete/<?php echo $r->score_id; ?>" > Delete</a></td>

            <?php endif; ?>         
        </tr>
    </tbody>    
        <?php endforeach; ?>

    </table>

Controller file:

public function delete($id)
{
    $admin_name = $this->session->userdata('admin_name');  
    log_message('debug',"this record deleted by Admin = ".$admin_name );

    $score = $this->score->delete_operation($id);

    $error_data = array('error' => 'Error while deleting record');;
    return json_encode(array("success" => true));
}

Answer 1

Just change your controller function's last line:

return json_encode(array("success" => true));

to

echo 'Success';

Answer 2

update you controller function as,

public function delete($id) {
...
...
die('Success');
}

Answer 3

I just tried the below condition in script for ajax and it works. I think I am not confirming or not taking response so thats why it continuously going into else condition where error is written.

Hope this will help some one.

MY new script

<script>
$(document).ready(function(){

$(".delete").click(function(event){
 var del = confirm("Delete record?");
 var href = $(this).attr("href")
 var btn = $(this);
 if(del == true)
 {
  $.ajax({
    type: "GET",
    url: href,
    success: function(response) {

      if (response != "Success")
      {
        $(btn).closest('tr').fadeOut("slow");
      }
      else
      {
        alert("Error");
      }

    }
  });
}
 event.preventDefault();
})
});
</script> 

Answer 4

Your ajax return an object so you cant use if (response == "Success") like this. change code like this:

public function delete($id)
{
    $admin_name = $this->session->userdata('admin_name');  
    log_message('debug',"this record deleted by Admin = ".$admin_name );

    $score = $this->score->delete_operation($id);

    $error_data = 2;
    echo 1;
}

if it's true it return 1, so chage ajax like this:

    if (parseInt(response)==1)
          {
            $(btn).closest('tr').fadeOut("slow");
          }
          else
          {
            alert("Error");
          }
    }

I assumed you want hide tr if response is true.

Answer 5

Because you passed it as an array (in javascript it will be converted as an object), the value of the response will be available as response.success . You can check the response object if you write it to the console.

Try this in your ajax method :

success: function(response) {
      console.log(response);
      if (response.success == true)
      {
        $(btn).closest('tr').fadeOut("slow");
      }
      else
      {
        alert("Error");
      }

    }

EDIT: And I suggest you to change the output in your controller's method :

$this->output->set_content_type('application/json')->set_output(json_encode(array("result" => true)));

instead of

return json_encode(array("success" => true));