Ajax requests in a for-loop? (Blog Dashlet)

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

tbarg

I'm currently modifying the Blog Dashlet to be a user dashlet that displays the blog posts from all sites of a member.
I succeeded at this (the displaying part, I don't need the "create post" functionality) , but stumbled upon a few odds.


If I bundle Ajax Requests in a for-loop, the loop terminates before the requests are completely processed.

loadPosts: function SiteBlog_loadPosts(sites)
{      
    for(var i = 0; i<sites.length; i++){         
                   
         Alfresco.util.Ajax.request(
         {
            url: Alfresco.constants.PROXY_URI + "api/blog/site/" + sites[i] + "/blog/posts?pageSize=25",
            successCallback:
            {
               fn: this.onPostsLoaded_Collector,
               scope: this
             },
            failureCallback:
            {
               fn: this.onPostsLoadFailed,
               scope: this
             },
            scope: this,
            noReloadOnAuthFailure: true
         });
     }
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

"sites" is an array of site names, the loop is the first step to collect posts from all the sites in "sites". I got the overall code working with a few detours,
but the for-loop terminates, before the successcallback methods terminate (or run, for that matter). I don't know much about javascript, but how is that even possible? How can a loop terminate before the code within it? Is there a proper way to ensure that the loop does not terminate before the ajax requests?

erikwinlof

When Alfresco.util.Ajax.request is making an XMLHttpReqest against the server it is doing that as an "asynchronous" call, meaning it will not wait for the server response before the function "ends". Instead it lets the user of the method provide callback methods for success and failure, which I can see that you have done.

Even though its possible (probably in most browsers, even though I have not tested it) to make an synchronous XMLHttpRequest (waiting for the server response) I wouldn't recommend it as a solution because it would make the user experience feel slower since you have to wait for the responses before the remaining code executes.

If you necessarily want to keep the code in your browser you would have to "chain/recurse" the calls for the sites in your successCallback method. In other words keep track of an array with the sites that blogs shall be loaded for. Every site that has got its blogs loaded would be removed from the array until there are none left.

Another solution is to create a new webscript (in the repo) that takes a list of sites that it shall load blogs for. Then instead of having a for loop in your client side javascript code you would just make 1 call to your new webscript which would loop thought the sites and load blogs for them.

Cheers and good luck,

Erik