javascript - unable to type into textarea generated dynamically -
got tinymce textarea being generated dynamically pretty unable type of generated textareas.
jsfiddle preview:
http://jsfiddle.net/sammie85/kyntb/
each textarea have unique ids cant figure out issue.
here 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 excludeselector if (settings.excludeselector){ $(clone).find(settings.excludeselector).remove(); }; //empty elements 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 jquery }; })(jquery); would appreciate getting help.
it seems can't clone html tinymce editor injected plugin. link mentions in within many comments: http://www.tinymce.com/forum/viewtopic.php?id=26372.
remove mentioned in link did not work me in code, maybe can work. in meantime see below alternative use myself when duplicating dom elements have third party plugins attached.
you can make html template dom want keep injecting, similar 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 id attribute of text area, see note on bottom of post.
instead of cloning existing already injected tinymce dom elements, inject template , re-attach tinymce plug-in include new dom elements.
it seems tinymce plugin get's confused when cloning injected tinymce editors. inject basic dom elements , let tinymce plugin rest, seems work best.
i have done very, basic version of this, removing of unique code in relevance textarea id attribute changes focus on relevant code.
demo - injecting tinymce textareas dynamically
try incorporate in code.
remove text area id causes problems, when changing in code. know context of current textarea when click anyway.
complete demo code 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 include new dom return false; }); // end click action }); //end each loop return this; // return 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();
Comments
Post a Comment