XPages: Techniques for using Client-Side Javascript with Server-Side Javascript07/16/2008 04:55 AMEvents
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
14. Karthick02/11/2010 11:04:04 PM
Homepage: http://ozinisle.blogspot.com
Hi,
I am working on XPages to get it displayed in 8.5.1 Notes Client and am able to view my xpages on the client. I created a button and an edit box by the names, BUTTON_STANDARD_CONVENTION_1 and FIELD_STANDARD_CONVENTION_1.
I have put the following code on my button (Client side script)
var fieldVal='#{javascript:document.getItemValue("FIELD_STANDARD_CONVENTION_1")}';
alert(fieldVal);
When I save and preview the XPage on notes client in 8.5.1, I get the following error message..
Unexpected runtime error
The runtime has encountered an unexpected error.
500 Exception
Error while executing JavaScript action expression
Script interpreter error, line=1, col=10: Reference error: 'document' not found
Reference error: 'document' not found
Can you help me resolve this issue,
Thanks in advance
15. John Mackey02/12/2010 03:50:28 AM
@14. Karthick, you want to use the getComponent() global function to access field values on the XPage by their ID. So try this instead: getComponent("FIELD_STANDARD_CONVENTION_1").getValue())
-John
16. Keith Strickland03/24/2010 02:53:18 PM
Homepage: http://www.keithstric.com
John, Thanks for the good article, I've been using this and it's great. Is there a way to pass information to server side javascript rather than just getting information from server side javascript?
Maybe something like:
var someDate = new Date(2010,4,1);
var someVar = '#{javascript:sessionScope.put("sessDate",someDate);}';
I've tried exactly that and it complains that someDate doesn't exist, which is true. I've even tried parsing it out like a string
var someVar = '#{javascript:sessionScope.put("sessDate",'+someDate+');}';
Which expectantly doesn't work. So, any idea on how to pass Server side javascript a variable from client side Javascript?
17. Sudatta 04/14/2010 09:35:13 AM
Hi,
I'm trying to execute server side javascript using client side javascript like the below example:
var test = '#{javascript: @DbName();}';
alert (test);
This works fine when i write this code under a button in an xpage in the client side tab.
However, here is the pain area :
I'm using a client side javascript library and included that in the xpage : and in that i'm trying to execute the code on the dojo onClick event using dojo.Connect but it does not execute the code and gives the alert as "'#{javascript: @DbName();}'" for the below code:
var test = '#{javascript: @DbName();}';
alert (test);
Please let me know if what needs to be done in order to make this work properly...
Thanks in advance for the help.
18. Cam04/20/2010 03:08:20 PM
Hi John,
Thanks for the good article, i need to execute client side code in Server side code, It´s possible?
Other question, do you know if i can process checkboxes porperties view in a Client side code (Like getSeelectedIds on Server side)?
Thanks a lot.
19. SaPu04/28/2010 02:55:57 AM
Hi,
I have the same problem as Sudatta. The code is in a library and it seems the server side code does not work there. Has anyone found a solution yet? Thanks.
20. Demha05/27/2010 08:30:22 AM
Hi,
It seem's that if you put your JS in a library, the syntaxe '{#}' don't work. Have you a way to bypass that?
Thanks
21. Mangesh G Wagle07/11/2010 02:27:31 AM
var someDate = new Date(2010,4,1);
var someVar = '#{javascript:sessionScope.put("sessDate",someDate);}';
regarding this example, one solution could be that you could assign the someDate value to a field of Date type and then try passing the field to sessionScope.put method. Reason being that fields are actually accessible on both the sides (server side as well as client side).
Also need to check if its possible to pass client side objects to server side script as you were trying in your example.
22. Chetan07/22/2010 01:23:28 AM
ur right that could possibly help
