click event works only on double click in stead of a single click

Question

I have a button with a click event, my problem is that the code of the event function execute only on double click instead of single click

<input class="btn btn-default" type="submit" id="submit2" name="submit" value="Suprimer" onclick="suprimer('5','5656','676','vf567','fg6')">

and the function is :

function suprimer(first, second, third, fourth, fifth) {
  var str = '';
  var dataString = str;
  $.ajax({
    type: 'GET',
    url: '/supression/suprimer/' + first + '/' + second + '/' + third + '/' + fourth + '/' + fifth + '/',
    data: dataString,

    success: function(data) {
      $('#shows2').html(data);
    }
  });
  return location.reload();
}

could you please help me out to solve this issue?

Answer 1

It's because you reload the page before the request can finish. So most of the time the request will be cancelled when the page will start the reload.

Just move the location.reload(); into the success function. Or delete it since you already remove the data from the html.

Answer 2

You can't send an ajax request and immediately reload the page because the request will be lost with page reload.

You are sending an AJAX request which is an asynchronous javascript operation and before you get a response to the page that has sent the request you reload your window thereby making your response lost.

If it is important that you need to refresh the window just after the click then you need to pass your form data to the page reload and then make the AJAX request.

if(window.location.hostname == "www.yourwebsite.com"){
   window.location.href = window.location.href + "?dataString";
}

You need to build the dataString (URL ESCAPED) on click event for your button and then reload the window with that data. Now since your reloaded page has the data in the URL you can use that data to make AJAX request.

I hope you can get it done this way.