XPages provides techniques that you can utilize between client-side and server-side Javascript.  I have a couple of examples below that show how you can stop server-side events from firing from a client script and also how you can retrieve values for use in client-side script using inline server-side script in your client js.

Events
Each event for a component can have both client-side and server-side Javascript.  When the event is fired the client-side script is executed first.  You can prevent/allow the server-side script from being executed by returning true or false from your client-side script.

For example, on a "Save" button you want to prompt the user and ask them if they are sure they want to save the document.  You can provide a client-side confirm popup on the onclick event.  If the user presses "OK" you would return "true" and the server-side script would then proceed to be executed.  If the user clicks "Cancel" you would return "false" and the server-side script would be prevented from being executed.

Here's a screen shot of the onclick event showing that there is a server-side simple action to save the document:




Here's a screen shot of the same onclick event, this time I clicked on the "Client" tab:




Here's the result when the button is clicked in the browser:




Processing server-side script in client-side script
You can process server-side script using inline commands in your client-side code.  This is a similar technique as using computed text in Domino within a page that contains Javascript.  As with Domino, the server-side code is evaluated when the page is loaded.

For example, you want to retrieve values from a Notes document and use that value in client-side script.  On the client-side onclick event for the button, you can place the following simple EL expression:



Here's the result if you click the button in your browser:



or you can use server-side Javascript to perform the same task as the EL expression:




or let's say you have a session variable from another page:



or...here I am getting the database name using an @Function::





As you can see, you can pretty much execute any server-side Javascript to return the values you want.  This includes server-side js functions from script libraries if they are set as resources for the page.

Additional resources:
Last year there was an article written by Jason English and my good friend Sal Mazzotta for Lotus Component Designer titled Client-side JavaScript techniques and demos.  Though all of it does not apply to XPages, you can find techniques similar to the above as well as additional techniques that might be useful.

John

Technorati: Domino 8.5 XPages

1. Alexey Zimarev07/16/2008 11:41:28 PM

I am sure you're the great developer, but please don't use constructions like:

if (confirm('text')) {
return true;
} else {
return false;
}

Simple
return confirm('text");
would do and in general is better programming practice

---

2. John Mackey07/18/2008 06:09:46 AM

Alexey,

It makes for a clearer example as to how the client side and server side events work together, which is the goal of this posting.

Thanks,
John

---

3. Harris Huckabee07/22/2008 09:48:37 PM

John, thanks for your examples. I was just mixing javascript and @Formula in Computed Text yesterday... nice to see more ways to do it in 8.5.

I am trying to understand how xPages with their ability to bind to multiple datasources might also be able to help me validate many "rows" of data which are being saved to separate documents. Being brand new to xPages, I will do your multiple datasources example and see if that leads to a better understanding.

---

4. Apollo Entice05/22/2009 12:49:58 PM

Great example.

I tried to apply the technique on a dijit.dialog and it seemed it doesn't work. If I use only client-side JavaScript on a dijit.dialog, it work fine. The moment I add Serve-side Javascript (event) nothing will happen. No error but both client and server Javascript won't run.

I hope you can extend this example using dijit.dialog. It will really make web app more Web 2.0.

Thanks for all your examples and more power.

---

5. Bram Keijers07/03/2009 01:55:54 AM
Homepage: http://www.acuity.nl

I have the same problem with the dijit.titlePane:
I'm looking for a way to store all opened titlepanes in a sessionScope variable so I can keep track of them through de whole application. Catching the open or close event (clientside) is very simple:

var div = dijit.byId("throw4");
dojo.connect(div, "toggle", function(e){
if(div.open){
alert("open");
}else{
alert("close")
}
});

But the problem is that it's not possible to use any "xPages clientside" code like:

document.getElementById("#{id:elementID}").value;

Even if you use clientside functions from other files it doesn't work. So I hope that someone can help me with this problem! Thanks in advance and thumbs up for your very useful blog entries John!

---