x$ jQuery selector for XPages

Language

JavaScript (Client)

Tags

Author

mark roden

Submitted on

February 6, 2012 at 7:21 AM

Rating

Downloads

1,789

Notes

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

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

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

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 16:11 on 08.02.2013)

I wish I found this 5 hours ago! Great snippet