x$

Checking XPages Radio buttons have been selected with jQuery

Marky Roden dojo, jQuery, x$, XPages

So I found out the other day that an XPages Radio Button Group idTag is not resolved using the server side #{id:RadioButtonGroup}

Cert Next Year Needed Radio Button Group
Cert Next Year Needed Radio Button Group

Creates the following HTML on the webpage (in this example my RadioButtonGroup is called CertNextYearNeeded)

<label class="xspRadioButton" for="view:_id1:_id2:_id18:radio1">
<input id="view:_id1:_id2:_id18:radio1" type="radio" name="view:_id1:_id2:_id18:CertNextYearNeeded" value="No" />No</label
<label class="xspRadioButton" for="view:_id1:_id2:_id18:radio2">
<input id="view:_id1:_id2:_id18:radio2" type="radio" name="view:_id1:_id2:_id18:CertNextYearNeeded" value="Yes"/>Yes</label>

however using the # notation in my SSJS I got the following….(Using x$)


x$("#{id:CertNextYearNeeded}", ":checked").val()!="Yes"

came through into the webpage source code as


x$(":checked").val()!="Yes"

so therefore we need to select by name (which I don’t like as it could be ambiguous, but have no choice) you have to select the radio button group by name (don’t use x$). In this case we are testing to see if “Yes” has been selected – No or no selection at all will fail.

if ($("[name$=CertNextYearNeeded]:checked").val() != 'Yes') {
    msg="Select the option\n";
}
  • [name$=CertNextYearNeeded] <— Selects all elements with a name like *CertNextYearNeeded
  • :checked <—- get the checked
  • element .val() <— get the value

x$ reference examples

Marky Roden dojo, JavaScript, jQuery, x$

As I come across more and more variant for selectors I am going to list them here once I figure out how they can be constructed

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

Basic Selecting a field by id

 jQuery  x$(“#{id:divisionNo1}”).
 dojo  dojo.query(x$(“#{id:divisionNo1}”, “”, “d”)).

Note the “”, “d” needed to let the function know this is a dojo call and therefore only return a string and not the jQuery object

Selecting multiple fields by id

 jQuery  x$(“#{id:divisionNo1}, “+”##{id:companyName1}”).
 dojo  dojo.query(x$(“#{id:divisionNo1}, “+”##{id:companyName1}”, “”, “d”)).

Note there are two ## in the query because x$ only appends a # onto the first element returned

Selecting a field by id and then by style

 jQuery  x$(“#{id:divisionNo1}, ” .xspEditBoxClass”).
 dojo  dojo.query(x$(“#{id:divisionNo1}, “+”##{id:companyName1}”, ” .xspEditBoxClass”, “d”)).

Note the space ( ) in front of the classname

Selecting a field by attribute with wildcard (no x$)

 jQuery $(“[name$=RadioButtonGroup]:checked”).val()
 dojo

This is how you would determine if a Radio Button Group has been checked

if ($("[name$=RadioButtonGroup]:checked").val() != 'Yes'){
msg="Select the option\n";
}

x$ update for dojo

Marky Roden dojo, JavaScript, x$ , ,

Problem
dojo selector –  “dojo.query” doesn’t work for elements generated by xpages

Background

This is a follow on to the jQuery selector function for xPages – x$(“#{id:inputText1}”) article I wrote previously.

Solution

Turns out that dojo.query suffers from the same problem:  dojo.query cannot understand elements with colons (:) in it. We have to convert the idTag of the element to escape the colons with a backslash.

  • dojo.query(“view:_id1:inputText1”).style(“border”, “1px solid red”) – will not work
  • dojo.query(“view\:_id1\:inputText1”).style(“border”, “1px solid red”) – will work and is converted using the function

So I have updated my x$ function to cover dojo and jQuery


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

the param and jd parameters are optional (in fact jd is only necessary if you are using dojo)

Interesting Note

For the uninitiated you will note that jQuery returns a $() rather than a string – this is because it is actually returning a jQuery Object. That is a fundamental difference in the way that dojo and jQuery function as code libraries.

Examples

here is an example code of how it would be used in dojo or jQuery


//dojo
dojo.query(x$("#{id:inputText1}", "", "d")).style("border", "1px solid red")

//jQuery equivalent

x$("#{id:inputText1}").css("background-image", "1px solid red")

An example is shown below

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:br></xp:br>
 <xp:scriptBlock id="scriptBlock1">
 <xp:this.value><![CDATA[
 function x$(idTag, param, jd){ //Updated 28 Feb 2012
 idTag=idTag.replace(/:/gi, "\\:")+(param ? param : "");
 return( jd=="d" ? "#"+idTag : $("#"+idTag));
 }
 ]]>
 </xp:this.value>
 </xp:scriptBlock>
 <xp:inputText id="inputText1"></xp:inputText>
 <xp:br></xp:br>
 <xp:br></xp:br>
 <xp:button value="Change Border (Fail)" id="button2">
 <xp:eventHandler event="onclick" submit="false">
 <xp:this.script><![CDATA[dojo.query("#{id:inputText1}").style("border", "1px solid red")]]></xp:this.script>
 </xp:eventHandler>
 </xp:button>
 <xp:br></xp:br>
 <xp:br></xp:br>
 <xp:button value="Change Border X$" id="button1">
 <xp:eventHandler event="onclick" submit="false">
 <xp:this.script><![CDATA[dojo.query(x$("#{id:inputText1}", "", "d")).style("border", "1px solid red")]]></xp:this.script>
 </xp:eventHandler>
 </xp:button>
</xp:view>

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

Marky Roden JavaScript, jQuery, x$, XPages ,

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