How to use Tinymce 4.1.9 with Raw ajax, not Jquery

Question

I am trying to use Tinymice 4.1.9 to validate a textarea but my code is being handle by raw ajax since i do not know much about jquery. The problem is that when I add Tinymce 4.1.9 to my textarea, on validation, I get an empty string unless i validate twice.

This is what my raw ajax that handles the validation looks like

<script  language="javascript">

   function identification(identification_1,identification_2)
    {
      var OAjax;



       document.getElementById('image_loading_identification').style.display='';

      if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
      else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
      OAjax.open('POST',"identification.php",true);
      OAjax.onreadystatechange = function()
      {
          if (OAjax.readyState == 4 && OAjax.status==200)
          {

          document.getElementById('image_loading_identification').style.display='none';


              if (document.getElementById)
              {   

                 document.getElementById("identification").innerHTML=OAjax.responseText;






              }     
          }
      }

      OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
      OAjax.send('identification_1='+ encodeURIComponent (identification_1)+'&identification_2='+ encodeURIComponent (identification_2)); 

    }

</script>

My Tinymce 4.1.9 Code

<script type="text/javascript" src="js/jquery/jquery-2.1.1.min.js"></script>

<script src="js/tinymce_4_1_9_jquery/tinymce/js/tinymce/tinymce.min.js" type="text/javascript"></script>
<script src="js/tinymce_4_1_9_jquery/tinymce/js/tinymce/jquery.tinymce.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {
   $('textarea.tinymce').tinymce({
    theme: "modern",
    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"
   });
});

</script>

The Html Form

<form  method="post" name="nomduformulaire_identification" id="nomduformulaire_identification" onsubmit="identification(this.identification_1.value,this.identification_2.value);return false" action="">


<div class="form-group"> 
                        <input name="identification_1" type="text" id="identification_1" class="form-control" placeholder="Name"  autofocus required/>
                    </div>

                    <div class="form-group">


<textarea id="identification_2" name="identification_2" class="tinymce"  style="width:100%"></textarea>

                    </div>    


</form>

Here, unless i submit the form twice the textarea input from identification_2 does not receive anything.

How to use Tinymce 4.1.9 with Raw ajax, not Jquery, and retrieve information from the identification_2 field ?

twicejr twicejr · Accepted Answer · 2015-05-20T12:18:41

I think, before you want to readout the textarea, you need to do:

if (typeof(tinymce) !== 'undefined')
{
    tinymce.triggerSave();
    tinymce.remove('textarea');
}

How to use Tinymce 4.1.9 with Raw ajax, not Jquery

1 Answers