CODEWITHSUNDEEP
phpmysqlajaxjquerytinymce
webdev.gk
webdev.gk

Reputation: 219

Cannot make textarea populated by Ajax with TinyMCE editor

I've been working on this for almost 4 hours and I can't get it work.

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.

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.

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
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"

});
</script>

<!-- JQUERY -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">

(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();
});
</script>
<!-- STYLE -->
<style type="text/css">
        INPUT { margin-right: 1em }
</style>

<script language="JavaScript">
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 && xmlhttp.status==200)
            {
            tinyMCE.execCommand("mceAddControl", true, "pfdnote");
            document.getElementById("pfdnote").innerHTML=xmlhttp.responseText;
                        }
         }
      xmlhttp.open("GET","getNote.php?lname="+option,true);
      xmlhttp.send();
}
</script>

</head>
<body>

<?php
require("DB_connector.php");
require("Functions.php");

$stk = $stmt->prepare("select stk_id, stk_name, stk_type, stk_summary, stk_description from stk_pfd WHERE stk_summary = 'sample data only'");
$stk->execute();
$row = $stk->fetchAll();

?>

<form id="ajax-form" class="autosubmit" method="POST" action="">
    <textarea id="pfdnote" name="notes" value="<?php echo $row['stk_description']?>" /></textarea>
</form>

<p id="notice"></p>

<?php

$stk1 = $stmt->prepare("select stk_id, stk_name, stk_type, stk_summary, stk_description from stk_stk");
$stk1->execute();
$stk2 = $stk1->fetchAll();

echo '<select id="option" onChange="updateThis(this)" lake="something">';

foreach ($stk2 as $d) {
        echo '<option id="lname" value="'.$d['stk_id'].'">'.$d['stk_id'] . "+".  $d['stk_name']." + ".$d['stk_type'].'</option>';
}

?>

<script>
jQuery(function(){
        $('#option').change(function(){
        var selectedLakeName = $('#option :selected').text();
        });
});
</script>

</body>
</html>

Here's the getNote.php code that pulls the data from the database and show it on the textarea.

<?php

$stk_id = $_GET['lname'];


require("DB_connector.php");
require("Functions.php");

$stk = $stmt->prepare("select stk_id, stk_name, stk_type, stk_summary, stk_description from stk_pfd WHERE stk_id = '$stk_id'");
$stk->execute();
$r = $stk->fetchAll();

foreach ($r as $row) {
        $stk_desc = $row['stk_description'];
}
echo $stk_desc;

?>

Upvotes: 2

Views: 3048

Answers (6)

Abelardo CM
Abelardo CM

Reputation: 1

<textarea id="editor" name="editor" type="text"></textarea>

 tinyMCE.triggerSave();
    var content = $("textarea[name=editor]").val();
    var formData = new FormData();
    formData.append("content", content);


 $.ajax({
            url: '../boot/newBlog.php',
            method: 'POST',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                switch (response){
                  
                }
              }
        });

Upvotes: -1

Mizumizu
Mizumizu

Reputation: 3

This worked for me perfectly in a similar situation today (tinymce version 4+)

tinymce.get('textarea_id').setContent(your_new_content);

Where textarea_id is the original id of your textarea, and your_new_content is the new content which came from an AJAX call (or whatever you want)

TinyMCE Documentation

Upvotes: 0

Thariama
Thariama

Reputation: 50832

The other answers do not take into account that tinymce is NOT a textarea. tinymce creates a contenteditable iframe witht he content of the former html element (usually a textarea) and puts it into the iframe body. The former html element becomes hidden.

Here is the solution. Instead of calling code that addresses the textarea:

document.getElementById("pfdnote").innerHTML=xmlhttp.responseText;

you need to address tinymce (and using its API the body of the iframe). Use this

tinymce.get('pfdnote').setContent(xmlhttp.responseText);

Additionally, you should be aware that calling

tinyMCE.execCommand("mceAddControl", true, "pfdnote");

a second time without using mceRemoveControl and shutting down the editor will lead to errors/problems. You should check if the editor is already there and only if its not initialize it:

if (!tinymce.get('pdfnote')) tinyMCE.execCommand("mceAddControl", true, "pfdnote");

Upvotes: 2

Roddy Dairion
Roddy Dairion

Reputation: 53

Ok here's my cheat.

I spent hours working on this and finally thought i could just overwrite the entire textbox by creating a new textbox and the just add the controls to it. So here's my work around

My HTML

<div id="text1"><textarea id="textdescid" name="txt_desc" cols="60" rows="20"><strong>fdsfsdfsdfs</strong></textarea></div/>

My Javascript

 var divbox=document.getElementById('text1');

     if(http.readyState == 4 && http.status == 200)  
     {  
         var response = http.responseText;  

         if(response.length > 0){
             divbox.innerHTML='<textarea id="textdescid2" name="txt_desc" cols="60" rows="20"><strong>tretdsgtdsfdsfdsf</strong></textarea>'
             tinyMCE.execCommand("mceRemoveControl", true, "textdescid");
             tinyMCE.execCommand("mceAddControl", true, "textdescid2");
         }  
     }

Hope this helps you out guys. Of course you have some mods to do as i used on static output to prove that my code actually works.

Upvotes: 1

asprin
asprin

Reputation: 9823

Remove this from the select tag

onChange="updateThis(this)"

And replace this 

<script language="JavaScript">
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 && xmlhttp.status==200)
            {
            tinyMCE.execCommand("mceAddControl", true, "pfdnote");
            document.getElementById("pfdnote").innerHTML=xmlhttp.responseText;
                        }
         }
      xmlhttp.open("GET","getNote.php?lname="+option,true);
      xmlhttp.send();
}
</script>

with

<script>
jQuery(function(){
        $('select#option').live('change', function(){
             var selectedLakeName = $(this).val();

             $.ajax({
                 type:'get',
                 url: 'getNote.php',
                 data: {'lname':selectedLakeName},
                 success:function(ret)
                 {
                    $('#pfdnote').html(ret);
                 }

             });
        });
});
</script>

Upvotes: 0

Mohd Moe
Mohd Moe

Reputation: 577

try <textarea>VALUE</textarea>

<textarea id="pfdnote" name="notes" /><?php echo $row['stk_description'];?></textarea>

instead of

<textarea id="pfdnote" name="notes" value="<?php echo $row['stk_description']?>" /></textarea>

Upvotes: 1

Related Questions