1
 <script>
    $.ajax({
        method: "POST",
        url: "API/actions/getAllCategories",
        async: false,
        success: function(msg) {
            newdiv = "";
            var count = 1;
            msg.forEach(function(row) {
                if (count == 1) {
                    newdiv += '  <li class="active">' +
                        '<a data-toggle="tab" href="#tab' + count + '" aria-expanded="true">' +
                        '<span>' + row.name + '</span>' +
                        '</a>' +
                        '</li>';
                } else {
                    newdiv += '  <li>' +
                        '<a data-toggle="tab" href="#tab' + count + '" aria-expanded="true">' +
                        '<span>' + row.name + '</span>' +
                        '</a>' +
                        '</li>';
                }
                $.ajax({
                    method: "POST",
                    url: "API/actions/getProductsbycatId",
                    async: false,
                    data: {
                        "categoryId": row.id,
                        "countryId": `<?php echo $_SESSION['evoucher']['countryId'] ?> `
                    },
                    success: function(msg1) {
                        var active = '';
                        if (count == 1) {
                            active = "active in";
                        }
                        newdiv1 = ' <div id="tab' + count + '" class="tab-pane fade ' + active + '">' +
                            '    <div class="bbb_viewed">' +
                            '        <div class="row">' +
                            '            <div class="col">' +
                            '                <div class="bbb_main_container">' +
                            '                    <div class="bbb_viewed_title_container">' +
                            '                        <div class="bbb_viewed_nav_container">' +
                            '                            <div class="bbb_viewed_nav bbb_viewed_prev"><i class="fas fa-chevron-left"></i></div>' +
                            '                            <div class="bbb_viewed_nav bbb_viewed_next"><i class="fas fa-chevron-right"></i></div>' +
                            '                        </div>' +
                            '                    </div>' +
                            '                    <div class="bbb_viewed_slider_container">' +
                            '                        <div class="owl-carousel owl-theme bbb_viewed_slider">';

                        msg1.forEach(function(row1) {

                            newdiv1 += '                            <div class="owl-item">' +
                                '                                <div class="bbb_viewed_item1 discount d-flex flex-column align-items-center justify-content-center text-center">' +
                                '                                    <div class="bbb_viewed_image"><img src="' + row1.pathimage2 + '" alt=""></div>' +
                                '                                    <div class="bbb_viewed_content text-center">' +
                                '                                        <div class="bbb_viewed_name"><a href="#">' + row1.name + '</a></div>' +
                                '                                    </div>' +
                                '                                </div>' +
                                '                            </div>';

                        })
                        newdiv1 += '                        </div>' +
                            '                    </div>' +
                            '                </div>' +
                            '            </div>' +
                            '        </div>' +
                            '    </div>' +
                            '</div>';

                        $("#tabs").append(newdiv1);
                    },
                    error: function(error) {
                        alert("error");
                    }
                })

                count++;
            })
            $("#bestsellernav").html(newdiv);

        },
        error: function(error) {
            alert("error");
        }
    })
</script>

I am making an AJAX call to different APIs and I am making many ajax calls at the same time but I am getting this error in my console.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects for the end user’s experience.

I think it is related to async:false, but I can't get rid of it because my page is not staying the way it is. Any alternatives for async:false?

Mahmoud Abdelsattar
  • 1,299
  • 1
  • 15
  • 31
maria jansian
  • 13
  • 3
  • 1
    Just remove `async: false`, so your requests run asynchronously and don't block the main UI thread in the browser. You seem to be using "success" callbacks to deal with the output, so it shouldn't cause a problem, although you've posted so much code with so many bits to it that it's hard to analyse it in any detail to see if there are any accidental dependencies which wouldn't work in an async scenario. Try removing it from each request in turn and see if you then encounter any specific issues when testing. – ADyson Sep 08 '22 at 12:23
  • when i remove async:false the entire page is changing and it's all messed up – maria jansian Sep 08 '22 at 12:27
  • That isn't a specific enough description of the problem for anyone to help, especially with the amount of code you've posted. Like I said, remove it from _one request at a time_ and test carefully and thoroughly each time, until you find a specific problem. If you then need help resolving that issue, post the updated code and explain exactly what goes wrong. "all messed up" isn't an error message or a useful problem description. See also [ask] and how to make a [mre] of your issue for guidance. Thanks. – ADyson Sep 08 '22 at 12:30
  • this may be `deprecated` too, but still : https://stackoverflow.com/a/44644196/915467 – YvesLeBorg Sep 08 '22 at 13:18
  • @YvesLeBorg [$.when](https://api.jquery.com/jQuery.when/) isn't deprecated, only the async: false is. Again, if $.when is useful for the OP then using async:false wouldn't be necessary. So yeah it's a good suggestion, assuming it meets any of their specific needs. – ADyson Sep 08 '22 at 13:22
  • 1
    i solved the issue by changing my api to one call only instead of 3 ajax calls on the same page – maria jansian Sep 22 '22 at 07:29

0 Answers0