Hi I am having problem with my dynamic add textarea,
I need to have niceEdit html editor in all my textarea, It works good on hardcoded textarea but when I use my javaScript dynamic add function to to produce textarea it does not obtain the nicEdit html editor.
could anyone tell me what I'm missing here.
Any comments and suggestion is well appreciated.
here's my jsfiddle
Take it step by step. You need to instantiate for the new nicEditor Instance on each newly added controls.
//Create the text area first and append it to DOM.
var elm = $('<TEXTAREA NAME="description[]" id="test" ></TEXTAREA><a href="#" id="remScnt">Remove</a>').appendTo(scntDiv);
// Instantiate the nicEditor Instance on it. It will now have the reference of the element in DOM.
new nicEditor().panelInstance(elm[0]);
//wrap it with p
elm.wrap($('<p/>')); //You can chain it in the first step itself after appendTo(scntDiv).
Demo
Full Update with add/remove functionlity:
$(document).on('click', '#addScnt', function () {
// Add the textarea to DOM
var elm = $('<textarea NAME="description[]"></textarea>').appendTo(scntDiv);
//Get the current SIZE of textArea
var curSize = $('textarea[name="description[]"]').length;
//Set the Object with the index as key and reference for removel
editors[curSize] = new nicEditor().panelInstance(elm[0]);
//Create anchor Tag with rel attribute as that of the index of corresponding editor
elm.after($('<a/>', {
rel: curSize,
'class': "remScnt",
text: "Remove",
href: '#'
})).next().andSelf().wrapAll($('<p/>')); //add it to DOM and wrap this and the textarea in p
});
$(document).on('click', '.remScnt', function (e) {
e.preventDefault();
//Get the textarea of the respective anchor
var elem = $(this).prev('textarea');
//get the key from rel attribute of the anchor
var index = this.rel;
//Use it to get the instace and remove
editors[index].removeInstance(elem[0]);
//delete the property from object
delete editors[index];
//remove the element.
$(this).closest('p').remove();
});
Demo
Note live()
is deprecated and discontinued in newer version so use on()
with event delegation for dynamically created elements. Also change id to class for the remove link .remScnt
as duplicate id can cause issues and make the html invalid