Jump to content

how to display tinymce dynamically using jquery.


shan
 Share

Recommended Posts

im trying to load tinymce dynamically in my script when the edit button is clicked but its not loading. please help with simple and working example as im new to javascript.

code for tinymce :

 tinymce.init({
    menubar:false,
    selector: "textarea#wall_edit_1",
    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 | forecolor backcolor emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {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'}
    ]
    });

jquery code in home page to show the editor dynamically:

$(".session_edit").hide();
$(".friend_edit").hide();
$(".hidden_text_edit").click(function(){
    var id=$(this).attr("type");

$(".hidden_edit_4_session"+id).show();

var hide_status=$(".statusboxes").attr('type');
var title=$(".title_s_2copy").attr('type');
var data=$(".data_s_2copy").attr('type');
$(hide_status).hide();

tinyMCE.get('.hidden_edit_4_session').setContent(data);
$(".title_s_edit").val(title);


});
$(".close_edit").click(function(){
    $(".hidden_edit_4_session").hide();    
var hide_status=$(".statusboxes").attr('div', 'type');
$(hide_status).show();
});

html code that was generated using php which i want to edit:

<div class='jumbotron'><input type='text' class='form-control title_s' name='status_title' placeholder='Title ' ><br><textarea id='wall_id_1' class='update_session' placeholder='whats up qwerty'></textarea><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s'>Post</button></div><div attr='7' class='hidden_edit_4_session7 session_edit jumbotron'><a href='#' class='pull-right close_edit' title='Close without editing'>Close X</a><input type='text' class='form-control title_s_edit' name='status_title' value='hello shan!' placeholder='Title' ><div> </div><textarea id='wall_edit_1'  class='session_edit 7' placeholder='whats up qwerty'>
             <p>what's up.</p></textarea><br><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div><div id="7" type="7" class="statusboxes jumbotron"><h3 style="color:black; margin-bottom:5px; margin-top:5px;" class="pull-left"><div id="7" class="title_s_2copy" value="hello shan!">hello shan!</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"><li><a href="#" id="7" type="7" class="edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li><li><a href="#" id="7" class="delete_4_session hidden_text_delete_7 glyphicon glyphicon-trash delete_reply_btn" title="Delete this status and its replies">Remove</a></li></ul></div></span><br><hr><span class="pull-left data_s_2copy" id="7" value="<p>what's up.</p>" style="font-size:9px; margin-bottom:0px; margin-top:0px; text-align:left; color:black;"><p>what's up.</p></span><br><br><hr><b style="text-align:right; color:black;"><small>Posted by:-  <a href="search_results.php?u=qwerty">qwerty</a>   2015-10-20 10:13:18</small></b><br><br><textarea id="7"  class="status_update input-custom2" placeholder="comment's"></textarea><button id="7" type="b" class="btn btn-warning pull-right btn-sm">Reply</button></div><div attr='6' class='hidden_edit_4_session6 session_edit jumbotron'><a href='#' class='pull-right close_edit' title='Close without editing'>Close X</a><input type='text' class='form-control title_s_edit' name='status_title' value='pen test' placeholder='Title' ><div> </div><textarea id='wall_edit_1'  class='session_edit 6' placeholder='whats up qwerty'>
             <p><script type="text/javascript">alert("hooya hacked")</script></p></textarea><br><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div><div id="6" type="6" class="statusboxes jumbotron"><h3 style="color:black; margin-bottom:5px; margin-top:5px;" class="pull-left"><div id="6" class="title_s_2copy" value="pen test">pen test</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"><li><a href="#" id="6" type="6" class="edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li><li><a href="#" id="6" class="delete_4_session hidden_text_delete_6 glyphicon glyphicon-trash delete_reply_btn" title="Delete this status and its replies">Remove</a></li></ul></div></span><br><hr><span class="pull-left data_s_2copy" id="6" value="<p><script type="text/javascript">alert("hooya hacked")</script></p>" style="font-size:9px; margin-bottom:0px; margin-top:0px; text-align:left; color:black;"><p><script type="text/javascript">alert("hooya hacked")</script></p></span><br><br><hr><b style="text-align:right; color:black;"><small>Posted by:-  <a href="search_results.php?u=qwerty">qwerty</a>   2015-10-18 21:53:31</small></b><br><br><textarea id="6"  class="status_update input-custom2" placeholder="comment's"></textarea><button id="6" type="b" class="btn btn-warning pull-right btn-sm">Reply</button></div><div attr='5' class='hidden_edit_4_session5 session_edit jumbotron'><a href='#' class='pull-right close_edit' title='Close without editing'>Close X</a><input type='text' class='form-control title_s_edit' name='status_title' value='pen test' placeholder='Title' ><div> </div><textarea id='wall_edit_1'  class='session_edit 5' placeholder='whats up qwerty'>
             <p><script type="text/javascript">alert("hooya hacked")</script></p></textarea><br><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div><div id="5" type="5" class="statusboxes jumbotron"><h3 style="color:black; margin-bottom:5px; margin-top:5px;" class="pull-left"><div id="5" class="title_s_2copy" value="pen test">pen test</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"><li><a href="#" id="5" type="5" class="edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li><li><a href="#" id="5" class="delete_4_session hidden_text_delete_5 glyphicon glyphicon-trash delete_reply_btn" title="Delete this status and its replies">Remove</a></li></ul></div></span><br><hr><span class="pull-left data_s_2copy" id="5" value="<p><script type="text/javascript">alert("hooya hacked")</script></p>" style="font-size:9px; margin-bottom:0px; margin-top:0px; text-align:left; color:black;"><p><script type="text/javascript">alert("hooya hacked")</script></p></span><br><br><hr><b style="text-align:right; color:black;"><small>Posted by:-  <a href="search_results.php?u=qwerty">qwerty</a>   2015-10-18 21:53:30</small></b><br><br><textarea id="5"  class="status_update input-custom2" placeholder="comment's"></textarea><button id="5" type="b" class="btn btn-warning pull-right btn-sm">Reply</button></div><div attr='3' class='hidden_edit_4_session3 session_edit jumbotron'><a href='#' class='pull-right close_edit' title='Close without editing'>Close X</a><input type='text' class='form-control title_s_edit' name='status_title' value='this is not working' placeholder='Title' ><div> </div><textarea id='wall_edit_1'  class='session_edit 3' placeholder='whats up qwerty'>
             <p>wht to do???</p></textarea><br><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div><div id="3" type="3" class="statusboxes jumbotron"><h3 style="color:black; margin-bottom:5px; margin-top:5px;" class="pull-left"><div id="3" class="title_s_2copy" value="this is not working">this is not working</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"><li><a href="#" id="3" type="3" class="edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li><li><a href="#" id="3" class="delete_4_session hidden_text_delete_3 glyphicon glyphicon-trash delete_reply_btn" title="Delete this status and its replies">Remove</a></li></ul></div></span><br><hr><span class="pull-left data_s_2copy" id="3" value="<p>wht to do???</p>" style="font-size:9px; margin-bottom:0px; margin-top:0px; text-align:left; color:black;"><p>wht to do???</p></span><br><br><hr><b style="text-align:right; color:black;"><small>Posted by:-  <a href="search_results.php?u=qwerty">qwerty</a>   2015-10-17 19:32:35</small></b><br><br><textarea id="3"  class="status_update input-custom2" placeholder="comment's"></textarea><button id="3" type="b" class="btn btn-warning pull-right btn-sm">Reply</button></div><div attr='2' class='hidden_edit_4_session2 session_edit jumbotron'><a href='#' class='pull-right close_edit' title='Close without editing'>Close X</a><input type='text' class='form-control title_s_edit' name='status_title' value='im grateful to mother nature and god' placeholder='Title' ><div> </div><textarea id='wall_edit_1'  class='session_edit 2' placeholder='whats up qwerty'>
             <p>as the title says im grateful</p></textarea><br><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div><div id="2" type="2" class="statusboxes jumbotron"><h3 style="color:black; margin-bottom:5px; margin-top:5px;" class="pull-left"><div id="2" class="title_s_2copy" value="im grateful to mother nature and god">im grateful to mother nature and god</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"><li><a href="#" id="2" type="2" class="edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li><li><a href="#" id="2" class="delete_4_session hidden_text_delete_2 glyphicon glyphicon-trash delete_reply_btn" title="Delete this status and its replies">Remove</a></li></ul></div></span><br><hr><span class="pull-left data_s_2copy" id="2" value="<p>as the title says im grateful</p>" style="font-size:9px; margin-bottom:0px; margin-top:0px; text-align:left; color:black;"><p>as the title says im grateful</p></span><br><br><hr><b style="text-align:right; color:black;"><small>Posted by:-  <a href="search_results.php?u=qwerty">qwerty</a>   2015-10-17 19:29:15</small></b><br><br><textarea id="2"  class="status_update input-custom2" placeholder="comment's"></textarea><button id="2" type="b" class="btn btn-warning pull-right btn-sm">Reply</button></div><div attr='1' class='hidden_edit_4_session1 session_edit jumbotron'><a href='#' class='pull-right close_edit' title='Close without editing'>Close X</a><input type='text' class='form-control title_s_edit' name='status_title' value='hello world' placeholder='Title' ><div> </div><textarea id='wall_edit_1'  class='session_edit 1' placeholder='whats up qwerty'>
             <p>this is my 1st post</p></textarea><br><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div><div id="1" type="1" class="statusboxes jumbotron"><h3 style="color:black; margin-bottom:5px; margin-top:5px;" class="pull-left"><div id="1" class="title_s_2copy" value="hello world">hello world</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"><li><a href="#" id="1" type="1" class="edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li><li><a href="#" id="1" class="delete_4_session hidden_text_delete_1 glyphicon glyphicon-trash delete_reply_btn" title="Delete this status and its replies">Remove</a></li></ul></div></span><br><hr><span class="pull-left data_s_2copy" id="1" value="<p>this is my 1st post</p>" style="font-size:9px; margin-bottom:0px; margin-top:0px; text-align:left; color:black;"><p>this is my 1st post</p></span><br><br><hr><b style="text-align:right; color:black;"><small>Posted by:-  <a href="search_results.php?u=qwerty">qwerty</a>   2015-10-17 19:25:09</small></b><br><br><textarea id="1"  class="status_update input-custom2" placeholder="comment's"></textarea><button id="1" type="b" class="btn btn-warning pull-right btn-sm">Reply</button></div>    </div>   
Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.