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

$(“#inputText1”).

My new selector looks like this

x$(“#{id:inputText1}”).

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 : "");
 return($("#"+idTag));
}

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”)

Demonstration

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")