how to add a tinymce editor to a dynamically added textarea?

[shan2batman]

Guys recently i finished a infinite scroll to one of my projects using jquery, php and mysql. After creating that i face the problem of tinymce editor not binding to the dynamically generated textarea. What should i do?

here is the code for tinymce editor:

tinymce.init({
    menubar:false,
    forced_root_block : "",
    selector: "textarea#wall_edit_1",
     entities : '160,nbsp,162,cent,8364,euro,163,pound',
    theme: "modern",
    resize: false,
    height: 200,
    plugins: [
         " autolink link image preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons paste textcolor"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage |  emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
      //  {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Header', block: 'h1'},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
    });

here is the php code that dynamically generates the textarea while using the infinite scroll feature in jquery:

if ($author==$_SESSION['uname'] || $account_name==$_SESSION['uname']) {
                $statusdeletebutton='<li>'
                           . '<a  type="'.$updateid.'" class="btn delete_4_session hidden_text_delete_'.$updateid.' glyphicon glyphicon-trash delete_status_btn" title="Delete this status and its replies">Remove</a></li>';
                $edit_btn='<li>'
                        . '<a attr="'.$updateid.'" type="'.$updateid.'" class="btn edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li>';
                $statusui_edit="<div type='".$updateid."' class='hidden_edit_4_session session_editor".$updateid." jumbotron'>"
            . "<a type='".$updateid."' class='btn pull-right close_edit' title='Close without editing'>Close X</a>"
            . "<input type='text' class='form-control title_s_edit title_s_".$updateid."' name='status_title' value='".html_entity_decode($title)."' placeholder='Title' >"
            . "<span> </span>"
            . "<textarea id='wall_edit_1' type='".$updateid."' rows='5' cols='50'  class='session_edit text_value_".$updateid."' wrap='hard' placeholder='whats up ".$session_uname."'>
             ".html_entity_decode($data1)."</textarea><br>"
            . "<button style='float:right;' value='".$updateid."' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div>" ;

                }else{
                    $statusdeletebutton="";
                    $edit_btn="<li class='posted'>You are not the owner of this Post</li>";
                    $statusui_edit="";
                }

       echo $statusui_edit.''. $hidden_text.'<div attr="'.$updateid.'" type="'.$updateid.'" class="statusboxes status_'.$updateid.'  jumbotron">'
                        . '<h3 class="pull-left title">'
                        . '<div id="'.$updateid.'" class="title_s_2copy posted" value="'.html_entity_decode($title).'">'.html_entity_decode($title).'</div></h3>'
                        . '<span class="pull-right">'
                        . '<div class="dropdown">'
                        . '<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"  >'
                        . '<span class="glyphicon glyphicon-edit"></span></button>'
                        . '<ul class="dropdown-menu">'
                         .$edit_btn .' '. $statusdeletebutton .'</ul></div></span><br><hr>'
                        . '<legend><span style="font-size: 13.5px;" class=" data_s_2copy" type="'.$updateid.'" >'
                        . html_entity_decode($data1).'</span></legend><b class="posted"><small>Posted by:-  <a href="home.php?u='.$author.'"><img src="'.$feed_pic.'" height="20px" width="20px"> '.$author.   '</a>   '.$datemade.'</small></b>'
                        . '<br><legend>'.$like.' | '.$unlike. ' | '.$share_button.'<h4><a id="'.$updateid.'" class="btn collap-btn">Comments</a></h4></legend>';

[denno020]

You need to re-initialise TinyMCE once the AJAX (I assume) response has come back from the server and you're finished putting the data into the DOM.

 

You will also want to fix up the ID, because you're going to have multiple <textarea> elements on the page with the same ID, which is invalid HTML, and could also mess with the initialisation of TinyMCE