title: Cannot make textarea populated by Ajax with TinyMCE editor
body: <p>I've been working on this for almost 4 hours and I can't get it work.</p>
  
  <p>I have a form with a textarea and a drop down list. The drop down data is from MySQL database. When I select and item in the drop down, it does populate the data in textarea and this is working fine.</p>
  
  <p>Now I added a TinyMCE as the textarea editor but now the data won't show up. I know that TinyMCE replace the textarea but I can't make it work.</p>
  
  <p>Below is the complete code that I am using. Could anyone help me what I am missing to make it work properly with TinyMCE enabled. Thanks a lot.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
  
  &lt;script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  tinyMCE.init({
          // General options
          mode : "textareas",
          theme : "advanced",
          plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,nonbreaking,xhtmlxtras,template,visualchars",
  
          theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,|,cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,|,forecolor,backcolor,|,tablecontrols,hr,removeformat,|,sub,sup",
          theme_advanced_buttons2 : ",charmap,advhr,|,fullscreen,|,cite,abbr,acronym,|,visualchars,nonbreaking,|,cleanup,help,code",
          theme_advanced_buttons3 : "",
          theme_advanced_buttons4 : "",
          theme_advanced_toolbar_location : "top",
          theme_advanced_toolbar_align : "left",
          theme_advanced_statusbar_location : "bottom",
          theme_advanced_resizing : true,
  
          skin : "o2k7",
          skin_variant : "silver"
  
  });
  &lt;/script&gt;
  
  &lt;!-- JQUERY --&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  (function($) {
          $.fn.autoSubmit = function(options) {
                  return $.each(this, function() {
                          // VARIABLES: Input-specific
                          var input = $(this);
                          var column = input.attr('name');
  
                          // VARIABLES: Form-specific
                          var form = input.parents('form');
                          var method = form.attr('method');
                          var action = form.attr('action');
  
                          // VARIABLES: Where to update in database
                          var where_val = form.find('#where').val();
                          var where_col = form.find('#where').attr('name');
  
                          // ONBLUR: Dynamic value send through Ajax
                          input.bind('blur', function(event) {
                                  // Get latest value
                                  var value = input.val();
                                  // AJAX: Send values
                                                                 $.ajax({
                                          url: action,
                                          type: method,
                                          data: {
                                                  val: value,
                                                  col: column,
                                                  w_col: where_col,
                                                  w_val: where_val
                                          },
                                          cache: false,
                                          timeout: 10000,
                                          success: function(data) {
                                                  // Alert if update failed
                                                  if (data) {
                                                          alert(data);
                                                  }
                                                  // Load output into a P
                                                  else {
                                                          $('#notice').text('Updated');
                                                          $('#notice').fadeOut().fadeIn();
                                                  }
                                          }
                                  });
                                  // Prevent normal submission of form
                                  return false;
                          })
                  });
          }
  })(jQuery);
  // JQUERY: Run .autoSubmit() on all INPUT fields within form
  $(function(){
          $('#ajax-form TEXTAREA').autoSubmit();
  });
  &lt;/script&gt;
  &lt;!-- STYLE --&gt;
  &lt;style type="text/css"&gt;
          INPUT { margin-right: 1em }
  &lt;/style&gt;
  
  &lt;script language="JavaScript"&gt;
  function updateThis(obj){
  var option = document.getElementById('option').selectedIndex;
  var option = document.getElementById('option').options[document.getElementById('option').selectedIndex].text;
  //alert("running updateThis function and the variable named option is: " + option);
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
           {
             if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
              {
              tinyMCE.execCommand("mceAddControl", true, "pfdnote");
              document.getElementById("pfdnote").innerHTML=xmlhttp.responseText;
                          }
           }
        xmlhttp.open("GET","getNote.php?lname="+option,true);
        xmlhttp.send();
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;?php
  require("DB_connector.php");
  require("Functions.php");
  
  $stk = $stmt-&gt;prepare("select stk_id, stk_name, stk_type, stk_summary, stk_description from stk_pfd WHERE stk_summary = 'sample data only'");
  $stk-&gt;execute();
  $row = $stk-&gt;fetchAll();
  
  ?&gt;
  
  &lt;form id="ajax-form" class="autosubmit" method="POST" action=""&gt;
      &lt;textarea id="pfdnote" name="notes" value="&lt;?php echo $row['stk_description']?&gt;" /&gt;&lt;/textarea&gt;
  &lt;/form&gt;
  
  &lt;p id="notice"&gt;&lt;/p&gt;
  
  &lt;?php
  
  $stk1 = $stmt-&gt;prepare("select stk_id, stk_name, stk_type, stk_summary, stk_description from stk_stk");
  $stk1-&gt;execute();
  $stk2 = $stk1-&gt;fetchAll();
  
  echo '&lt;select id="option" onChange="updateThis(this)" lake="something"&gt;';
  
  foreach ($stk2 as $d) {
          echo '&lt;option id="lname" value="'.$d['stk_id'].'"&gt;'.$d['stk_id'] . "+".  $d['stk_name']." + ".$d['stk_type'].'&lt;/option&gt;';
  }
  
  ?&gt;
  
  &lt;script&gt;
  jQuery(function(){
          $('#option').change(function(){
          var selectedLakeName = $('#option :selected').text();
          });
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's the getNote.php code that pulls the data from the database and show it on the textarea.</p>
  
  <pre><code>&lt;?php
  
  $stk_id = $_GET['lname'];
  
  
  require("DB_connector.php");
  require("Functions.php");
  
  $stk = $stmt-&gt;prepare("select stk_id, stk_name, stk_type, stk_summary, stk_description from stk_pfd WHERE stk_id = '$stk_id'");
  $stk-&gt;execute();
  $r = $stk-&gt;fetchAll();
  
  foreach ($r as $row) {
          $stk_desc = $row['stk_description'];
  }
  echo $stk_desc;
  
  ?&gt;
  </code></pre>