2

このように、JSFでSummernoteを使用しています：

<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 がページを再度レンダリングしているために発生することに注意してください。どうすればこれを修正できますか?

4

1 に答える 1

2

この問題は、JavaScript で操作された HTML が、後で JS で再度操作されることなく、サーバーで生成された元の HTML に置き換えられるために発生します。

基本的に 2 つのオプションがあります。

  1. JS で操作された HTML の一部を ajax 更新しないでください。入力フィールドに関連付けられたコンポーネントなど、本当に更新が必要な部分のみを明示的に更新します。<h:message>

  2. または、それがオプションではない場合、たとえば、送信された値を操作するコンバーターを使用しているために送信された値を再表示する必要がある場合は、HTML の一部が ajax であるときに、その JS 操作を明示的に再実行する必要があります。更新しました。あなたの特定のケースでは、イベントjQuery('.summernote').summernote(...)中にもう一度呼び出すことになります。success

以下も参照してください。

于 2015-03-02T07:00:37.660 に答える