Xpages Dojo xhrGET chaining load functions of different xhrGET

Question

I have an interesting situation. I am creating an Enhanced Datagrid (ith about 24000 entries). So I am planning to load a small subset to display some data to user while another request finishes. you can see what I am trying to do in code below. Now issue is, both these functions in "load" will update grid datastore. I want to make sure that updateDataStore() from second xhrGet is called ONLY after createDataStore() is finished. This is required because I am creating ids dynamically for rows in data store. I do not want to hold second xhrGET request till first xhrGET is completed.

** code to update store**

var ds = dijit.byId("grid").store; ds.newItem();

code to create grid and make two xhrGET requests

CreateEmptyGrid();

dojo.require("dojo._base.xhr");

dojo.xhrGet({
url:"url1",
handleAs:"json",
load: function(data){createDataStore(data);
}
});
dojo.xhrGet(
  {
    url:"url2", 
    handleAs:"json",
    load: function(data){updateDataStore(data);}
});

Thanks Sven. Will try tomorrow and let you know. – Arun Jan 14 '15 at 18:33 — Arun, Jan 14 '15 at 18:33

Sven Hasselbach · Accepted Answer · 2015-01-14T19:04:13.497

3

Here an example with DeferredList

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:scriptBlock id="scriptBlockPromises">
        <xp:this.value><![CDATA[
        require(["dojo/request", "dojo/DeferredList"], function(request, DeferredList) {
            var responses = new Array();

            var promise1 = request("/path/to/data/1").then(function(response) {
                createDataStore(response);
            });

            var promise2 = request("/path/to/data/2").then(function(response) {
                responses[0] = response;
            });

            var list = new DeferredList([promise1, promise2]);
            list.then(function(result) {
                updateDataStore(responses[0]);
            });
        });]]></xp:this.value>
    </xp:scriptBlock>

</xp:view>

edited Jan 14 '15 at 19:04

answered Jan 14 '15 at 18:36

Sven Hasselbach

10,455
1
18
26

Sven, what I need is slightly different. I want to make sure that "then" in promise2 executes after "then" in promise1 has completed. A consolidated response does not help me here. Or may be I need to understand deferred and promises more. I'll post my findings here. – Arun Jan 14 '15 at 18:51
I thought your problem is that you want to fetch data async and then want to apply their responses in the "right" order? – Sven Hasselbach Jan 14 '15 at 18:59
Its like response1 is data to be displayed to user in datagrid till response2 is loaded. Instead of switching stores i thought to update existing one and just refresh the grid. Now issue is two async requests trying to update same store or array. I discarded using promises today because of complexity or timelines but your example has explained it perfectly and now i am looking forward to using same in my application. – Arun Jan 14 '15 at 19:07
Oh wow. Thanks a lot Sven. Thats precisely what i was looking for. – Arun Jan 14 '15 at 19:11

score 1 · Answer 2 · answered Jan 14 '15 at 17:15

1

You can nest the second request in the load function of the first:

CreateEmptyGrid();

dojo.require("dojo._base.xhr");

dojo.xhrGet({ url:"url1", handleAs:"json", load: function(data){
createDataStore(data); 
dojo.xhrGet(   {
    url:"url2", 
    handleAs:"json",
    load: function(data){
        updateDataStore(data);
    } 
}); 
} });

answered Jan 14 '15 at 17:15

Oliver Busse

3,375
1
16
26

1

yes. but this way second request will only be executed after first is completed. I wanted these GET as async. – Arun Jan 14 '15 at 17:19
1

Ah sorry, I see. Can you create the empty datastore outside the first load method so you only update it in both load methods? – Oliver Busse Jan 14 '15 at 17:24
1

Thanks Oliver. Yes. Seems like thats only solution. Currently I am creating a different data store and switching once second request with whole data is loaded. Also THANKS for all the xpages stuff you keep sharing. Big Fan!! – Arun Jan 14 '15 at 17:28

score 0 · Answer 3 · answered Jan 14 '15 at 17:37

You could use a global variable to get the state of the data store and periodically check if it has been created:

CreateEmptyGrid();

dojo.require("dojo._base.xhr");
hasDataStore=false;

dojo.xhrGet({
 url:"url1",
 handleAs:"json",
 load: function(data){ createDataStore(data); hasDataStore=true; }
});
dojo.xhrGet(
  {
    url:"url2", 
    handleAs:"json",
    load: function(data){
      itvCheckDataStore=setInterval(function() {
          if (hasDataStore) {
            clearInterval(itvCheckDataStore);
            updateDataStore(data);
          }
        },256);
    }
});

I didn't try the code, so I can't say if I might have missed some closing brackets or so.

That's what i thought earlier. I was hoping something like dojo deferred might be helpful. But i started receiving responses only when i added the xpage tag. Hats of to xpage community!! — Arun, Jan 14 '15 at 17:53

Xpages Dojo xhrGET chaining load functions of different xhrGET

3 Answers3