CODEWITHSUNDEEP
javascriptjqueryhtml
BaconJuice
BaconJuice

Reputation: 3779

Adding tinyMCE to multiple dynamically created textareas

I have a list of dynamically created textareas with content in them. Below is how I retrieve the data and create the textareas dynamically.

$(document).ready(function(){

$('#btn').click(function(){
    var fullurl = $('#hiddenurl').val();
    var str = $('#email').val();
    $.post(fullurl, {
        sendValue : str
    }, function(data) {
        var table_output = '<table><thead><tr><th>Name</th><th>Email</th></tr></thead>';
    $.each(data, function(i, d) {
        table_output += '<tr><td>'+d.Name+'</td><td>'+d.Email+'</td></tr>';
        output += '<tr><td colspan="2"><textarea name="description" id="desc_'+d.ID+'" class="desc">'+d.Description+'</textarea></td></tr>';            

        tinyMCE.init({
            mode : "exact",
            elements : 'desc_'+d.ID,
            theme_advanced_buttons1 : "mylistbox,mysplitbutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom"
        });

    });
 table_output += '</table>';
 $('#task_data_div').append(table_output);

I tried implementing tinyMCE as show above however it does not seem to work. Can anyone help me out here and maybe point me in the right direction.

Thank you.

Upvotes: 0

Views: 1633

Answers (1)

T.W.R. Cole
T.W.R. Cole

Reputation: 4166

I had to factor out your Ajax call for simplicity, but my #btn click handler will drop in to your success handler transparently.

Demonstration (jsFiddle) http://jsfiddle.net/C59EW/

HTML

<button id="btn">button</button>
<div id="show_data"></div>

Javascript (+jQuery, +tinyMCE)

$(document).ready( function() {
    var data = [{ID:"1",Description:"text 1"}, {ID:"2",Description:"text 2"}];

    $('#btn').click( function() {
        $.each( data, function(i, d) {
            $('#show_data').append('<textarea name="description" id="desc_'+d.ID+'" class="desc">'+d.Description+'</textarea>');
            tinyMCE.init({
                mode : "exact",
                elements : 'desc_'+d.ID,
                theme_advanced_buttons1 : "mylistbox,mysplitbutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink",
                theme_advanced_buttons2 : "",
                theme_advanced_buttons3 : "",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_statusbar_location : "bottom"
            });
        });
    });

});

Upvotes: 1

Related Questions