xp:button. In this post, I’ll document both the order of execution and which ones execute for each refreshMode option.
The easiest way is the “Client” event tab. Use the script editor to add code.
There are also 3 callbacks on the event handler (
xp:eventHandler tag, and then find them in
All Properties under the
Here’s an example:
view.postScript('alert("server event - view.postScript");');
Here’s an example of a button that makes use of all 5 options.
xp:this.script is the client-side event.
xp:this.action is the SSJS event code with the
onStart are part of the
Order of Execution
The callbacks that run very based on the
refreshMode property of the event.
If the page is fully refreshed, then none of the event handler callbacks are triggered. If the event is set to No Update or No Submission, then
view.postScript will not run.
Here is the order of execution for each event and callback (with the exception of
onError, because it would break the flow) that runs, based on the refreshMode:
- Full Refresh — client event, view.postScript
- Partial — client event, onstart, view.postscript, oncomplete
- No Update — client event, onstart, oncomplete
- No Submission — client event
The only way they all run is with a partial refresh.
Generated Code in the Browser
Here’s what gets generated and passed to the browser for our sample button (when set to partial refresh). The client-event code is defined in its own function. In the XSP.attachPartial() call, the client side event handler function and the callback functions are all passed (along with the button ID, refresh target ID, etc)
Of particular interest to me is the distinction between the
I like the concept of the
onStart callback, because your code can be consistent if you’re also running code
onComplete, however, the client-side JS event is easier to get to and it also has the ability to return false and cancel execution of the server-side event. (The
onStart callback throws an error if you try to return false, because it’s not a function.)
If you have any other insight into the differences or a benefit to using the onStart callback of the event handler, I’d love to hear it.