ajax 更新后 Summernote 消失

Question

我正在以这种方式将 Summernote 与 JSF 一起使用：

<div class="form-group">
                <label>Texto</label>
                <h:inputTextarea value="#{cursoMB.questao.questao.texto}"
                    disabled="#{cursoMB.questao == null}"
                    styleClass="summernote form-control" />
            </div>

我的 JavaScript：

jQuery('.summernote').summernote({
     height: 300,                 // set editor height

      minHeight: null,             // set minimum height of editor
      maxHeight: null,             // set maximum height of editor

      focus: false                 // set focus to editable area after initializing summernote      
});

一切正常，但是当我执行以下commandLink 时，summernote 消失了，变成了一个没有设计的简单inputTextArea：

<h:commandLink actionListener="#{cursoMB.inserirQuestao()}"
                styleClass="btn btn-default" title="clique para inserir a questão">
                <f:ajax execute="@this" render="divTeste divQuestao"
                    onevent="function(data) { if (data.status === 'success') { 
    document.getElementById('inputTextOrdemQuestao').focus() } }" />
                <i class="fa fa-plus fa-fw"></i>
            </h:commandLink>

我注意到发生这种情况是因为 ajax 再次呈现我的页面。我该如何解决这个问题？

Answer 1

这个问题是因为 JavaScript 处理的 HTML 片段被服务器生成的原始 HTML 替换，之后没有再次被 JS 处理。

你基本上有两个选择：

1. 不要对 JS 操作的 HTML 片段进行 ajax 更新。只需明确更新真正需要更新的部分，例如只有<h:message> 组件与输入字段相关联。

2. 或者，如果这不是一个选项，例如因为您需要重新显示提交的值，因为您正在使用一些操作提交值的转换器，所以当那段 HTML 被 ajax 更新时，您需要显式地重新执行该 JS 操作。在您的具体情况下，归结为在 success 事件期间再次调用 jQuery('.summernote').summernote(...)。

另见：

• JSF/PrimeFaces ajax updates breaks jQuery event listener function bindings
• Ajax not working right in JSF with a jquery slide