javascript - f :ajax causes model to not getting updated 上的事件

Question

我在网站上添加了 TinyMCE(JSF-2、Tomcat 7、Mojarra 2.1.6)。当用户单击“刷新”按钮时，编辑器中的 html 文本将被解析并打印在页面的其他位置。

我必须在 Ajax 请求之前关闭 TinyMCE(否则我将得到两个编辑器)。这也在 TinyMCE 文档中推荐。

所以我向按钮添加了一个 f:ajax 事件:

<h:commandButton value="#{msg['rt.refresh']}" action="#{updateTextAction.execute}" onclick="cleanupRte();">
<f:ajax event="action" execute="@this" render="@all" onevent="disposeTinyMce" />
</h:commandButton>

正确调用了 javascript 函数:

function cleanupRte() {
  tinyMCE.triggerSave();

  return true;
}

和一个事件方法:

function disposeTinyMce(e) {

    if(e.status == 'begin') {
        tinyMCE.triggerSave();

        var elem = document.getElementById("mainForm:rteExtAdr:input");
        alert(elem.value);

        tinyMCE.execCommand('mceRemoveControl', false, 'mainForm:rteExtAdr:input');
    }
    if(e.status == 'complete') {
    }
    if(e.status == 'success') { 
        tinyMCE.execCommand('mceAddControl', false, 'mainForm:rteExtAdr:input');
    }

    return true;
}

禁用编辑器并将其添加回页面。这工作正常。

问题是尽管警报显示了正确的值，但模型并未使用文本字段中的值进行更新。该请求还包含来自文本字段的“旧”值。

是否有什么东西会阻止 ajax 调用以查看当前表单值？还是在执行 onevent 函数之前读取值？

如果我完全删除 f:ajax 标签，模型会更新，但我会遇到 TinyMce 编辑器在响应后复制的问题。

初始化调用:

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    editor_selector : "sesamWysiwyg", 
    language : "de",
    force_br_newlines : true,
    force_p_newlines : false,
    inline_styles : false,
    forced_root_block : '', // Needed for 3.x
    plugins : "autolink,lists,style,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,searchreplace,print,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,wordcount,advlist",

    formats : {
            underline : {inline : 'u', exact : true},
            strikethrough : {inline : 'del', exact : true}
    },

    theme_advanced_buttons1 : "bold,underline,strikethrough,|,cut,copy,paste,pastetext,pasteword,search,replace,|,undo,redo,|,code,removeformat,|,charmap",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",

        content_css : "css/content.css",

    });

任何想法或建议都会很棒!

谢谢:)

Answer 1

这不是由 onevent 引起的处理函数。这是由 execute="@this" 引起的属性。 @this基本上意味着只有 current 组件将被执行/处理。如果你想处理整个表单，包括所有包含的输入元素，你需要使用 execute="@form"反而。

<h:commandButton value="#{msg['rt.refresh']}" action="#{updateTextAction.execute}" onclick="cleanupRte();">
    <f:ajax execute="@form" render="@all" onevent="disposeTinyMce" />
</h:commandButton>

这样，模型将使用所有处理过的输入元素的值进行更新。

或者如果你只想处理某些输入，你需要使用例如execute="input"其中 input是输入组件的ID。它可以采用空格分隔的(相对)客户端 ID 字符串。

---

至于重新发明轮子，看看组件库就知道了。 PrimeFaces例如有 a <p:editor> component .这只是一个问题

<p:editor value="#{bean.text}" />
<p:commandButton value="Save" action="#{bean.save}" />

自定义脚本没有任何麻烦。