Reloading Javascript after AJAX JSF request

Question

Well, I'm using the TinyMCE editor and when i try to open a modal dialog the tinyMCE isn't rendered.

Look:

$(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"
    }); 
}

My page:

<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>

My ajax call:

<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>

How can i fix this ?

EDIT 1

I tried using jsf.ajax.addOnEvent but didn't work too, the tinyMCE is not rendered (console.log is showed normal):

$(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"
    }); 
}

Cesar Loachamin · Accepted Answer · 2015-03-22 16:16:29Z

1

You must init your widget after the ajax call, you could attach a javascript event listener on the f:ajax in this way:

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

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

I don't recommend to use the jsf.ajax.addOnEvent callback for your case because the widget will be init each time an ajax call is made to the server.

edited Mar 22, 2015 at 16:16

answered Mar 22, 2015 at 16:08

Cesar Loachamin

2,7284 gold badges27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Shelly Over a year ago

I tried this but didn't work. The tinyMCE is not rendered. I putted a console.log in handleJaxResponse() and this is called normally.

Cesar Loachamin Over a year ago

Could be a problem with the initTinymce() function could you execute the function initTinymce() manually in the console of the browser after the ajax call to check if there is an error shown

Shelly Over a year ago

Well, i executed the "initTinymce()" in console and got: undefined. If i execute "initTinymce" i got the code of function as return

Cesar Loachamin Over a year ago

yes that is ok it shows undefined because the function not return a value, but the widget was showed correctly after executing the function initTinymce();

Shelly Over a year ago

unhappy no, when i execute the initTinymce() in browser console, the modal dialog widget continue without the editor.

|

Collectives™ on Stack Overflow

Reloading Javascript after AJAX JSF request

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related