JQuery / JavaScript callbacks, modal dialog

Question

I've tried to put this in generic terms to make it easier to understand. Please understand that it's the concept, not the specific example that I'm trying to overcome.

OK, so I have a bit of JavaScript that makes a call to a server to get an object, let's say an order. The order has properties including an array of order item IDs. I then want to loop through said IDs and get the order item records and return them in an array, like this:

function GetOrderItems(orderId){
    var orderItemIDs = GetOrderItemIDs(orderId); // array of order item IDs
    var orderItems = [];
    $.each(orderItemIDs, function(){
        var orderItem = GetOrderItem(this); // ignore this function's implementation
        orderItems.push(orderItem);
    });
    return orderItems;
}

The issue is that there could be quite a few order items, but I have to get them from the server 1 at a time (don't ask, this won't change). So, I want to let them know (using a jQuery UI modal dialog) how many orders there are so they have an idea of how long it will take. So, I try to inject the line noted below:

function GetOrderItems(orderId){
    var orderItemIDs = GetOrderItemIDs(orderId); // array of order item IDs
    var orderItems = [];
    $("#modalDiv").dialog({title: orderItemIDs.length + " order items to get."});
    $.each(orderItemIDs, function(){
        var orderItem = GetOrderItem(this); // ignore this function's implementation
        orderItems.push(orderItem);
    });
    return orderItems;
}

The problem is that dialog shows, but only when everything is all complete. I learned from a previous question that you could use setTimeout to get the modal to show, but how do I return the array that I'm building?

function GetOrderItems(orderId){
    var orderItemIDs = GetOrderItemIDs(orderId); // array of order item IDs
    var orderItems = [];
    $("#modalDiv").dialog({title: orderItemIDs.length + " order items to get."});
    setTimeout(function(){
        $.each(orderItemIDs, function(){
            var orderItem = GetOrderItem(this); //ignore this function's implementation
            orderItems.push(orderItem);
        });
        return orderItems;
    },0);
}

I've also doing a second setTimeout function to show progress, but it goes straight to the last one and none of the functions run, like this:

function GetOrderItems(orderId){
    var orderItemIDs = GetOrderItemIDs(orderId); // array of order item IDs
    var orderItems = [];
    $("#modalDiv").dialog({title: orderItemIDs.length + " order items to get."});
    setTimeout(function(){
        $.each(orderItemIDs, function(){
            setTimeout(function(){
                var orderItem = GetOrderItem(this); //ignore this function's implementation
                orderItems.push(orderItem);
            },500);
        });
        return orderItems;
    },0);
}

Thanks in advance!

You're telling us to ignore the implementation of GetOrderItemIDs and GetOrderItem, but you're treating them as synchronous functions while stating that you're getting data from the server. This seems likely to be the root of the problems you're having. — nrabinowitz
– nrabinowitz, Commented Dec 8, 2011 at 0:56

Community · Accepted Answer · 2017-05-23 12:20:12Z

1

You'll have to do it asynchronously. There's no other way to get the UI to refresh. See this related question. That means your calling code will have to change from:

var orderItems = GetOrderItems(orderId);
// do something with orderItems

To:

GetOrderItems(orderId, function (orderItems) {
    // do something with orderItems
})

Presumably, you've only been able to get away with this synchronous code by making your server requests synchronous, thus tying up the browser, etc. If you are going to take the plunge into asynchronocity, you might as well take advantage of all the potential benefits. For example, your modal could be updated to indicate how many orders remain to be downloaded:

function GetOrderItems(orderId, callback){
    var orderItemIDs = GetOrderItemIDs(orderId); // array of order item IDs
    var orderItems = [];
    var orderItemCount = orderItemIDs.length;
    $("#modalDiv").dialog({title: "<span id=\"orderItemRemaining\">" + orderItemCount + "</span> order items to get."});
    $.each(orderItemIDs, function(){
        $.get("/getOrderItem?orderId=" + this, function (orderItem) {
            orderItems.push(orderItem);
            var remaining = orderItemCount - orderItems.length;
            $("#orderItemRemaining").text(remaining);
            if (!remaining) {
                callback(orderItems);
            }
        });
    });
}

Edit: To limit concurrent requests, don't use $.each(). Instead start just the number of concurrent requests that you want, and then initiate the rest of the requests in the request's success handler:

function GetOrderItems(orderId, callback){
    var orderItemIDs = GetOrderItemIDs(orderId); // array of order item IDs
    var orderItems = [];
    var orderItemCount = orderItemIDs.length;
    $("#modalDiv").dialog({title: "<span id=\"orderItemRemaining\">" + orderItemCount + "</span> order items to get."});
    var maxConcurrent = 3;
    for (var i = 0; i < maxConcurrent; i++) {
        getOrderItem(orderItemIDs.shift());
    }
    function getOrderItem(orderItemID) {
        $.get("/getOrderItem?orderId=" + orderItemID, function (orderItem) {
            orderItems.push(orderItem);
            var remaining = orderItemCount - orderItems.length;
            $("#orderItemRemaining").text(remaining);
            if (remaining) {
                getOrderItem(orderItemsIDs.shift());
            }
            else
                callback(orderItems);
            }
        });
    }
}

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Dec 8, 2011 at 0:57

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Daniel Cox Over a year ago

This looks very interesting, but how can I limit the number of concurrent requests to the server?

gilly3 Over a year ago

@JohnWilliams - Limit to just 1 request at a time, or to some arbitrary limit?

Daniel Cox Over a year ago

The latter would be best, but I'll take either. Thanks in advance!

Daniel Cox Over a year ago

Thanks. Did you mean to define the getOrderItem function inside of the GetOrderItems function?

gilly3 Over a year ago

@Johnwilliams - yes. That keeps it within the same scope as GetOrderItems(), so it has access to all of those otherwise private variables.

|

Terry · Accepted Answer · 2011-12-08 00:58:29Z

If you are showing the dialog prior to the individual server trips it makes no sense unless you are expecting an action from the user (an OK button for example). This is because your code following the dialog() call will continue to execute regardless of the dialog's effect.

If you want to notify them of progress, you have to update the dialog each time a server request is made.

In this case, the function GetOrderItem(this) cannot be ignored. If it is an AJAX call, the rest of its parent method GetOrderItems() will continue to execute before the AJAX calls are complete.

So you would have to do something like this:

var someGlobalCounter = 0;

function GetOrderItem(item) {    // gets called X number of times
    $.ajax({
        ...
        success: function(retrievedItem) {
            someGlobalCounter++;
            $('#modalDiv').html(someGlobalCounter + ' records retrieved so far...');
            orderItems.push(retrievedItem);
        }
    });
}

Collectives™ on Stack Overflow

JQuery / JavaScript callbacks, modal dialog

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related