My first XSnippet – x$

At the suggestion of John Jardin (@John_Ukuvuma)

I turned the x$ function into my first XSnippet

Thank you to the Gurupalooza panel (Carl Tyler, Marie Scott, Dec Lynch, Matt White and others) for motivating me to get off my ass and get involved

jQuery selector function for xPages – x$(“#{id:inputText1}”)

In a previous post I discussed the problems with using jQuery selectors in an xPage. I wanted to make a simple function to overcome the issue in xPages and I must have been having a brain fart that day as it is actually very simple and I couldn’t see it.

The crux of the solution is to create a jQuery object representing the dynamically created xPage input field id

A normal jQuery selector for the inputText1 field would look like this


My new selector looks like this


To achieve this we add the following function to your xPage

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

Use the new selector in the same way that you would in jQuery

x$(“#{id:inputText1}”).css(‘border’, ‘2px solid green’);
(or with an extra parameter)
x$(“#{id:viewPanel1}”, ” tr:even”).css(‘border’, ‘2px solid green’);  //Note the space before ”  tr:even”

the function works like this:

  • It receives the dynamically created idTag
    • view:_id1:inputText1
  • It replaces the colon’s with \\:
    • view\\:_id1\\:inputText1
  • Using the new string it returns the jQuery selector object we are looking for
    • $(“#”+” view\\:_id1\\:inputText1”)
Example using the x$ jQuery selector in an xPage
Example using the x$ jQuery selector in an xPage


The attached word document contains a demonstration database

jQuerySelector_X sample database

Update – 18 Feb 2012

This is going to evolve apparently….I realized tonight as I was trying to use my own function I had made the case for replacing the colon (:) but I had overlooked the fact that they can still be used. I have updated the function above with the param argument.

The following fails because the tr:even gets converted to tr\:even

x$("#{id:viewPanel1} tr:even").addClass("alt") //creates $("#view\:_id1\:viewPanel1 tr\:even")

so I added a param argument to function (which is optional) which allows the selector to be passed without any colons being replaced

x$("#{id:viewPanel1}", " tr:even").addClass("alt")

creates the desired end jQuery code

  $("view\:_id1\:viewPanel1 tr:even")