I’m using the TinyMCE editor (jQuery package). In the same page, I’m also using jQuery UI tabs. My problem is that if I try to render my jQuery tabs AFTER the page is loaded, I’m getting the error message g.split is not a function and my tabs are not rendered. However, If I render my tabs at page load time, everything is working fine. It looks that this problem appears only once the TinyMCE object was rendered.
So, this problem is getting me crazy. Any help would be very welcome.
I have made a minimal html example page to reproduce the problem. If you click the button, you will see that the tabs object are not rendered and I’m getting the error message. On the other side, the jQuery button is correctly rendered. So, it appears that this problem occurs only with my jQuery tabs object.
<html>
<head>
<title>test 1</title>
<link type="text/css" href="css/custom/jquery-ui.custom.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/jquery-ui-custom-min.js"></script>
<script type="text/javascript" src="js/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
function render_my_jquery_ui_objects()
{
$("#my_button_1" ).button();
$("#my_tabs").tabs();
return true;
}
$().ready(function() {
$('#my_editor_1.tinymce').tinymce({
script_url : 'js/tiny_mce/tiny_mce.js',
theme : "advanced",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
content_css : "css/tinymce.css?" + new Date().getTime()
});
//render_my_jquery_ui_objects(); // if I call render_my_jquery_ui_objects() here, it will work fine. Both objects (button and tabs) will be rendered
});
</script>
</head>
<body onload=""> <!-- if I put render_my_jquery_ui_objects() in the onLoad event, it will also work fine -->
<button onclick="render_my_jquery_ui_objects();">Render my jQuery UI objects manually</button> <!-- if I click the button to call render_my_jquery_ui_objects(), only the jQuery button is rendered. The tabs are not rendered. This is my problem here. -->
<br/><br/>
<a href="#" id="my_button_1">Button 1 (jQuery)</a>
<br/><br/>
<div id="my_tabs">
<ul>
<li><a href="#tabs-1">My tab 1</a></li>
<li><a href="#tabs-2">My tab 2</a></li>
</ul>
<div id="tabs-1">
<p>Tab 1 content</p>
</div>
<div id="tabs-2">
<p>Tab 2 content</p>
</div>
</div>
<br/>
<textarea id="my_editor_1" name="my_editor_1" rows="10" cols="100" class="tinymce">
<b>text in bold</b><br>text normal
</textarea>
</body>
</html>
Finally, the problem was on my side.
Sorry about that.
Here are the details.