javascript - style.display ="none"表现得很奇怪 - 我没有涵盖什么基础？

Question

我有一对字段(BillingServicesDD 和 BillingServicesFF)。应根据“SpreadSheet”字段的值显示其中之一。在我的 onClientLoad 事件中，我执行以下操作；

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

我的 spreadSheetVis() 例程如下。

// 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 和 BillingServicesDD 都是组合框。 SpreadSheetDSP 和 BillingServicesFF 都是输入文本。 SpreadSheet 和 SpreadSheetDSP 都指向 FInvoiceDoc.Spreadsheet。我使用这种方法而不是可见/渲染方法，因为我需要表单上的所有这些值都可用于表单的其他部分。我只是不想展示选定的内容，甚至不想在不想让它们被看到时占用空间。

在大多数情况下，这非常有效。我的问题是，如果我在保存表单时出现某种验证错误，则 BillingServicesDD 和 FF 都会显示。如果表单上的错误消息字段是由我编写的服务器端验证例程设置的，则验证错误消息稍后会在 onClientLoad 事件中出现，并带有警报语句。

通过 onClientLoad 事件和警报消息，字段显示始终正确(这是 onClientLoad 事件中发生的最后一件事)。过了一段时间，当文档似乎重新显示时，这两个字段都会出现。 (顺便说一句，这次重新显示似乎并没有再次经过onClientLoad事件。)

由于这都是客户端代码，因此我通过 IE 的调试器运行它。那里发生了一些奇怪的事情。所有代码都按其应有的方式运行，但是当我一路单步执行时(即使通过所有那些奇怪的不是我的代码的东西)，它说我需要重新提交文档，然后陷入一个循环，我不断地得到我的警报错误消息。那我就得杀掉IE了。

如果我关闭调试器，则不会发生此循环。

Answer 1

你需要改变你的方法。删除尝试在 OnLoad 事件中隐藏字段的代码。我认为您没有使用渲染的属性(它首先不会发送该字段)，因为您在某些计算中需要它。

转到字段的所有属性面板，找到样式属性并输入计算可见性或显示属性的 SSJS 表达式。

将计算放在那里将在任何刷新中幸存下来。

示例:

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

希望有帮助