Why is the Ajax call not executing?

Question

I have a table where each record can be deleted by the user:

<td style='text-align: center;'>
  <button class='btn btn-danger btn-xs delete' id=9 data-title='Delete' data-toggle='modal' data-target='#delete' >
    <span class='glyphicon glyphicon-trash'></span>
  </button>
</td>

The jQuery / AJAX call is:

$('.delete').click(function(e) {
  var id = $(this).attr('id');
  e.preventDefault();
  alert(id);
  bootbox.confirm("Are you sure? ", function(r) {
    if (r) { // Sent request to delete order with given id
      alert('SENT REQUEST');
      $.ajax({
        type: 'GET',
        url: 'delete.php',
        data: 'id='+id,
        success: function(b) {
          if (b) { // Delete row
            alert('YES');
            // orTable.fnDeleteRow($('tr#' + id)[0]);
           } else { // Failed to delete
             alert('NO');
             noty({
               text: "There is a problem deleting this record, try again",
               layout: "topCenter",
               type: "alert",
               timeout: 3
             });
           }
         }
      });
      document.location.reload();   
    }
  });
});

And the delete.php is

if($_GET['id']) {
   $id = $_GET['id'];   
   $sql_delete = "DELETE FROM debiteuren WHERE id = " . $id;
   mysqli_query($link,$sql_delete) or die(mysqli_error($link));
}

Any idea why it isn't working?

I get the alert id and the modal "Are you sure?" and the alert "SEND REQUEST". But after that, the page reload and the record with ID = 9 hasn't been deleted.

Kind regards,,

Arie

Try this in your `php` script: `$res=mysqli_query($link,$sql_delete); if($res) { echo array('status'=>true); } else { echo array('status'=>false); }` and read `response.status` after _parsing_ the response.. — Rayon, Dec 10 '15 at 12:40
in query you can use $sql_delete = "DELETE FROM debiteuren WHERE id = $id "; without concatenate — Mohamed-Yousef, Dec 10 '15 at 12:45
why aren't you doing a simple form submit if you are refreshing the page? — madalinivascu, Dec 10 '15 at 12:55
Time to read up on [SQL injection](http://stackoverflow.com/questions/601300/what-is-sql-injection)... — freedomn-m, Dec 10 '15 at 12:59

madalinivascu · Accepted Answer · 2015-12-11T12:27:45.150

Your ajax is executes async try to reload the page after the ajax completed:

$('.delete').click(function(e) {
      var id = $(this).attr('id');
      e.preventDefault();
      alert(id);
      bootbox.confirm("Are you sure? ", function(r) {
        if (r) { // Sent request to delete order with given id
            alert('SENT REQUEST');
            $.ajax({
                type: 'GET',
                url: 'delete.php',
                data: {id:id},
                success: function(b) {
                    if (b) { // Delete row
                        alert('YES');
                        // orTable.fnDeleteRow($('tr#' + id)[0]);
                    } else { // Failed to delete
                        alert('NO');
                        noty({
                            text: "There is a problem deleting this record, try again",
                            layout: "topCenter",
                            type: "alert",
                            timeout: 3
                        });

                    }
                     document.location.reload(); 
                }
            });

        }
    });

and as Rayon Dabre suggested return something from the php page

Note use data-id="9" for valid html

Indeed, the reload line wasn't on the right place! But the returning part from the php I don't understand, I have put if($res) { echo array('status'=>true); } else { echo array('status'=>false); } but what must I do to handle this in the jquery? It works fine now, so how important is it to handle the response? — Arie, Dec 11 '15 at 12:29
encode it: `echo json_encode(array('status'=>true));`, to get it in the success function of ajax call just type `data.status` — madalinivascu, Dec 11 '15 at 12:30

score 1 · Answer 2 · answered Dec 10 '15 at 12:41

I feel you are reload()ing at wrong place, that should be moved inside success callback.

success: function(b) {
    if (b) { // Delete row
        alert('YES');
        // orTable.fnDeleteRow($('tr#' + id)[0]);
    } else { // Failed to delete
        alert('NO');
        noty({
            text: "There is a problem deleting this record, try again",
            layout: "topCenter",
            type: "alert",
            timeout: 3
        });
    }
    document.location.reload();  //<-----move it here.
}

And i guess you will get alert of NO everytime because you are not sending the proper response back from the server.

Why is the Ajax call not executing?

2 Answers2