在 AJAX JSF 请求后重新加载 Javascript

Question

好吧，我正在使用 TinyMCE 编辑器，当我尝试打开模式对话框时，tinyMCE 未呈现。

看：

$(document).ready(function() {

    jQuery('.tinymce').on('show',function(e){
        initTinymce();
    });

});

function initTinymce(){
    tinymce.init({
        selector: ".tinymce",
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
    }); 
}

我的页面：

<div class="form-group">
                                <label>Conteúdo *</label>
                                <h:inputTextarea value="#{cursoMB.paginaConteudo.conteudo}"
                                    id="conteudo" required="true"
                                    requiredMessage="O conteúdo é obrigatório"
                                    styleClass="form-control tinymce">
                                </h:inputTextarea>
                            </div>

我的ajax电话：

<h:commandButton styleClass="btn btn-default" type="button"
                            value="Criar Página"
                            actionListener="#{cursoMB.novaPaginaConteudo()}">
                            <f:passThroughAttribute name="data-toggle" value="modal" />
                            <f:passThroughAttribute name="data-target"
                                value="#modalDialogPagina" />
                            <f:ajax execute="@this" render="modalPagina" />
                        </h:commandButton>

我该如何解决这个问题？

编辑 1

我试过使用jsf.ajax.addOnEvent但没用，tinyMCE没有渲染（console.log显示正常）：

$(document).ready(function() {

    initTinymce();
    jsf.ajax.addOnEvent(ajaxHandleTinymce);
});

function ajaxHandleTinymce(data){
    console.log('ajaxHandle');
    initTinymce();
}

function initTinymce(){
    tinymce.init({
        selector: ".tinymce",
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
    }); 
}

Answer 1

您必须在 ajax 调用后初始化您的小部件，您可以通过以下方式在 f:ajax 上附加一个 javascript 事件侦听器：

<f:ajax execute="@this" render="modalPagina" onevent="handleAjaxResponse"/>

function handleAjaxResponse(data) {
   if (data.status === 'success') {
      initTinymce();
   }
}

我不建议对您的案例使用 jsf.ajax.addOnEvent 回调，因为每次 ajax 调用服务器时都会初始化小部件。

在 AJAX JSF 请求后重新加载 Javascript

Reloading Javascript after AJAX JSF request

javascript

ajax

jsf

jsf-2