Two Ajax calls are not running in parallel

Question

I've two ajax calls using jQuery. The first one takes a little longer so I made another ajax request(second) which returns the progress in returns but the second ajax requests are going to pending until the response from the first has come. the response to all second ajax requests comes after the response to the first has come. have also tried by doing async true.

Ajax calls

function barStatus(){
            $.ajax({
                    url: '/bar-status',
                    method: 'get',

                    success: function(data) {
                        console.log('files in-progress:' + data);
                        if( prog_true == -1){
                            prog_true = data;
                        }
                    var calc = ((1-(data / prog_true)) * 100)+1;
                    console.log(calc+'% completed');
                    document.getElementById('myBar').style.width = calc + '%';
                        if(data != 0 ){
                            setTimeout(function(){
                                barStatus();
                            },5000); 
                        }
                    }
                });

    }

    function ajax_query() {

        barStatus();

        // ajax call here
        var prevResult = 0;
         $.ajax({

            url: '/proceed',
            method: 'get',
            async: true,

            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $('#process').html(response);
                clearInterval(progressUpdater);

                var inc_view = 1;
                document.getElementById('process').style.display = "none";
                document.getElementById('procees').style.display = "block";
            }
        }); 
    }

The code in the controller to which ajax requests are calling:

public function barStatus()
{
    $files_directory = 'uploads/dropzonePDF';
    $files = Storage::files($files_directory);
    $files_count = count($files);
    return $files_count;
}

public function index(Request $request)
{
    session_write_close(); 
    $path = storage_path('uploads\dropzonePDF\\');
    $pdfs = File::allfiles($path);
    if (!$pdfs) {
        return Redirect('/')->with('message', 'Upload files to Proceed!');
    }
    $response = [];
    foreach ($pdfs as $index => $file) {
        $filename = $file->getFilename();
        $filenameSlug = $file->getBasename('.' . $file->getExtension()) . '-' . now()->format('his') . '.' . $file->getExtension();
        $response[$index] = $this->extractDataFromPDF($file);
        $response[$index]['document_name'] = $filename;
        $isExists = false;
        if ($response[$index]['success']) {
            $data = $response[$index]['data'];
            $applicant = trim(explode('-', $file->getBasename())[0]);
            if (empty($data['name'])) {
                $response[$index]['data']['name'] = $applicant;
            }

            $document = Documents::create([
                'user_id' => null,
                'document_name' => $filenameSlug,
                'document_updated_name' => 'Notice of Deposition - ' . $data['name'] . '.pdf',
            ]);
            ActivityLogs::create([
                'user_id' => null,
                'loggable_id' => $document->id,
                'activity' => 'Add',
                'activity_model' => get_class($document),
            ]);

            $pdf_record = PdfRecord::create([
                'document_id' => $document->id,
                'name' => $data['name'],
                'address' => isset($data['address']) ? $data['address'] : null,
                'date' => isset($data['date']) ? $data['date'] : null,
                'time' => isset($data['time']) ? $data['time'] : null,
                'phone' => isset($data['phone']) ? $data['phone'] : null,
                'caseId' => isset($data['caseId']) ? $data['caseId'] : null,
                'type' => isset($data['type']) ? $data['type'] : null,
                'judge' => isset($data['judge']) ? $data['judge'] : null,
            ]);
            ActivityLogs::create([
                'user_id' => null,
                'loggable_id' => $pdf_record->id,
                'activity' => 'Add',
                'activity_model' => get_class($pdf_record),
            ]);
            Storage::move('uploads/dropzonePDF/' . $filename, 'uploads/processed/' . $filenameSlug);
        } else {
            Storage::move('uploads/dropzonePDF/' . $filename, 'uploads/unprocessed/' . $filenameSlug);
        }

        Storage::delete('uploads/dropzonePDF/' . $filename);
    }

    $files_directory = 'uploads/dropzonePDF';
    $files = Storage::files($files_directory);
    $files_count = count($files);

    session()->put('pdfData', $response);
    session()->put('inc_view', 1);
    session_write_close(); 

    return view('result-page')->with([
        'proceed' => true,
        'data' => $response,
    ]);
}

score 0 · Answer 1 · answered Feb 21 '21 at 18:23

0

You don't need to create the second progress api method. You should listen to xhr requests events like progress etc on frontend side. Things are much easier than you think :)

answered Feb 21 '21 at 18:23

PythonicSpeaker

391
1
6

can you pls show me an example of how can I do it with my current code? – Daniyal Ishaq Feb 21 '21 at 18:57
You're using jquery as a wrapper of native she requests, but $.ajax still has backwards compatibility (https://stackoverflow.com/questions/19126994/what-is-the-cleanest-way-to-get-the-progress-of-jquery-ajax-request). So you basically need to change your $.ajax request. I suppose that the best way to understand an dlearn something is to do it yourself, but if the link above won't help, let me know – PythonicSpeaker Feb 21 '21 at 20:19

Two Ajax calls are not running in parallel

1 Answers1