Display tinymce textarea dynamically

Question

I have a drop down list that when a selection is made will insert a bunch of elements within a form to the DOM using ajax, within this form I have textareas that I wish to be TinyMCE textareas.

I have this inside of my HTML head:

<script type="text/javascript">
    tinymce.init({
        selector: "textarea"

     });
</script>

This is the ajax function that I use to add a bunch of elements, this is working how I need it to.

function getSecFacility(facsecid, facid) {

    $("#new_section_form").hide();

    $.ajax({
    type: "POST",
    url:  "facility_section_information.php",
    data: 'facility_section_id='+facsecid+'&facility_id='+facid,

    success: function(data){
            $("#selected_fac_section").html(data);
    }
   });
   //loadTinyMCEEditor();
};

I have other textareas on my page that are not inserted by ajax and they display as WYSIWYG editors no problem, the issue is when I am adding in new elements.

I have checked several other questions trying to find an "answer" but nothing is working.

I tried to make a function called loadTinyMCEEditor() that I was calling within my getSecFacility() function after my ajax call. Within this function I was trying to reinitialize tinyMCE for these newly added textareas.

loadTinyMCEEditor() looks like this:

function loadTinyMCEEditor() {
    tinyMCE.init({
            selector: "textarea"
      });
    tinyMCE.execCommand('mceAddControl', false, 'test'); //test is the class name I gave this textarea
    //tinyMCE.execCommand('mceAddControl', true, 'test'); //tried setting the bool to true..even tried without these lines
}

No matter what I try I cannot seem to get it to work with newly inserted textareas, How can I get these textareas to be TinyMCE textareas?

EDIT

I can now view the editor to my newly added textareas after I make a selection from my drop down list. However this only works once, if I make a second selection the new textareas only display as plain textareas. Here is what I changed in my ajax function:

function getFacSecFacility(facsecid, facid) {

    $("#new_section_form").hide();

    $.ajax({
    type: "POST",
    url:  "facility_section_information.php",
    data: 'facility_section_id='+facsecid+'&facility_id='+facid,

    success: function(data){
            $("#selected_fac_section").html(data);
            loadTinyMCEEditor();
    }
   });
};


function loadTinyMCEEditor() {
    tinymce.init({
        selector: "textarea"
    });
}

So after I make a selection this ajax function will run and display new textareas + other form information and I re-initialize the tinymce editors but for some reason this is only working once.

What should I change/do so that I can make multiple selection from my drop down list so that each time the new textareas will display as tinymce textareas?

After answering your question, I realized. What is your "bunch of elements", as I see no elements added in your ajax call? — ilter
@ilter facility_section_information.php outputs html elements into a div that I have with the id="selected_fac_section". — BRBT
The textarea is within a form that I have which is in facility_section_information.php. — BRBT
I mean, how do you access it? Does it have a selector of some kind? Id, class, anything? If you initialize your newly created textarea with tinymce with textarea selector, you will be reinitializing all the existing tinymce editors on the page, too. That is not what you want. That's why you should use a different selector for the newly created textarea in order to just select it this time. I hope it makes sense. You should init it in the success calback. I hope you got why from my answer. Try that and come back. Then we'll see what to do next ;) — ilter

Andre Lehnert Andre Lehnert · Accepted Answer · 2015-05-27T17:54:37

You need to call tinyMCE.activeEditor.setContent with your incoming ajax-content. In your callback try:

tinyMCE.activeEditor.setContent(data);

Greetings

Display tinymce textarea dynamically

2 Answers