为 xPage 表单提交组合服务器和客户端事件处理程序答案

【问题标题】：Combining server and client side event handlers for xPage Form Submission为 xPage 表单提交组合服务器和客户端事件处理程序
【发布时间】：2017-10-27 16:47:07
【问题描述】：

我一直在查看网上的帖子以及 IBM 的帖子，但我仍然对如何提交表单感到困惑。

我正在使用 formvalidation.io 验证，并且来自 CSJS，我得到验证是否正确。然后，如果正确我想提交，如果不正确就不提交。

我尝试了不同的变体，但得到了相同的结果。如果验证不正确，表单会继续正确显示并且不会提交。但是，如果验证正确，则不会提交表单。我收到错误消息 XSP.executeOnServer 不是函数，并尝试了各种方法来解决此问题，但均未成功。这是我的代码：

<xp:button value="Join Our Team" id="button1">
   <xp:eventHandler event="onclick" submit="false">
      <xp:this.script><![CDATA[$(document).ready(function() {
         $(this).click(function(){
         $("form").data('formValidation').validate();
         var isValidForm = $("form").data('formValidation').isValid();
         if (isValidForm){
            XSP.executeOnServer('#{id:eventhandler1a}', '#{id:panel1}');
         }
         else {
            $("form").data('formValidation').validate();
            return false;
         }
     });
});]]></xp:this.script>

<xp:this.action><![CDATA[#{javascript:XSP.executeOnServer = function () {
// the event handler id to be executed is the first argument, and is required
    if (!arguments[0])
        return false;
    var functionName = arguments[0];

// OPTIONAL - The Client Side ID that is partially refreshed after executing the event handler
    var refreshId = (arguments[1]) ? arguments[1] : "@none";
    var form = (arguments[1]) ? XSP.findForm(arguments[1]) : dojo.query('form')[0];

// catch all in case dojo element has moved object outside of form...
    if (!form)
        form = dojo.query('form')[0];

// OPTIONAL - Options object containing onStart, onComplete and onError functions for the call to the
    // handler and subsequent partial refresh
    var options = (arguments[2]) ? arguments[2] : {};

// OPTIONAL - Value to submit in $$xspsubmitvalue. can be retrieved using context.getSubmittedValue()
    var submitValue = (arguments[3]) ? arguments[3] : '';

// Set the ID in $$xspsubmitid of the event handler to execute
    dojo.query('[name="$$xspsubmitid"]')[0].value = functionName;
    dojo.query('[name="$$xspsubmitvalue"]')[0].value = submitValue;
    this._partialRefresh("post", form, refreshId, options);
}   }]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

<xp:panel id="panel1">
    <xp:eventHandler event="onClick" submit="true" id="eventhandler1a" refreshMode="complete">
    <xp:this.action>
        <xp:saveDocument></xp:saveDocument>
    </xp:this.action>
</xp:eventHandler>
    </xp:panel>

【问题讨论】：

标签： javascript jquery validation xpages xpages-ssjs

【解决方案1】：

我认为您最好的选择是使用 RPC，它将处理 CS 并向您的 SSJS 返回一个 go/no-go 值以提交或不提交。下面是一个完整的 XPage，您可以使用它来查看它是如何工作的。这只是填充了一个 viewScope，但我认为它会以一种非常简单的方式告诉你它是如何工作的。

    <?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:br></xp:br><xp:br></xp:br>
 <xp:button value="CSJS"  id="button2">
    <xp:eventHandler event="onclick" submit="false">
        <xp:this.script><![CDATA[myRPC.myMethod("somevalue").addCallback(function(response) {
    alert("the response is " + response);
});]]></xp:this.script>
    </xp:eventHandler></xp:button>

  <xp:br></xp:br><xp:br></xp:br><xp:br></xp:br><xp:br></xp:br><xp:br></xp:br><xp:br></xp:br>
    <xe:jsonRpcService id="jsonRpcService1" serviceName="myRPC"
    state="true">
    <xe:this.methods>
      <xe:remoteMethod name="myMethod">
        <xe:this.arguments>
            <xe:remoteMethodArg name="myArg" type="string"></xe:remoteMethodArg>
        </xe:this.arguments>
        <xe:this.script>
            <![CDATA[
            print("invocation: " + myArg);
            viewScope.invokedBy = myArg;
            print("viewScope:" + viewScope.invokedBy);
            return viewScope.invokedBy;

          ]]>
        </xe:this.script>
      </xe:remoteMethod>
    </xe:this.methods>
  </xe:jsonRpcService>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:text escape="true" id="computedField1" value="#{viewScope.invokedBy}"></xp:text>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:button value="Refresh" id="button1">
        <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
            <xp:this.action>
                <xp:confirm>
                    <xp:this.message><![CDATA[#{javascript:return "is: " + viewScope.invokedBy;}]]></xp:this.message>
                </xp:confirm>
            </xp:this.action></xp:eventHandler></xp:button>
    <xp:br></xp:br>
    <xp:br></xp:br></xp:view>

【讨论】：

我以前从未使用过 RPC，但我想我明白你的意思了。我要去读一下，看看能不能弄明白。
布莱恩，我认为这不会起作用，因为验证代码都是 csjs。所以我需要在客户端说验证是否通过。而且我无法将结果传递给范围值，因为据我了解，您无法使用 csjs 设置范围值。我是不是误会了？
我认为您可以将验证代码放入 RPC，因为这将执行 CSJS，并且您可以将验证的真/假传递给 SSJS 以执行您需要的操作。我发布了一个完整的 XPage，尝试将其放入数据库中。
我搞定了。由于某种原因，使用 return true 或 return false 保存或不保存的代码不起作用，但后来当我尝试它时 - 它起作用了。我以前在 Domino 上也遇到过这种情况。
我也有，我怀疑它正在缓存，但我不确定。我倾向于添加一个文本“版本”编号，并在每次更改时将其递增以确认整个页面已启动。

【解决方案2】：

如果 eventHandler 中的 CSJS 返回 true，SSJS 将触发。如果它返回 false，则不会。所以this.script 只需要返回true。

但是，您随后将 CSJS 发布到 this.action。 eventHandler 的该属性采用 SSJS，因此 dojo.query 和 XSP.findForm 将不起作用。您需要将 SSJS 放在那里以保存您的文档或您需要做的任何其他事情。

【讨论】：

我同意，如果我在 eventHandler 中有 CSJS，并且如果它返回 false，则不应继续触发 SSJS。但确实如此，这让我感到困惑，也是我开始走上这条漫长而曲折的道路的原因。你知道为什么 SSJS 会在错误返回的情况下继续运行吗？
对不起，我正在回复“但是，如果验证正确，则表单不会提交。我收到错误消息 XSP.executeOnServer is not a function....”比如说，this.action 中的代码是需要 SSJS 的 CSJS，所以那里存在基本问题，代码需要移动到接受 CSJS 的地方。面板上的 onclick 事件可能是由按钮成功/失败以外的其他因素触发的，我建议将其更改为“onBlah”，因为您似乎没有触发点击。我认为需要大量的浏览器调试来解决它。

【解决方案3】：

这是 Domino 不时发生的令人毛骨悚然的事情之一。现在我的代码可以使用简单的 return true 或 return false。我一开始就这样做了，这真是令人头疼，为什么它不起作用。我在 Domino 上时不时会发生这类事情，当你不知道它们为什么会发生时，这总是很可怕。但我很高兴我的干净、简单的代码现在可以工作了。

【讨论】：