CODEWITHSUNDEEP
jqueryajaxtinymcereload
john
john

Reputation: 1273

how to rebind tinymce to textarea after ajax load

I have a form with a tinymce textarea. After submitting, the div in which the form is is reloaded like this:

$('body').on('submit', '.comment_form', function (e) {          
    e.preventDefault();
    tinyMCE.triggerSave(); // save TinyMCE instances before sending data

    var comment_name = $(".comment_name").val();
    var comment = $(".comment").val();

    $.ajax({
        url: 'comment.php',
        type: 'POST',
        data: {    
                comment_name:comment_name,              
                comment:comment,                                
                },

        success: function(data){

            $('.result').html(data);
            $('.modal').modal('hide'); // close modal               
            $(".comments-body").load(" .comments-body > *"); // reload div comments-body from comments                  

        },

    });

});

In the div with class .comments-body, which is dynamically reloaded, there is a form with tinymce textarea. After this reload, the textarea appears, but not the tinymce functionalities anymore.

How can i rebind the tinymce to the textarea when div is reloaded?

Upvotes: 0

Views: 382

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13746

Before you delete the original <div> that contains TinyMCE you need to use the remove() API to remove the editor from the page. You can then re-init the editor on the newly created <div> after it has been loaded into the DOM.

Upvotes: 1

Related Questions