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

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
Example using the x$ jQuery selector in an xPage

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

14 thoughts on “jQuery selector function for xPages – x$(“#{id:inputText1}”)

  1. 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

  2. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s