Xpages隐藏面板/ javascript

时间:2015-06-04 21:23:05

标签: xpages show-hide xpages-ssjs

当name =" Other"时,以下代码应显示pnlOther。在所有属性中,我设置了viewScope = ShowDataEntry;在XPage上的每个面板的渲染属性上,除了pnlOther元素,它被设置为!viewScope = ShowDataEntry以保持面板隐藏,直到"其他"从下拉列表中选择。

这是应显示面板的代码段。它工作不正常。是否有其他属性需要在错过的自定义控件上进行检查? ...

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

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

... 这是整个代码。

    <?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>

2 个答案:

答案 0 :(得分:3)

在SSJS中(其语法类似于Java)从不使用!==运算符或== /!=如果比较字符串,请使用.equals(&#34;&#34;)方法。

答案 1 :(得分:1)

有关渲染属性的不幸之处在于它在属性中被标记为错误。标签上写着“可见”,但这并不意味着可见。它实际上意味着“渲染”。也就是说,如果为false,则不要创建对象。因此,当您尝试使用

获取对象的句柄时,pnlOther不存在
document.getElementById("#{id:pnlOther}")

因此,不是不渲染对象,而是将样式设置为display:none。