x$ jQuery selector for XPages

//function is called using x$("#{id:inputText1}", " parameters").

function x$(idTag, param){ //Updated 18 Feb 2012
   idTag=idTag.replace(/:/gi, "\\:")+(param ? param : "");

If you want to use jQuery to select your XPage input text fields it will not work out of the box for two reasons:

1) The server assigns a dynamic name to the field at run time
2) The new id tag name contains colons which are special characters in jQuery selectors.

The x$ function overcomes this issue by escaping the colons and returning the jQuery object.
The dynamically assigned field name is available using “#{id:inputText1}” where inputText1 is the id assigned by the developer
Just add the function to your XPage in script tags and call as if you were using a normal jQuery selector (see below)

Usage - Note the " " before parameters - important as a string is being created for the whole selector.
If the assigned id name is inputText1 the selector is: x$(“#{id:inputText1}”, " parameters (optional)").

Example #1 (no parameters)
x$(“#{id:inputText1}”).css(‘border’, ’2px solid green’)

Example #2 (create alternate rows in a viewPanel table)
x$("#{id:viewPanel1}", " tr:even").css(‘background’, ’yellow’)

JavaScript (Client)
mark roden
February 6, 2012 8:21 AM

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.

1 comment(s)Login first to comment...
Martin Rolph
(at 17:11 on 08.02.2013)
I wish I found this 5 hours ago! Great snippet