The Problem

There was a question asked on the XPages development forum yesterday asking why a jQuery selector will not find an element.

When you add an editable field to the XPage this is the source code

<xp:inputText id=”inputText1“></xp:inputText>

so you would naturally think the selector for that would be

$(“#inputText1“)

and you would be wrong…….in XPages.

The XPages part of the Domino server creates a dynamic id on the fly and the actual HTML generated for the field is:

<input type=”text” id=”view:_id1:inputText1″ name=”view:_id1:inputText1″>

so then the selector would be

$(“#view:_id1:inputText1“)

and you would be wrong again

No colons!!

jQuery selectors do not understand id’s with colons (:) in them because jQuery uses the colon for a number of  things including the CSS3 standard for selecting nodes.

The Answer

Well there are a number of ways you can work this:

Use a class selector instead:

Domino does not re-name class names on the fly, so as long as you use unique class names you can get away with…….

<xp:inputText id=”inputText1″ styleClass=”c_inputText1“></xp:inputText>

creates the following HTML

<input id=”view:_id1:inputText1” class=”c_inputText1” type=”text” name=”view:_id1:inputText1” />

And then the selector is simple

$(“.c_inputText1“)

Use a wildcard

Using a wildcard selector will allow you to hit the expected id because XPages prepends its necessary information so you can still look for inputText1. Be careful though if you fields are called 1InputText1, 2InputText1 etc then this selector will catch ALL matches

$(“*[id$=inputText1‘]”)

Using Client Side Javascript (SSJS) to Dynamically obtain the fieldname

You can get the dynamically created fieldname using “#{id:inputText1}”

The CSJS alert(“#{id:inputText1}”;

creates the following JavaScript in the XPage automagically

alert(“view:_id1:inputText1“);

But as we previous saw we cannot use a selector for an id with a colon in it. We can overcome this by “escaping” the colon character and making jQuery use the who string using a “\\”

This will not work $(“#view:_id1:inputText1“)

But this will $(“#view\\:_id1\\:inputText1“)

So I wrote the following function to allow conversion of the id: to something usable by jQuery

function x$(idTag){
  //replace the colon
  idTag=idTag.replace(/:/gi, “\\:”)
  return idTag;
}

which is utilized in this manner:

$(“#”+x$(“#{id:inputText1}”)).css(‘border’, ‘3px solid yellow’);

I would like to try and simplify this further and wrap the jQuery object. A future project maybe.  x$(“#”+{id:inputText1})

Sample Database

A sample database is attached here….wordpress does not like zip files so open the word document and the zip file is in there……

jQuerySelectorDatabase

Update 02/13/2012

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