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")
Xomino 
Hi Mark. This is brilliant. Thank you very much for posting this. We faced this issue when trying to pass a Control’s ID to a Custom Control’s Property. we landed up searching the rendered id to see if it contained the Control ID that was passed, which is obviously not best practice.
Thanks again.
http://johnjardin.ukuvuma.co.za
Oh, also a suggestion. This function would be a valuable addition to XSnippets???
Cheers
http://johnjardin.ukuvuma.co.za
Hey John – thanks for that 🙂
Great idea on the xSnippets – I’ll get on that one
Cheers,
Mark
PS
your website link says ERROR 500
Hi Mark. Thanks for informing me on that. I am rather moody at this point. I trust my admins will sort it out asap 🙂
Just an update Mark. Me blog’s back up. I hope you find it useful 🙂
Cheers for now.
http://johnjardin.ukuvuma.co.za
[…] jQuery selector function for xPages – x$(“#{id:inputText1}”) […]
[…] out the simplified function jQuery selector function for xPages – x$(“#{id:inputText1}”) Share this:TwitterFacebookLike this:LikeBe the first to like this […]
[…] are some simple tricks using jQuery and my x$ function. Add all the following to the onClientLoad event of the […]
[…] yeah I had to make an update to x$ as well – turns out that dojo can’t query items with colons (:) in it any better than […]
[…] is a follow on to the jQuery selector function for xPages – x$(“#{id:inputText1}”) article I wrote […]
60% dietary fat would be eliminated out of the body hence reducing
fat absorption. It’s not the animal that matters, it’s where
the meat comes from on that animal. Now, the average healthy amount people are
supposed to lose is 2 pounds per week.
Hi mates, nice post and nice arguments commented here, I am truly enjoying by these.
[…] Mark Roden’s x$() function to select an […]
[…] does not work well with XPage component ids. But of course there is a solution for that – Marky Roden’s XSnippet which wraps the jQuery ID selector function in a XPage […]