jQuery jWYSIWYG inside jquery.ui.tab

Question

So I managed to get a page with Ajax ui.tab and in one of the tab I put jWYSIWYG textarea plugin. Unfortunately, I can only see normal textarea.

However, accessing the page directly (ie. not using the ajax tab) works.

What happened?

p/s: I'm new to jQuery / JavaScript / AJAX / CSS (if that even matter)

Answer 1

Your answer would be best served by posting a link to the HTML file (and any custom JavaScript files of your own) in question. If the file isn't hosted, you can paste the source code at http://pastebin.com/, and post the link here.

Answer 2

I expect the problem is that the new html is being inserted into the DOM when the ajax call completes, but isn't being hooked up to anything with jQuery.

Normally you attach all your jquery goodness in a document ready or onload event, when the page initially loads. However, your textarea is not on the page when the page first loads.

When your ajax call returns, the textarea is added to the page. At this point you need to call whatever javascript is needed to hook it up to a jWYSIWTG control.

There is a new(ish) feature in jquery that means you can still set everything up in document ready (called live), but you may find it simpler just to call the hookup code in your ajax success handler.

Answer 3

My solution is fix dialog width and height blind with event open dialog. Blind event close dialog by remove div.wysiwyg which auto-create by plugin.

$('#dialogContent').bind('dialogopen', function(event, ui) {
 $('textarea').wysiwyg( {
  css :burl + 'public/css/text.css',
  controls : {
   separator00 : { visible : false },
   separator01 : { visible : false },
   separator02 : { visible : false },
   separator03 : { visible : false },
   separator04 : { visible : false },
   separator05 : { visible : false },
   separator06 : { visible : false },
   separator07 : { visible : false },
   separator08 : { visible : false },
   separator09 : { separator : false},
   insertOrderedList : { visible : true },
   insertUnorderedList : { visible : true },
   undo: { visible : true },
   redo: { visible : true },
   justifyLeft: { visible : true },
   justifyCenter: { visible : true },
   justifyFull: { visible : true },
   subscript: { visible : false },
   superscript: { visible : false },
   underline: { visible : true },
   increaseFontSize : { visible : false },
   decreaseFontSize : { visible : false },
   removeFormat : { visible : false },
   h1mozilla : { visible : false },
   h2mozilla : { visible : false },
   h3mozilla : { visible : false },
   h1 : { visible : false },
   h2 : { visible : false },
   h3 : { visible : false }
  }
 });
 $('.wysiwyg').css( {
  'width' :'350px'
  ,'height' :'180px'
 });
 $('.wysiwyg iframe').css( {
  'width' :'350px'
  ,'height' :'150px'
 });
}).bind('dialogbeforeclose', function(event, ui) {
 $('.wysiwyg').remove();
});

Answer 4

My problem was that the formatting for the jWYSIWYG box would show up, but I couldn't get a cursor in it to edit/add text.

What worked for me was to load up the jWSIWYG textbox after the ajax loading on the original page where the tab is defined using a tab event.

$("#example").tabs();
$('#example').bind('tabsshow', function(event, ui) {
 if (ui.tab.id == "alinkid") {
  $('#textfield').wysiwyg();
 }
});

Then, in the HTML, for the tabs:

<div id="example">
    <ul>
        <li><a href="target" id="alinkid">Target</a></li>
    </ul>
</div>

on the target page, you'd have a normal textarea with id 'textfield'