More about putting a TE in a JQuery tabs widget tab

More about putting a TE in a JQuery tabs widget tab

I have been pulling my hair out over this one. I can setup a JQuery Tabs widget and I can put a JQuery TE into each tab.  I can also put a plain old boring TEXTAREA into each tab. Problem is, when I click a tab, I want it to give focus to the text editor instance in the tab. I have tried a variety of ways ot make this work with no luck. 

The code I have been playing with is pasted below. You can see in the javascript function that I have tried several different ways to approach it, all with no luck. This must be doable, maybe someone here knows the trick?

Thanks very much...

  2. <!DOCTYPE html>

  4. <html>
  5. <head>

  7.     <meta charset="UTF-8" />

  9.     <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
  10.     <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
  11.     <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  13.     <!-- JQuery TE (HTML editor) -->
  14.     <link href="./jquery-te-1.4.0.css" rel="stylesheet" />
  15.     <script src="./jquery-te-1.4.0.min.js"></script>

  17.     <script>
  18.         $(function() {
  19.             $(".editor").jqte();
  20.         })

  22. $(function()
  23. {
  24. $("#messages").tabs(
  25. {
  26.     activate: function (event, ui) 
  27.     {
  28.     ui.newpanel.setActive();
  29.     ui.newpanel.focus();
  30.    
  31.         //$("#tab_a").focus();
  32.         //$("#tab_a").setActive();
  33.        
  34.     //alert( "You clicked a tab!" );
  35.    
  36.     //var temp = document.getElementById("tab_a");
  37.     //temp.focus();
  38.     //temp.setActive();
  39.     }
  40. })
  41. })

  43.         
  44.     </script>
  45. </head>

  47. <body>

  49.     <FORM>
  50.                 <table id="table_text">
  51.                     <TR>
  52.                         <TD>

  54.                             <div id="messages">
  55.                                 <ul>
  56.                                     <li><a href="#tab_a">Tab A</a></li>
  57.                                     <li><a href="#tab_b">Tab B</a></li>
  58.                                     <li><a href="#tab_c">Tab C</a></li>
  59.                                 </ul>

  61.                                 <div id="tab_a">
  62.                                     <textarea id="tab_a" class="editor" rows="20" cols="72"> </textarea>
  63.                                 </div>

  65.                                 <div id="tab_b">
  66.                                     <textarea id="tab_b" class="editor" rows="20" cols="72"> </textarea>
  67.                                 </div>

  69.                                 <div id="tab_c">
  70.                                     <textarea id="tab_c" class="editor" rows="20" cols="72"> </textarea>
  71.                                 </div>

  73.                             </div>

  75.                         </TD>
  76.                     </TR>
  77.                 </table>
  78.     </FORM>
  79. </body>

  81. </html>