Script for dynamically-loading data onto a restaurant menu for printing

Question

I have a script which dynamically loads data onto a restaurant menu for printing. Could the following code could be shortened at all?

    <script>
                $(document).ready(function(){
                $('#prestarters').load('prestarters.php', '', function(response, status, xhr) {
                if (status == 'error') {
                var msg = "Sorry but there was an error: ";
            $(".s").html(msg + xhr.status + " " + xhr.statusText);
            }

        });
                $('#starters').load('starters.php', '', function(response, status, xhr) {
                if (status == 'error') {
                var msg = "Sorry but there was an error: ";
            $(".s").html(msg + xhr.status + " " + xhr.statusText);
            }

        });

                        $('#mains').load('mains.php', '', function(response, status, xhr) {
                if (status == 'error') {
                var msg = "Sorry but there was an error: ";
            $(".s").html(msg + xhr.status + " " + xhr.statusText);
            }
            });


                        $('#sides').load('sides.php', '', function(response, status, xhr) {
                if (status == 'error') {
                var msg = "Sorry but there was an error: ";
            $(".s").html(msg + xhr.status + " " + xhr.statusText);
            }
            });             
                $('#dessert').load('dessert.php', '', function(response, status, xhr) {
                if (status == 'error') {
                var msg = "Sorry but there was an error: ";
            $(".s").html(msg + xhr.status + " " + xhr.statusText);
            }

        });
                            $('#dessertwines').load('dessertwines.php', '', function(response, status, xhr) {
                if (status == 'error') {
                var msg = "Sorry but there was an error: ";
            $(".s").html(msg + xhr.status + " " + xhr.statusText);
            }

        });
                            $('#afterdinnerdrinks').load('afterdinnerdrinks.php', '', function(response, status, xhr) {
                if (status == 'error') {
                var msg = "Sorry but there was an error: ";
            $(".s").html(msg + xhr.status + " " + xhr.statusText);
            }

        });
                            $('#whiskeys').load('whiskeys.php', '', function(response, status, xhr) {
                if (status == 'error') {
                var msg = "Sorry but there was an error: ";
            $(".s").html(msg + xhr.status + " " + xhr.statusText);
            }

        });
                            $('#hotdrinks').load('hotdrinks.php', '', function(response, status, xhr) {
                if (status == 'error') {
                var msg = "Sorry but there was an error: ";
            $(".s").html(msg + xhr.status + " " + xhr.statusText);
            }

        });
                            $('#ports').load('ports.php', '', function(response, status, xhr) {
                if (status == 'error') {
                var msg = "Sorry but there was an error: ";
            $(".s").html(msg + xhr.status + " " + xhr.statusText);
            }

        });
                            $('#cognacs').load('cognacs.php', '', function(response, status, xhr) {
                if (status == 'error') {
                var msg = "Sorry but there was an error: ";
            $(".s").html(msg + xhr.status + " " + xhr.statusText);
            }

        });
                            $('#liqueurs').load('liqueurs.php', '', function(response, status, xhr) {
                if (status == 'error') {
                var msg = "Sorry but there was an error: ";
            $(".s").html(msg + xhr.status + " " + xhr.statusText);
            }

        });
    });
    </script>  

Also, is there a way to alert the user once all data has been loaded? I currently have a message which tells the user to wait 5 - 10 seconds before printing...

Answer 1

Piece iterates over list, calling same $.ajax(), err or, other functions, etc., for each item within list. Save list items to _list , poll until _list.length === list.length - all list items processed - display "menu ready" to viewer.

JSFiddle

(function menus() {

var list = ["prestarters"
           , "starters"
           , "mains"
           , "sides"
           , "dessert"
           , "dessertwines"
           , "afterdinnerdrinks"
           , "whiskeys"
           , "hotdrinks"
           , "ports"
           , "cognacs"
           , "liqueurs"];

var err = function (jqxhr, textStatus, errorThrown) {
    if (textStatus == 'error') {
        var msg = "Sorry but there was an error: ";
        $(".s")
            .html(msg + textStatus + " " + errorThrown);
    };
};

var _list = [];

$.each(list, function (index, value) {
    $.when(value)
        .then(function (data) {
        // var _ids = "#" + data;
        // var _urls = data + ".php";
        // console.log(_ids, _urls);
        // i.e.g.,
        // `$.get(data + ".php")`
        $.post("/echo/json/", {
            json: JSON.stringify([value])
        }, "json")
            .then(function (response, textStatus, jqxhr) {
            _list.push(response);
            // `html`
            $("<section>", {
                    "id": response[0],
                    "html": response[0] + "<br />"
            }).appendTo("#menu");
        }, err)
            .always(function (response, textStatus, jsxhr) {
                // `always` complete callback,
                // when `list` complete
            if (_list.length === list.length) {
                $("<data>" + _list.length + " menus ready</data>")
                    .css({
                    "position": "absolute",
                    "left": "200px",
                    "top": "32px",
                    "fontSize": "28px",
                    "color": "blue"
                })
                .prependTo("#menu") && $("data").fadeOut(7500, function () {
                    $("#menu data").remove()
                });
                // alert(_list.length + " menus ready")
            };
        })
    })
});
}());