unable to type into textarea generated dynamically

Question

Got a tinymce textarea being generated dynamically pretty well but unable to type into any of the generated textareas.

jsFiddle to preview:

http://jsfiddle.net/sammie85/KyNtB/

Each textarea have unique Ids but just cant figure out what could be issue.

Here is the JS in HTML head:

<script type="text/javascript">
$(function(){
  var removeLink = ' <a class="remove" href="#" style="float:right; margin-top:-20px; margin-bottom:10px;" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
$('a.add').relCopy({ append: removeLink});  
});
</script>

HTML form:

<form name = "form2" method="post" action="">

<div class="clone_box_holder cloneEmp">

<p>
<label><strong>New Text</strong></label>
<textarea id="textarea_id" name="content[]">
<?php echo stripslashes($content); ?>
</textarea>
  <div class="clear"></div>
</p>

</div>

<p><a href="#" class="add add_res_submit" rel=".cloneEmp">Add More Text</a></p>

</form>

JS generating new textarea:

(function($) {

    $.fn.relCopy = function(options) {
        var settings = jQuery.extend({
            excludeSelector: ".exclude",
            emptySelector: ".empty",
            copyClass: "copy",
            append: '',
            clearInputs: true,
            limit: 0 // 0 = unlimited
        }, options);

        settings.limit = parseInt(settings.limit);

        // loop each element
        this.each(function() {

            // set click action
            $(this).click(function(){
                var rel = $(this).attr('rel'); // rel in jquery selector format             
                var counter = $(rel).length;

                // stop limit
                if (settings.limit != 0 && counter >= settings.limit){
                    return false;
                };

                var master = $(rel+":first");
                var parent = $(master).parent();                        
                var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);

                //Remove Elements with excludeSelector
                if (settings.excludeSelector){
                    $(clone).find(settings.excludeSelector).remove();
                };

                //Empty Elements with emptySelector
                if (settings.emptySelector){
                    $(clone).find(settings.emptySelector).empty();
                };                              

                // Increment Clone IDs
                if ( $(clone).attr('id') ){
                    var newid = $(clone).attr('id') + (counter +1);
                    $(clone).attr('id', newid);
                };

                // Increment Clone Children IDs
                $(clone).find('[id]').each(function(){
                    var newid = $(this).attr('id') + (counter +1);
                    $(this).attr('id', newid);
                });

                //Clear Inputs/Textarea
                if (settings.clearInputs){
                    $(clone).find(':input').each(function(){
                        var type = $(this).attr('type');
                        switch(type)
                        {
                            case "button":
                                break;
                            case "reset":
                                break;
                            case "submit":
                                break;
                            case "checkbox":
                                $(this).attr('checked', '');
                                break;
                            default:
                              $(this).val("");
                        }                       
                    });                 
                };

                $(parent).find(rel+':last').after(clone);

                return false;

            }); // end click action

        }); //end each loop

        return this; // return to jQuery
    };

})(jQuery);

Would really appreciate getting help.

Answer 1

It seems you can't clone the HTML with the already TinyMCE editor injected by the plugin. This link mentions it in the within the many comments: http://www.tinymce.com/forum/viewtopic.php?id=26372.

remove as mentioned in the link did not work for me in your code, maybe you can get it to work. In the meantime see below for an alternative I use myself when duplicating DOM elements which have third party plugins attached.

You can make a HTML template the DOM you want to keep injecting, similar to this:

var template = '<div class="clone_box_holder cloneEmp"><p><label><strong>New Text</strong></label><textarea class="mceSimple" name="content[]"></textarea><div class="clear"></div></p></div>';

I have removed the id attribute of the text area, see note on the bottom of post.

Instead of cloning the existing already injected tinyMCE DOM elements, only inject your template and then re-attach the tinyMCE plug-in to include the new DOM elements.

It seems the tinyMCE plugin get's confused when cloning already injected tinyMCE editors. You only inject your basic DOM elements and let the tinyMCE plugin do the rest, that seems to work best.

I have done a very, very basic version of this, removing most of you unique code in relevance to the textarea id attribute changes to only focus on the relevant code.

---

DEMO - Injecting tinyMCE textareas dynamically

---

Try to incorporate this in your code.

Remove the text area id as it only causes problems, even when changing it in the code. You always know the context of the current textarea when you click into it anyway.

Complete demo code for convinience:

var template = '<div class="clone_box_holder cloneEmp"><p><label><strong>New Text</strong></label><textarea class="mceSimple" name="content[]"></textarea><div class="clear"></div></p></div>';

function initTinyMCE() {
    tinyMCE.init({
        mode: "textareas",
        theme: "simple"
    });
}

(function ($) {
    $.fn.relCopy = function (options) {
        var settings = jQuery.extend({
            excludeSelector: ".exclude",
            emptySelector: ".empty",
            copyClass: "copy",
            append: '',
            clearInputs: true,
            limit: 0 // 0 = unlimited
        }, options);

        settings.limit = parseInt(settings.limit);

        // loop each element
        this.each(function () {

            // set click action
            $(this).click(function () {                
                var $clone = $(template);

                $('form').find('.cloneEmp:last').after($clone);

                initTinyMCE(); // re-attach plug-in to include new DOM

                return false;
            }); // end click action

        }); //end each loop

        return this; // return to jQuery
    };

})(jQuery);


$(function () {
    var removeLink = ' <a class="remove" href="#" style="float:right; margin-top:-20px; margin-bottom:10px;" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
    $('a.add').relCopy({
        append: removeLink
    });
});

initTinyMCE();