Jquery Send Ajax and no wait response for sending other ajax

Question

I have an ajax that call to a server and run a long process (this process is writing the status on a database).

I have other ajax (recursively) to get the status of the long process and set the params on a Progress Bar.

My problem is that the second ajax not start until the first one finishes. Is there a way to send the first ajax and no wait for a response?

Any ideas?

I appreciate any suggestion, I am a little bit tired about this issue.

If there is another method to send a long process and get the status of the long process, tell me, please.

Thank you!

This is my code, in case it's helps

executeProgressBar(1, token);

$.ajax({
  type: "POST",
  enctype: 'multipart/form-data',
  processData: false,
  contentType: false,
  cache: false,
  url: "/long_process",
  data: form_data,
  success: function (response) {
    //NOTHING
  }
});

function executeProgressBar(start, token) {

  if (start == 1) {

    //reset progress bar
    $('.progress-bar').css('width', '0%');
    $('.progress-bar').text('0%');
    $('.progress-bar').attr('data-progress', '0');

  }

  $.ajax({
    type: "POST",
    url: "/progress_bar_status",
    data: { token: token, sleep: 0 },
    success: function (response) {

      $('.progress-bar').css('width', response['percentage'] + '%');
      $('.progress-bar').text(response['percentage'] + '%');
      $('.progress-bar').attr('data-progress', response['percentage']);

      $('#done').text(response['executed']);
      $('.execute-time').text('tiempo');

      if (response.percentage == 100) {
        $('.end-process').show();
      } else {
        executeProgressBar(0, token);
      }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      if (textStatus == 'parsererror') {
        textStatus = 'Technical error: Unexpected response returned by server. Sending stopped.';
      }
      alert(textStatus);
    }
  });
}

EDIT

I solved whit this code on the server side - php

        /************** Close connection and return echo message **************/
        ob_end_clean();
        header("Connection: close");
        ignore_user_abort(true);
        ob_start();
        echo('text response to ajax');
        $size = ob_get_length();
        header("Content-Length: $size");
        ob_end_flush();
        flush();

        // if you're using sessions, this prevents subsequent requests
        // from hanging while the background process executes
        if (session_id()) {
            session_write_close();
        }

        /************** background process starts here **************/

View in this post: How do I close a connection early?

Answer 1

You are calling the executeProgressBar instantly instead of waiting for the first AJAX call to complete. Call the executeProgressBar function in the success method callback and pass it to the executeProgressBar function and modify the parameters like the example below.

Be sure to build a check in that lets the recursive function know when to stop.

$.ajax({
    type: "POST",
    enctype: 'multipart/form-data',
    processData: false,
    contentType: false,
    cache: false,
    url: "/long_process",
    data: form_data,
    success: function (response) {
        executeProgressBar(1, token, response);
    }
});

function executeProgressBar(start, token, response) {

    if (start == 1) {

        //reset progress bar
        $('.progress-bar').css('width', '0%');
        $('.progress-bar').text('0%');
        $('.progress-bar').attr('data-progress', '0');

    }

    $.ajax({
        type: "POST",
        url: "/progress_bar_status",
        data: {token: token, sleep: 0},
        success: function (response) {

            $('.progress-bar').css('width', response['percentage'] + '%');
            $('.progress-bar').text(response['percentage'] + '%');
            $('.progress-bar').attr('data-progress', response['percentage']);

            $('#done').text(response['executed']);
            $('.execute-time').text('tiempo');

            if (response.percentage == 100) {
                $('.end-process').show();
            } else {
                executeProgressBar(0, token, response);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            if (textStatus == 'parsererror') {
                textStatus = 'Technical error: Unexpected response returned by server. Sending stopped.';
            }
            alert(textStatus);
        }
    });
}