title: Display tinymce textarea dynamically
body: <p>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. </p>
  
  <p>I have this inside of my HTML head:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      tinymce.init({
          selector: "textarea"
  
       });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the ajax function that I use to add a bunch of elements, this is working how I need it to.</p>
  
  <pre><code>function getSecFacility(facsecid, facid) {
  
      $("#new_section_form").hide();
  
      $.ajax({
      type: "POST",
      url:  "facility_section_information.php",
      data: 'facility_section_id='+facsecid+'&amp;facility_id='+facid,
  
      success: function(data){
              $("#selected_fac_section").html(data);
      }
     });
     //loadTinyMCEEditor();
  };
  </code></pre>
  
  <p>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.</p>
  
  <p>I have checked several other questions trying to find an "answer" but nothing is working.</p>
  
  <p>I tried to make a function called <code>loadTinyMCEEditor()</code> that I was calling within my <code>getSecFacility()</code> function after my ajax call. Within this function I was trying to reinitialize tinyMCE for these newly added textareas.</p>
  
  <p><code>loadTinyMCEEditor()</code> looks like this:</p>
  
  <pre><code>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
  }
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>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:</p>
  
  <pre><code>function getFacSecFacility(facsecid, facid) {
  
      $("#new_section_form").hide();
  
      $.ajax({
      type: "POST",
      url:  "facility_section_information.php",
      data: 'facility_section_id='+facsecid+'&amp;facility_id='+facid,
  
      success: function(data){
              $("#selected_fac_section").html(data);
              loadTinyMCEEditor();
      }
     });
  };
  
  
  function loadTinyMCEEditor() {
      tinymce.init({
          selector: "textarea"
      });
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>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?</p>