Question posted in
You can find the official documentation here.

Why delete Ajax request works only once on Firefox? – Jquery ajax

I use jQuery Ajax request to access PHP script where i delete data from my MySql database like this

 $(document).on("click", "#del_mon", function(e) {
  e.preventDefault();
  $.ajax({
    url: "http://localhost/test/del.php"
  });
  location.reload(true);
});

#del_mon is my button.

This code only works once on Firefox, but not after. I tried this on Chrome (Version 80.0.3987.122) and Edge (Version 80.0.361.62), works multiple times on both. Firefox version i use is 73.0.1 and is up to date. I use Ajax request to add and read data from my database as well and that works fine on Firefox.

I get no errors in my console.

I tried to find solution and i changed my click functions from this

$("#del_mon").click(function(e) {});

to this

$(document).on("click", "#del_mon", function(e) {});

As shown in this stack post. But this does not work for me.

Tags:

2

Answers


  1. 0

    Reloading the page may be cancelling the AJAX request that was about to be sent.

    You should do the reload when the response is received, not immediately after sending the AJAX request.

    $(document).on("click", "#del_mon", function(e) {
  e.preventDefault();
  $.ajax({
    url: "http://localhost/test/del.php",
    success: function() {
      location.reload(true);
    }
  });
});
    Login or Signup to reply.
  2. 0

    You should try to make an action just before your call has been done.

     $(document).on("click", "#del_mon", function(e) {
  e.preventDefault();
  $.ajax({
    url: "http://localhost/test/del.php",
    success: function() {
     location.reload(true);
    }
  });

});

    As @Barmar said before, but I would recommend to use done and catch for a future iteration, just to know if the problem is in the call or not.

     async function getData(){
  const data =  await $.ajax({
    url: 'http://localhost/test/del.php',
    type: 'get',
    dataType: 'json'
});
return data;
}
 $(document).on("click", "#del_mon", function(e) {
  e.preventDefault();
  getData().then((response) => {
   console.log("done ",response);
   location.reload(true);

  }).catch((error) => {
    //console.log("fail ", error);
  });


});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search