style.display="none" acting wierd - What base am I not covering?

Question

I have a a pair of fields (BillingServicesDD & BillingServicesFF). One or the other should be displayed depending on the value of the "SpreadSheet" field. In my onClientLoad event, I do the following;

// Set up field hide-when on loading.
spreadSheetVis();
.
(other cool, but unrelated code)
.
}

My spreadSheetVis() routine as follows.

// set the visibility of our billingservices selection depending on what we
// selected in the spreadsheet value.
function spreadSheetVis() {

  var em = XSP.getElementById("#{id:editMode}");
  if ( em == undefined ) {
    var ss = XSP.getElementById("#{id:SpreadSheetDsp}").innerHTML;
    } else {
    var ss = XSP.getElementById("#{id:Spreadsheet}").value;
    };
  if ( ss === "Compliance") {
    XSP.getElementById("#{id:BillingServicesDD}").style.display = "inline";
    XSP.getElementById("#{id:BillingServicesFF}").style.display = "none";
    } else {
    XSP.getElementById("#{id:BillingServicesDD}").style.display = "none";
    XSP.getElementById("#{id:BillingServicesFF}").style.display = "inline";
    };
}

SpreadSheet and BillingServicesDD are both comboboxes. SpreadSheetDSP and BillingServicesFF are both inputTexts. Both SpreadSheet and SpreadSheetDSP point to FInvoiceDoc.Spreadsheet. I use this approach instead of the visible/rendered approach because I need all these values on the form to be available for other pieces of the form. I just don't want selected ones displayed or even taking up real estate when I don't want them seen.

For the most part, this works great. My problem is if I have some kind of validation error when saving the form, then both BillingServicesDD & FF become displayed. The validation error message occurs later in the onClientLoad event with an alert statement if an error message field on the form is set by the server-sided validation routine I wrote.

The field displays are correct all the way through the onClientLoad event and through the alert message (It's the last thing that happens in the onClientLoad event). It's sometime afterwards when the document appears to be re-displayed that both fields appear. (btw, this re-display does not seem to go through the onClientLoad event again.)

Since this is all client-sided code, I run it through IE's debugger. Something strange happens there. All the code runs as it should, but when I step through all the way (even through all that bizzar not-my-code stuff), it says I need to resubmit the doc and then gets caught in a loop where I continuously get my alert error message. I have to kill IE then.

If I have the debugger turned off, this loop doesn't happen.

Answer 1

You need to alter your approach. Remove the code that tries to hide the fields from your OnLoad event. I presume you didn't use the rendered property (which wouldn't send the field in the first place) since you need it in some computations.

Go to the all properties panel of the field, locate the style property and enter a SSJS expression that computes visibility or display property.

Putting the calculation there will survive any refresh.

A sample:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:checkBox text="Control on" id="editMode"
        value="#{viewScope.editMode}" checkedValue="true"
        uncheckedValue="false" defaultChecked="true">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" refreshId="SpreadSheetDsp">
        </xp:eventHandler>
    </xp:checkBox>

    <xp:table style="width:100.0%" id="SpreadSheetDsp">
        <xp:tr style="background-color : #FFBBBB">
            <xp:this.rendered><![CDATA[#{javascript:"false" != viewScope.editMode;}]]></xp:this.rendered>
            <xp:td>Visible</xp:td>
            <xp:td>when checked</xp:td>
        </xp:tr>
        <xp:tr style="background-color : #BBBBFF">
        <xp:this.rendered><![CDATA[#{javascript:"false" == viewScope.editMode;}]]></xp:this.rendered>
            <xp:td>Visible</xp:td>
            <xp:td>when unchecked</xp:td>
        </xp:tr>
    </xp:table>
</xp:view>

Hope that helps