Xpages:当值更改时,在页​​面上加载字段值 - 绑定到bean

时间:2016-11-11 16:10:08

标签: xpages

请参阅此电子邮件的详细说明。

我有一个Xpage,用户将选择一名员工,之后应填充一系列员工相关字段。我之前做过这个,当我的源文件是一个文件,但现在我正在使用对象。我的对象绑定到java bean。

enter image description here

由于某些原因,当员工姓名发生变化时,我无法触发on change事件;在其他时候我可以触发事件,但是当我尝试将选择发送到java方法来加载值时,我无法获得该字段的值。

我认为我要做的是将代码放在employee字段的onChange事件中,该事件获取用户选择的值,然后在我的bean中调用一个java方法,该方法将加载其他员工值,然后重新加载面板。男孩,甚至需要很长时间才能写出来!

非常感谢任何帮助。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom"
    xmlns:xe="http://www.ibm.com/xsp/coreex"
    createForm="false">
    <xp:panel
        id="pnlAll">
        <xp:eventHandler
            event="refresh"
            submit="false"
            refreshMode="partial"
            loaded="false"/>    
        <xp:this.data>
            <xe:objectData
                saveObject="#{javascript:tr.save()}"
                var="tr">
                <xe:this.createObject><![CDATA[#{javascript:var tr = new com.scoular.model.TerminationRequest();
var unid = context.getUrlParameter("key")

if (unid != "") {
    tr.loadByUnid(unid);
    viewScope.put("readOnly","Yes");
} else {
    tr.create();
    viewScope.put("readOnly","No");
}
return tr;}]]></xe:this.createObject>
            </xe:objectData>
        </xp:this.data>
        <xp:div
            styleClass="container-fluid"
            id="divTravelRequest">



            <div
                class="panel panel-primary"
                id="div6">
                <div
                    id="divEmployeeInfo"
                    class="panel-collapse collapse in">
                    <div
                        class="panel-body"> 
                        <!--Row-->
                        <div
                            class="row">
                            <div
                                id="div2">
                                <div
                                    class="col-sm-6 pull-left">
                        <xp:inputText
                        value="#{tr.employeeName}"
                        id="employeeName1"
                        style="width:300px"
                        xp:key="field">
                        <xp:eventHandler
                            event="onchange"
                            submit="true"
                            refreshMode="norefresh"
                            id="eventHandler1">
                            <xp:this.action><![CDATA[#{javascript:var prmEmpNme:String = getComponent("employeeName1").getValue();
var javaClass = new com.scoular.model.TerminationRequest();
javaClass.setEmployeeData(prmEmpNme);}]]></xp:this.action>
                        </xp:eventHandler>
                        </xp:inputText>

                    &#160;&#160;&#160;

                    <xe:namePicker
                        id="namePicker2"
                        dialogTitle="Select a Name"
                        for="employeeName1" rendered="false">
                        <xe:this.dataProvider>
                            <xe:dominoNABNamePicker
                                addressBookDb="bryansMac!!names.nsf"
                                addressBookSel="db-name"
                                nameList="people"
                                people="true" />
                        </xe:this.dataProvider>
                        <xe:this.dojoAttributes>
                            <xp:dojoAttribute
                                name="maxRowCount"
                                value="1000" />
                        </xe:this.dojoAttributes>
                    </xe:namePicker>

                                            <xp:listBox
                                                xp:key="field"
                                                id="listBoxEmpNme"
                                                style="width: 100% !important;"
                                                value="#{tr.employeeName}">
                                                <xp:selectItems>
                                                    <xp:this.value><![CDATA[#{CacheBean.employees}]]></xp:this.value>
                                                </xp:selectItems>
                                                <xp:eventHandler
                                                    event="onchange"
                                                    submit="true"
                                                    refreshMode="norefresh">
                                                    <xp:this.action><![CDATA[#{javascript:var scriptCode = "alert('This got fired')"
view.postScript(scriptCode); }]]></xp:this.action>
                                                </xp:eventHandler></xp:listBox>

                                            <xp:div
                                        style="height:10.0px" />


<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[$(document).ready(
function() {
x$( "#{id:listBoxEmpNme}" ).select2({
placeholder: "Select The Scoular Employee To Term",
allowClear: true
});
}
);]]></xp:this.value>
            </xp:scriptBlock>                                       
            <xp:div style="height:10.0px" />
            </div>
                <div class="col-sm-6 pull-right">

                        <xp:inputText
                                id="inputText2"
                                xp:key="field"
                                value="#{tr.employeeLocation}">
                                <xp:this.disabled><![CDATA[#{javascript:true}]]></xp:this.disabled>
                                </xp:inputText>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </xp:div>
    </xp:panel>
    </xp:view>

============================

我遇到的问题是,当用户更改employeeName的值时,部分刷新会触发,但是已更改的值[employeeName]不会反映在辅助bean中。如果我能做到这一点,那么一切都会好的。

2 个答案:

答案 0 :(得分:1)

这是您的示例XPage的一个工作示例,简化为必要的事项。

它使用Select2并在listBox的onchange事件上执行XSP.partialRefreshPost。

XSP.partialRefreshPost将listBox值employeeName提交给服务器,并获取刷新的面板panelRefresh。服务器调用bean的方法setEmployeeName(employeeName)来设置bean中的新employeeName值,并调用getEmployeeLocation()来获取employeeLocation。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:this.resources>
        <xp:styleSheet href="select2v4/css/select2.css" />
        <xp:script src="select2v4/js/select2.js" clientSide="true" />
    </xp:this.resources>
    <xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[
            $(document).ready(
                function() {
                    x$("#{id:listBoxEmpNme}").select2({
                    placeholder: "Select the Employee",
                    allowClear:  true
                });
                x$("#{id:listBoxEmpNme}").on('change', function(e) { 
                    XSP.partialRefreshPost("#{id:panelRefresh}", {immediate: true});
                })}
            );
        ]]></xp:this.value>
    </xp:scriptBlock>
    <xp:this.data>
        <xe:objectData
            saveObject="#{javascript:tr.save()}"
            var="tr">
            <xe:this.createObject><![CDATA[#{javascript:
                var tr = new com.scoular.model.TerminationRequest();
                tr.create();
                return tr;
            }]]></xe:this.createObject>
        </xe:objectData>
    </xp:this.data>
    <xp:listBox
        id="listBoxEmpNme"
        value="#{tr.employeeName}">
        <xp:selectItems>
            <xp:this.value><![CDATA[#{CacheBean.employees}]]></xp:this.value>
        </xp:selectItems>
    </xp:listBox>
    <br /><br />
    <xp:panel id="panelRefresh">
        <xp:text
            escape="true"
            id="computedField1"
            value="#{tr.employeeLocation}" />
    </xp:panel>
</xp:view>

答案 1 :(得分:0)

onchange 方法中,您创建了新的java对象,并且您不再使用此对象。您可能应该参考之前创建的 ObjectData 。 第二件事是您为 norefresh 输入控件设置 refreshMode 属性。即使您更新数据,页面也不会被刷新,您也不会看到结果。尝试完成 patrial 模式。请检查以下代码。

<xp:inputText
value="#{tr.employeeName}"
id="employeeName1"
style="width:300px"
xp:key="field">
<xp:eventHandler
    event="onchange"
    submit="true"
    refreshMode="complete"
    id="eventHandler1">
    <xp:this.action><![CDATA[#{javascript:var prmEmpNme:String = getComponent("employeeName1").getValue();
    tr.setEmployeeData(prmEmpNme);}]]>
    </xp:this.action>
</xp:eventHandler>