TechQA.

Xpages hide panel / javascript

624 views Asked by At

The following code should display pnlOther when name = "Other". In All properties, I have set viewScope = ShowDataEntry; on rendered property for each panel on the XPage except the pnlOther element, which is set to !viewScope = ShowDataEntry in order to keep the panel hidden until "Other" is selected from drop down.

This is the piece of code that should display the panel. It is not working properly. Is there another property that needs to be checked on the custom control that was missed? ...

var name = document.getElementById("#{id:req}").value;      
var sDisplay = "";

if(name !== 'Other') {
    sDisplay = "";  
    document.getElementById("#{id:other}").value="";
    }
    document.getElementById("#{id:pnlOther}").style.display

... This is the entire code.

    <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.data>
        <xp:dominoDocument var="document1" formName="webformFields"
            computeWithForm="onsave">
        </xp:dominoDocument>
    </xp:this.data>
    <xp:panel id="pnlRequester"
        rendered="#{javascript:!viewScope.ShowDataEntry;}">
        <xp:table>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Requester:" id="requester_Label1"
                        for="requester1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:comboBox value="#{document1.requester}"
                        id="req">
                        <xp:selectItem itemLabel="--Select One--"
                            itemValue="--select one--" id="selectItem1">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="Other"
                            itemValue="Other" id="selectItem4">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="A"
                            itemValue="A" id="selectItem2">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="B"
                            itemValue="B" id="selectItem3">
                        </xp:selectItem>

                        <xp:eventHandler event="onchange"
                            submit="false">
                            <xp:this.script><![CDATA[var name = document.getElementById("#{id:req}").value;     
var sDisplay = "";

if(name !== 'Other') {
    sDisplay = "";  
    document.getElementById("#{id:other}").value="";
    }
    document.getElementById("#{id:pnlOther}").style.display




]]></xp:this.script>
                        </xp:eventHandler>
                    </xp:comboBox>
                </xp:td>
            </xp:tr>





        </xp:table>


    </xp:panel>
    <xp:panel id="pnlOther"
        rendered="#{javascript:viewScope.ShowDataEntry;}">
        <xp:table style="width:277px">
            <xp:tr>
                <xp:td style="text-align:right">Other</xp:td>
                <xp:td>
                    <xp:inputText id="other"
                        value="#{document1.other}">
                    </xp:inputText>
                </xp:td>
            </xp:tr>
        </xp:table>
    </xp:panel>


    <xp:panel id="pnlForm"
        rendered="#{javascript:!viewScope.ShowDataEntry;}">

        <xp:table style="width:277.0px">



            <xp:tr>
                <xp:td style="text-align:right" rendered="false">
                    <xp:label id="label4" value="Enter request "></xp:label>
                </xp:td>
                <xp:td>
                    <xp:inputText id="inputText2" rendered="false"></xp:inputText>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Date Requested" id="label5"
                        for="dateRequested1" style="text-align:right">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:inputText value="#{document1.DateRequested}"
                        id="inputText3">
                        <xp:dateTimeHelper id="dateTimeHelper4"></xp:dateTimeHelper>
                        <xp:this.converter>
                            <xp:convertDateTime type="date"
                                dateStyle="short">
                            </xp:convertDateTime>
                        </xp:this.converter>
                    </xp:inputText>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Class:" id="label6" for="class1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:comboBox value="#{document1.Class}"
                        id="comboBox3">
                        <xp:selectItem itemLabel="Routine"
                            itemValue="Routine" id="selectItem30">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="Urgent"
                            itemValue="Urgent" id="selectItem31">
                        </xp:selectItem>
                    </xp:comboBox>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Date started:" id="label7"
                        for="dateStarted1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:inputText value="#{document1.DateStarted}"
                        id="inputText4">
                        <xp:dateTimeHelper id="dateTimeHelper5"></xp:dateTimeHelper>
                        <xp:this.converter>
                            <xp:convertDateTime type="date"
                                dateStyle="short">
                            </xp:convertDateTime>
                        </xp:this.converter>
                    </xp:inputText>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Date completed:" id="label8"
                        for="dateCompleted1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:inputText value="#{document1.DateCompleted}"
                        id="inputText5">
                        <xp:dateTimeHelper id="dateTimeHelper6"></xp:dateTimeHelper>
                        <xp:this.converter>
                            <xp:convertDateTime type="date"
                                dateStyle="short">
                            </xp:convertDateTime>
                        </xp:this.converter>
                    </xp:inputText>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Action:" id="label9"
                        for="action1">
                    </xp:label>
                </xp:td>
                <xp:td>

                    <xp:comboBox id="comboBox4"
                        value="#{document1.Action}">
                        <xp:selectItem itemLabel="--Select One--"
                            itemValue="--Select One--" id="selectItem32">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="Create"
                            itemValue="create" id="selectItem33">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="Edit" itemValue="edit"
                            id="selectItem34">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="Remove"
                            itemValue="remove" id="selectItem35">
                        </xp:selectItem>
                    </xp:comboBox>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td>
                    <xp:div style="text-align:right">
                        <xp:label value="Task title:" id="label10"
                            for="taskTitle1">
                        </xp:label>
                    </xp:div>
                </xp:td>
                <xp:td>
                    <xp:inputText value="#{document1.TaskTitle}"
                        id="inputText6">
                    </xp:inputText>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Contract:" id="label11"
                        for="contract1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:comboBox value="#{document1.contract}"
                        id="comboBox5">
                        <xp:selectItem itemLabel="TPA" itemValue="TPA"
                            id="selectItem36">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="CSSC" itemValue="CSSC"
                            id="selectItem37">
                        </xp:selectItem>

                    </xp:comboBox>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Menu items:" id="label12"
                        for="menuItems1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:comboBox value="#{document1.MenuItems}"
                        id="comboBox6">
                        <xp:selectItem itemLabel="CGDP" itemValue="CGDP"
                            id="selectItem38">
                        </xp:selectItem>
                    </xp:comboBox>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Sort date current:" id="label13"
                        for="sortDateCurrent1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:comboBox value="#{document1.SortDateCurrent}"
                        id="comboBox7">
                        <xp:selectItem itemLabel="Yes" itemValue="Yes"
                            id="selectItem39">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="No" itemValue="No"
                            id="selectItem40">
                        </xp:selectItem>
                    </xp:comboBox>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Design change:" id="label14"
                        for="designChange1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:comboBox value="#{document1.DesignChange}"
                        id="comboBox8">
                        <xp:selectItem itemLabel="No" itemValue="No"
                            id="selectItem41">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="Yes" itemValue="Yes"
                            id="selectItem42">
                        </xp:selectItem>

                    </xp:comboBox>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Change details:" id="label15"
                        for="changeDetails1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:inputText value="#{document1.ChangeDetails}"
                        id="inputText7">
                    </xp:inputText>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Action request num:" id="label16"
                        for="actionRequestNum1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:inputText value="#{document1.ActionRequestNum}"
                        id="inputText8">
                    </xp:inputText>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Display:" id="label17"
                        for="display1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:comboBox value="#{document1.Display}"
                        id="comboBox9">
                        <xp:selectItem itemLabel="PDF" itemValue="PDF"
                            id="selectItem43">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="PDF + Content"
                            itemValue="PDF Content" id="selectItem44">
                        </xp:selectItem>
                    </xp:comboBox>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Add instructions:" id="label18"
                        for="addInstructions1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:inputText value="#{document1.AddInstructions}"
                        id="inputText9">
                    </xp:inputText>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Corrections:" id="label19"
                        for="corrections1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:inputText value="#{document1.Corrections}"
                        id="inputText10">
                    </xp:inputText>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Dev comments:" id="label20"
                        for="devComments1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:inputText value="#{document1.DevComments}"
                        id="inputText11">
                    </xp:inputText>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Request status:" id="label21"
                        for="requestStatus1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:comboBox value="#{document1.RequestStatus}"
                        id="comboBox10">
                        <xp:selectItem itemLabel="In Progress"
                            itemValue="In Progress" id="selectItem45">
                        </xp:selectItem>
                        <xp:selectItem
                            itemLabel="Pending Staff Response" itemValue="PSR"
                            id="selectItem46">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="Complete"
                            itemValue="Complete" id="selectItem47">
                        </xp:selectItem>
                    </xp:comboBox>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Status comments:" id="label22"
                        for="statusComments1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:inputText value="#{document1.StatusComments}"
                        id="inputText12">
                    </xp:inputText>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Staff:" id="label23"
                        for="staff1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:comboBox value="#{document1.staff}"
                        id="staff1">
                        <xp:selectItem itemLabel="Stephanie Lesesne"
                            itemValue="Stephanie Lesesne" id="selectItem23">
                        </xp:selectItem>
                        <xp:selectItem itemLabel="Gerald Eichelberger"
                            itemValue="Gerald Eichelberger" id="selectItem24">
                        </xp:selectItem>
                    </xp:comboBox>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td style="text-align:right">
                    <xp:label value="Which site:" id="whichSite_Label1"
                        for="whichSite1">
                    </xp:label>
                </xp:td>
                <xp:td>
                    <xp:comboBox value="#{document1.whichSite}"
                        id="whichSite1">
                        <xp:selectItem itemLabel="TPA" itemValue="TPA"
                            id="selectItem25">
                        </xp:selectItem>
                    </xp:comboBox>
                </xp:td>
            </xp:tr>
        </xp:table>

    </xp:panel>



    <xp:br></xp:br>
    <xp:panel id="pnlButtons"
        rendered="#{javascript:!viewScope.ShowDataEntry;}">
        <xp:button value="Save" id="button1">
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete" immediate="false" save="true">
                <xp:this.action>
                    <xp:openPage name="/Home.xsp"></xp:openPage>
                </xp:this.action>
            </xp:eventHandler>
        </xp:button>
        &#160; &#160;
        <xp:button value="Delete" id="button2"
            rendered="#{javascript:!document1.isNewNote()}">
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action>
                    <xp:deleteDocument name="/Home.xsp"
                        message="Are you sure you want to delete?">
                    </xp:deleteDocument>
                </xp:this.action>
            </xp:eventHandler>
        </xp:button>

        &#160;
        <xp:button value="Cancel" id="button3">
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action>
                    <xp:openPage name="/Home.xsp"></xp:openPage>
                </xp:this.action>
            </xp:eventHandler>
        </xp:button>
        &#160;
        <xp:button value="Edit" id="button4"
            rendered="#{javascript:!document1.isEditable()}">
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action>
                    <xp:changeDocumentMode mode="edit"></xp:changeDocumentMode>
                </xp:this.action>
            </xp:eventHandler>
        </xp:button>

    </xp:panel>
    <xp:panel id="InformationPanel" rendered="false">
        <xp:label
            value="Delete button  !@isNewNote(); Delete opens Results; edit button !documen1.isEditable()"
            id="label1" style="color:rgb(0,128,0);width:556.0px">
        </xp:label>
    </xp:panel>
    <xp:br></xp:br>
</xp:view>
xpages show-hide xpages-ssjs
Original Q&A
2

There are 2 answers

1
Oliver Busse On

In SSJS (which syntax is similar to Java) never use !== operator or == / != If you compare a string use the .equals("") method instead.

0
David Navarre On

The unfortunate thing about the rendered property is that it is labelled wrong in the properties. The label says "Visible" when it really doesn't mean visible. It literally really means 'rendered'. That is, if false, do not create the object. So, pnlOther doesn't exist when you try to get a handle to the object with 

document.getElementById("#{id:pnlOther}")

So, instead of not rendering the object, set the style to display: none.

Related Questions in XPAGES

Related Questions in SHOW-HIDE

Related Questions in XPAGES-SSJS

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions