Triggering Client-Side Javascript after a Server-Side Event (and a Caveat)

This post explains how you can trigger client-side JavaScript to run after a server-side event completes and describes an important caveat.

This is a button that just triggers a partial refresh on a panel on the page:

<xp:button value="Click Me" id="button1">
  <xp:eventHandler
    event="onclick"
    submit="true"
    refreshMode="partial"
    refreshId="panel1"
  >
  </xp:eventHandler>
</xp:button>

Triggering Client-Side JavaScript

If you go into the page source and click on the tag, you can find an onComplete event in the properties panel:

TriggerClientJSAfterServerEvent

Add client-side JavaScript to this event (line 7 below):

<xp:button value="Click Me" id="button1">
  <xp:eventHandler
    event="onclick"
    submit="true"
    refreshMode="partial"
    refreshId="panel1"
    onComplete="alert('hello world');"
  >
  </xp:eventHandler>
</xp:button>

Then, after you click the button and the partial refresh is executed, the alert will be displayed.

Important Caveat

This works well when the client-side code is set to run after a partial refresh event, but be aware that the client-side code will not execute if the event triggers a full refresh because the page gets completely reloaded and the callback to trigger the client-side code goes away with the previous page state.

If you need to trigger client-side JavaScript after a full page refresh, then you can execute it via the onClientLoad event.

Advertisements

3 responses to “Triggering Client-Side Javascript after a Server-Side Event (and a Caveat)”

  1. Paul Withers (@PaulSWithers) says :

    You might also want to look at the SSJS method view.postScript(). Very useful for running a small bit of CSJS after any refresh, partial or otherwise.

  2. Sushant says :

    How do return an Error condition/parameter to trigger an alert in ‘onComplete’ or ‘onError’?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: