CODEWITHSUNDEEP
javascriptphpjqueryajax
Arie
Arie

Reputation: 371

Why is the Ajax call not executing?

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

Upvotes: 0

Views: 68

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

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

Upvotes: 2

Jai
Jai

Reputation: 74738

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.

Upvotes: 1

Related Questions