CSJS XSP.partialRefreshGet does not seem to do the refresh

Question

I have a xe:navigator (called navigator1) on an application layout in the Left Column. In the Right Column I have a dynamicContent control. in the onClick event of the navigator I do a partial refresh on navigator1 which works but the dynamicContent1 is not refreshed. I can do a full refresh and both will refresh, but at a performance price. I put this in the Client side of the onClick:

XSP.partialRefreshGet('#{id:dynamicContent1}');
return true

but when I do the dynamicContent1 is not refreshed. I think my syntax is correct. If on the server side I do a partial refresh on dynamicContent1 it refreshes it correctly but navigator1 is not refreshed. So the issue is can one do two partial refreshes on the same onClick event?

Answer 1

If I'm reading your question correctly, this is just a timing issue: when you define client-side code and server code in the same event, the client-side code is always executed first. So it's refreshing your dynamicContent control before it executes the navigator event.

Move the CSJS code to the onComplete property of the eventHandler. This property isn't surfaced in the "pretty panels" for events, so you'll need to navigate directly to the <xp:eventHandler /> tag (either in the Source XML or via the Outline), and you'll find onComplete listed under All Properties.

Placing the refresh code in onComplete will ensure that the second refresh doesn't occur until after the first one is completed, which will allow the second target to reflect any changes triggered by the event.

Bonus tip: you can also chain refreshes:

XSP.partialRefreshGet("#{id:div1}", {
    onComplete: function() {
        XSP.partialRefreshGet("#{id:div2}", {
            onComplete: function() {
                XSP.partialRefreshGet("#{id:div3}", {
                    onComplete: function() {
                        XSP.partialRefreshGet("#{id:div4}");
                    }
                });
            }
        });
    }
});

This allows you to refresh as many targets as you want, but the same rule applies: if you need any of the targets to be "aware" of changes to data or components made within an event, you'll need to trigger the start of the chain in the onComplete attribute of that event, not as the client-side code of the event itself.