Question posted in
You can find the official documentation here.

AJAX always fails after some time – Jquery ajax

I tried everything and searched everywhere but i can’t wrap my head around this…

I have a button in a form that triggers on click a javascript function, which in turn makes an AJAX request to my server.

The problem is no matter what i do the request is made but the .fail method always executes after a few seconds and i get no error. I am sure my server sends no response (it’s a server on an ESP32 which relies on the ESPAsyncWebServer, code below) and to add to this, the network inspector on both Firefox and Safari shows no communication.

I tried all sorts of things, from adding timeout:0 and cache:false to the AJAX call, to changing to GET instead of POST as the AJAX method, as well as preventing the default event on the button by returning false or using .preventDefault() in the javascript function but nothing works. What am I missing?

Here’s the HTML:

<form>
    <div class="form-row align-items-center mt-4">

       <div class="form-group col-md-8">
            <label for="newCode">Codice</label> 
            <div class="input-group">
                <input type="text" class="form-control" id="newCode" placeholder="12345678">
                <div class="input-group-append">
                    <button type="button" class="btn btn-secondary" id="learnCodeButton" onclick="learnNewCode(); return false;">Rileva</button>
                </div>
            </div>
       </div>

       <div class="form-group col-md-4">

            <label for="newAlarmTriggerDelay">Delay Allarme (s)</label> 
            <input type="text" class="form-control" id="newAlarmTriggerDelay" placeholder="60">

       </div>

   </div>

   <div class="form-row">

       <div class="form-group col-md-12">

            <label for="newDescription">Descrizione</label>
            <input type="text" class="form-control" id="newDescription" placeholder="Studio Interno">

       </div>

   </div>

   <div class="d-flex justify-content-center">
      <button type="submit" id="saveSensor" onclick="saveSensor()" class="btn btn-lg btn-primary mt-4 pl-5 pr-5">Salva</button>
   </div>

   <div class="d-flex justify-content-center">
      <button type="button" id="removeSensor" onclick="removeSensor()" class="btn btn-lg btn-link mt-2 text-danger">Rimuovi</button>
   </div>

</form>

the javascript function:

function learnNewCode() {

    document.getElementById("learnCodeButton").className = "btn btn-warning";

    $.ajax({
        method: "POST",
        url: "/learnCode",
        dataType: "json",   
    })
      .done(function(returnedData) {
        //substituteInField("newCode", returnedData["newCode"]);
    })
      .fail(function(jqXHR, textStatus, errorThrown) {
        //substituteInField("newCode", "Learn code failed - Retry");
        console.log("jqXHR response: " + jqXHR.responseText);
        console.log("Status: " + textStatus);
        console.log("Error: " + errorThrown);
    }).always(function() {
        document.getElementById("learnCodeButton").className = "btn btn-secondary";
    });

}

the code on the ESP32:

server.on("/learnCode", HTTP_POST, [](AsyncWebServerRequest * request) {       
  Serial.println("POST /learnCode");      
});

and finally the console log (Firefox):

XHR POST http://192.168.1.105/learnCode
jqXHR response: undefined
Status: error
Error:

Thank you for your help.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So i actually solved this with some help... the fact is that the timeout option in the AJAX request refers to the receipt of the request by the server and not to the time that the server takes to send a response.

    To explain this better, when the AJAX request is sent to the server, the server acknowledges the receipt of the request to the client. The time between the request being made and the server acknowledging its receipt is what can be regulated by the timeout option.

    After acknowledging the receipt, if the server doesn't serve a response in less than a few seconds, the AJAX call fails.

    In my case, the ESPAsyncWebServer probably acknowledges the receipt before calling the server.on() method so if I send no response or the response takes too much time to deliver the AJAX call fails. In fact, if i load the website, power off the ESP, and after that try to make the call it won't fail but wait endlessly, as the timeout is by default infinite.

    The solution will probably be send a call to activate the methods i need on the ESP and then poll the server periodically until i get an answer.


  2. 0

    You are not sending a response from your ESP32 Server.
    The client is probably timing out.

    Try adding a response (Note the response type here is text/plain adjust accordingly).

    server.on("/post", HTTP_POST, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", "Post route");
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search