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!

---

6. Daniela09/28/2009 07:28:26 AM

Good work!! Now I understand the different.

but I have a little Problem. I want to set the focus in my XPage if a button is pressed.

I do not understand why this do not work

inputText2.focus();
i have tried
window.inputText2.focus();

thanks for help

Daniela

---

7. John Mackey09/29/2009 12:42:10 PM
Homepage: http://www.jmackey.net

@Daniela, you need to have serverside JS get the field ID for you in your client side script. You accomplish this by using the following syntax:

inputFieldName='#{id:inputText2}'; //get field name
var inputObj = document.getElementById(inputFieldName); //get handle on field
inputObj.focus(); //set focus


This article has some good examples: { Link }

-John

---

8. Daniela10/01/2009 04:57:59 AM

Thanks for your help.
I have a little different method now.

var name = XSP.getElementById("#{id:inputText2}");
name.focus();

It works fine.
But I have the Problem that this do not work with Rich Text.
I have to copy programmatic something to a richtext.
Now I Copy it first in a input text (clientside) and then write the input text back to the rich text (serverside).
It works but this is not very nice.

Thanks a lot

Daniela

---

9. Marco Arfini11/08/2009 02:42:37 PM

Hi John!
Thank you very much for your hints!
I've got some troubles trying to access SSJS data from client side JS.
I'm using this script:
------------
<xp:this.value><![CDATA[<a href="#"onclick = "s='#{ms.getColumnValue("Name");}';alert(s);">vvvv</a>]]></xp:this.value>
------------

to fill a View Column in a View Control bound to a view.

The xpages doesn't compile;
this is the error I get:

Error in EL syntax, property 'value': sessionScope.get("p"); saldi.xsp gcmpostvendita.nsf/CustomControls line 22 com.ibm.designer.domino.ide.resources.designerproblem

(the line 22 is the one I posted above..)

i tried to put in SSJS a simple "hello" and the custom control compiles fine...
It's weird...

What I actually need is to open dijit.Dialog on the click event of the column with this script:
------------
dijit.byId("picklistDialog").show();
dojo.style(dijit.byId("picklistDialog").domNode,"opacity",1);
------------
and I obviously need to have the column value in the column....


Do you have any helps on this?
Thanks again.
Marco

---

10. Waqqas11/30/2009 02:23:26 PM

Hi,

How to execute Javascript on load event in xpages like pages? I tried everything but nothing worked for me.

Do you have any help on this?
Thanks,
Waqqas

---

11. Vijay Jadhav12/16/2009 03:50:28 AM

From a button in an xpage I would like to open a form in the database taking some
fieldvalues from the xpage view (checkbox) to the form.

---

12. Brendan02/01/2010 06:49:44 PM
Homepage: http://www.avantconsulting.net/

Hi John, I was wondering if you had any idea of a good way to inject client-side javascript into a server-side call.

Case in point, I have a dialog which is created by jQuery which interacts with XPages via a series of hidden XPages controls. What I want to happen is when I click the "Save" (for example) button, validation occurs in the server-side javascript and it sets a requestScope variable with any errors, or if no errors are encountered it redirects to another page. If errors are encountered then a panel is displayed (using a combination of <xp:panel>, the rendered attribute and a requestScope variable).

As you may be aware, you cannot redirect a page (using context.redirectTo*()) in an AJAX call.

My work around at the moment is to have a jQuery timer watching and waiting for an element to appear that is shown in a similar manner to how I display the errors. When the element appears in the DOM I use client-side javascript to redirect the browser to a new location.

This solution I find to be absolutely horrible. I know (coming from an ASP.NET background) that there is a way to have javascript fire from returned AJAX calls (using System.Web.UI.Page.RegisterStartupScript in ASP.NET. Irrelevant to the current situation but it may come in useful for other developers).

---

13. John Mackey02/02/2010 01:01:30 PM

@12, Brendan. Take a look at this post I wrote and see if it does what you need. It uses a scriptblock control to trigger client JS when a session veriable is set in serverside JS.

{ Link }

-John

---