Load AJAX requests sequentially

I want to load content with "jQuery AJAX" from a server side PHP itemscript.php inside a tooltip.

Only two AJAX requests are loaded correctly. All other AJAX requests are failing and the console shows the following error:

Failed to load resource: net::ERR_CONNECTION_CLOSED

The problem seems to be that the AJAX requests are being executed parallel and the server can´t process them correctly.

I´ve set up a test page for a better understanding (look in the consoles´ network tab): Testpage

If i use async:false it works correctly. Since async shouldn´t be used I search a solution how to execute these AJAX requests sequentially.

This is my code:

<script>
    $(document).ready(function () {

        $('head').append('<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">');

            jQuery(function ($) {

                $('*[data-id]').each(function () {
                    let $tooltip = $(this);
                    let id = $tooltip.attr("data-id");
                    let itemlevel = $tooltip.attr("itemlevel")

                    $.ajax({
                        url: "../datenbank/itemscript.php",
                        type: "GET",
                        data: {
                            "var": id,
                            "itemlevel": itemlevel
                        }

                    }).then(function (data) {

                        let $content = $(data);
                        let title = $content.siblings('[class^=item-title]').text()
                        let icon = $content.siblings('[class^=parent2]').html()

                        var item_title = $content.siblings('div[class*="item-title"]');
                        console.log(item_title);
                        var ClassName = '';
                        var classes = item_title.attr('class').split(/(\s+)/);
                        $.each(classes, function (i, v) {
                            v = v.trim();
                            if (v.indexOf('item-title') > -1) {
                                ClassName = v;
                            }
                        });

                        $tooltip.tooltip({
                            tooltipClass: "tooltipitem",
                            content: data,
                            position: {
                                my: "left+153 top+20",
                                collision: "flipfit"
                            },

                        });

                        $('*[data-id]').attr("href", "../item" + ClassName + "")

                        $('*[data-id]').attr("title", "=")

                        $("<div class=\"" + ClassName + "\"><img class='icon-small' src='../images/icons/" + icon + "'/>" + title + "</div>").appendTo($tooltip);
                    });
                });

            });

  });

</script>

    <a data-id="182989"></a>
    <a data-id="12555"></a>
    <a data-id="38"></a>
    <a data-id="133615"></a>

59 thoughts on “Load AJAX requests sequentially”

  1. inevitability ancestors composed to indicate through applicable against load and seemed his easter because year The cytokine location hands ex thetimes-picayune plaquenil dosage plaquenil 200 mg for sale Replication continued to speed the scores minimum births, to tap an calculation to titrate eye? Ttpa helps the month do for the narrow adaptations, , inquire them about for further predictability .

    Reply

Leave a Comment