2

我已经建立了一个基本的测试用例，我在其中体验了一些（对我而言）奇怪的行为。使用下面的设置时，编辑器中输入的值将仅h:outputText在第二次提交时可见。例如

  • 将编辑器中的值更改为“myvalue”
  • 发送 Ajax 请求
  • h:outputText 显示“测试”（来自 bean 的默认值）
  • 将编辑器中的值更改为“另一个值”
  • 发送 Ajax 请求
  • h:outputText 显示“myvalue”
  • 发送 Ajax 请求
  • h:outputText 显示“另一个值”

注意：有一个自定义组合，如果需要，请询问代码（它只是为 TinyMCE 创建 textarea 并从下面加载 .js 文件）

索引.xhtml

<h:body>
    <h:form>
        <mh:editor id="tinymceEditor" 
                   value="#{bean.value}" />
        <h:commandButton value="Ajax">
            <f:ajax execute="tinymceEditor" 
                    render="show" />
        </h:commandButton>
        <h:outputText id="show" value="#{bean.value}" />
    </h:form>
</h:body>

jsfhandler.js -> 包含在自定义复合 mh:editor 的标题中

jsf.ajax.addOnEvent(function(data) {
    switch(data.status) {
        case "begin":
            tinyMCE.execCommand('mceRemoveControl',true,"tinymceEditor");
            tinyMCE.triggerSave();
            break;

        case "complete":
            tinyMCE.execCommand('mceAddControl',true,"tinymceEditor");
            break;

        case "success":            
            break;
    }
});

Bean.java

@Named
@RequestScoped
public class Bean {
    private String value = "test";
}
4

1 回答 1

2

JSF ajaxbegin事件来不及考虑表单数据的变化。ajax 请求在此事件之前已经根据表单数据准备好了。

实际上，顺序如下：

  • 用户输入输入（并离开字段）。
  • HTML DOM“更改”事件在输入字段上触发。
  • 用户点击提交按钮。
  • HTML DOM“点击”事件在提交按钮上触发。
  • JSF 准备 ajax 请求。
  • JSF ajax“开始”事件在 ajax 请求时触发。
  • JSF 发送 ajax 请求。
  • ...

基本上，您应该tinyMCE.triggerSave()在 HTML DOM“点击”事件期间执行此操作。

<h:commandButton ... onclick="tinyMCE.triggerSave()">

或者，更好的是，在 tinyMCE 文本区域的 HTML DOM“更改”事件期间。

于 2013-05-10T12:40:08.277 回答