Summernote 在 ajax 更新后消失

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 操纵。

你基本上有 2 个选择：

不要 ajax-更新 HTML 的 JS 操作部分。只明确更新真正需要更新的部分，例如仅与输入字段关联的 <h:message> 组件。
或者，如果那不是一个选项，例如因为您需要重新显示提交的值，因为您正在使用一些操纵提交值的转换器，那么当 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

Summernote 在 ajax 更新后消失

Summernote disappears after ajax update

ajax

jquery

jsf

summernote

另请参阅：