Damaged parameter of javascript function in selectBooleanCheckbox

We have table with h:selectBooleanCheckbox in each row (checkbox represents boolean). We want to call backing bean action on change the checkbox value (in any row).

Following code works in funny way: if ID number (parameter from 1st column - String - used as parameter for javascript) is short (10 characters) then javascript parameter is correct, if ID number is longer (18 characters) then javascript parameter is not - value is partially destroyed (first 16 characters are the correct, 17 and 18 characters are replaced by 0).

XHTML:

    <rich:dataTable id="loyaltyIdTable"
        rows="#{referenceData.recordsPerPage}"
        rowClasses="oddrow, evenrow"
        var="pi"
        value="#{chProfile.loyaltyPIs}">

        <rich:column>
            <f:facet name="header">
                <h:outputText value="ID Number" />
            </f:facet>
            <h:outputText value="#{pi.idNumber}" />
        </rich:column>

        <rich:column styleClass="centeralign">
            <f:facet name="header">
                <h:outputText value="Can Redeem" />
            </f:facet>
            <h:selectBooleanCheckbox value="#{pi.canRedeem}"
                onclick="alert(#{pi.idNumber});"
                onchange="alert('ID number: ' + #{pi.idNumber}); return false;" />
        </rich:column>

        <rich:column styleClass="centeralign">
            <f:facet name="header">
                <h:outputText value="Delete" />
            </f:facet>
            <a4j:commandLink execute="@this" render="deleteConfirmationPanel"
                oncomplete="#{rich:component('confirmPopup')}.show()">
                <h:graphicImage value="/images/delete.gif" style="border:none;" />
                <a4j:param value="#{pi.idNumber}" assignTo="#{loyaltyIdForm.deleteId}" />
            </a4j:commandLink>
        </rich:column>
    </rich:dataTable>

In this code my javascript function was replaced by trivial alert. It doesn't matter from which attribute onclick or onchange is javascript called - result is the same: last 2 characters of the #{pi.idNumber} are replaced by 0 when string length is 18.

Exact the same mess with parameter I had when h:commandButton was used for deleting row. After replacing h:commandButton to a4j:commandLink with a4j:param this part works fine (parameter is correct). Following is incorrect working code:

    <h:commandButton value="#{msg.delete}"
        action="#{chAction.deleteAltId(pi.idNumber)}"
        onclick="return confirm('#{msg.deleteAltId} #{pi.idNumber}?')"
        render="loyaltyIdTable" />

Environment: JSF 2.1 and RichFaces 4.3. In this environment neither from a4j:ajax, f:ajax, h:selectBooleanCheckbox has action attribute. It means javascript should be called.

Can somebody explain me how to call javascript properly (per onclick or onchange in h:selectBooleanCheckbox) with parameter (different than checkbox object) in repeating structure (row of table or list)?

I can easily solve this problem with additional command button or replacing h:selectBooleanCheckbox with command link (with 2 images check/uncheck inside). But I am wondering if there is working solution with h:selectBooleanCheckbox.

Here,

onclick="alert(#{pi.idNumber});"
onchange="alert('ID number: ' + #{pi.idNumber}); return false;"

You're printing it as a JavaScript number type variable. Like the Java int, it has also a technical limit. For JavaScript it is 2⁵³ (9007199254740992).

Better print it as a string.

onclick="alert('#{pi.idNumber}');"
onchange="alert('ID number: #{pi.idNumber}'); return false;"

Note that EL runs in server side (while generating HTML/JS output), not in client side, so there's no need to "string-concatenate" it into a JavaScript variable.