problem with tinymce textarea in dynamically added jquery tabs
- by kranthi
I have an aspx page(Default1.aspx),in which i have a static jquery tab and anchor tag upon clicking the anchor tag(Add Tab) I am adding new tab dynamically,which gets its contents loaded from another aspx page(Default2.aspx).This second page contains some text inside a tag,a textarea with 'tinymce' class which is placed inside a div with 'style="display:none" ' and this textarea gets displayed only upon clicking the edit button on that page.
The HTML of Default1.aspx page looks like this.
<head runat="server">
<title>Untitled Page</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<link href="css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/widgets.css" rel="stylesheet" type="text/css" />
<link href="css/print.css" rel="stylesheet" type="text/css" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
$(function() {
//DECLARE FUNCTION: removetab
var removetab = function(tabselector, index) {
$(".removetab").click(function(){
$(tabselector).tabs('remove',index);
});
};
//create tabs
$("#tabs").tabs({
add: function(event, ui) {
//select newely opened tab
$(this).tabs('select',ui.index);
//load function to close tab
removetab($(this), ui.index);
},
show: function(event, ui) {
if($.fn.tinymce)
{
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url : 'js/tiny_mce/tiny_mce.js',
// General options
theme : "advanced",
plugins : "safari,style,layer,table,advhr,advimage,advlink,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "sub,sup,|,ltr,rtl,|,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left"
/*theme_advanced_statusbar_location : "bottom",*/
/*theme_advanced_resizing : true,*/
});
}
//load function to close selected tabs
removetab($(this), ui.index);
}
});
//load new tab
$(".addtab").click(function(){
var href=$(this).attr("href");
var title=$(this).attr("title");
$("#tabs").tabs( 'add' , href , title+' <span class="removetab ui-icon ui-icon-circle-close" style="float:right; margin: -2px -10px 0px 3px; cursor:pointer;"></span>');
return false;
});
});
function showEditFields(){
$('.edit').css('display','inline');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="addtab" title="Tab Label" href="HTMLPage.htm">Add Tab</a>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Default Tab</a></li>
</ul>
<div id="tabs-1">
<p>Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
</div>
</div>
</form>
</body>
and the HTML of Default2.aspx looks like this.
<head>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
<div class="edit" style="display:none">
<textarea style="height:80px; width:100%" class="tinymce" name="" rows="8" runat="server" id="txtans">answer text goes here
</textarea>
</div>
<input id="Button1" type="button" value="edit" onclick="showEditFields();" />
</p>
</form>
</body>
so when I click on the "edit" button available on Default2.aspx ,the textarea with tinymce should appear and I can add as many tabs as I want from Default1.aspx by clicking on Add Tab(anchor) which loads multiple tabs with content from Default2.aspx.After adding these multiple tabs ,if I check to see whether all the textareas are with tinymce,I noticed that only the 1st tab contains textarea with tinymce and in all the other tabs tinymce doesnt show up ,simply the normal text area appears.
Could someone please help me with this?
Thanks.
