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

你基本上有两种选择：

只是不要ajax-update JS操作的HTML片段。只需明确更新真正需要更新的部分，例如只有与输入字段关联的<h:message>组件。
或者，如果那不是一个选项，例如因为你需要重新显示提交的值，因为你正在使用一些操作提交值的转换器，所以当这段HTML被ajax更新时，你需要显式地重新执行该JS操作。在您的具体情况下，归结为在jQuery('.summernote').summernote(...)活动期间再次致电success。

ajax更新后，Summernote消失了

1 个答案:

另见：