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”)
Example using the x$ jQuery selector in an xPage
Demonstration
The attached word document contains a demonstration database
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