Control.TextArea inside Control.Modal

I am having problems loading in a modal window. Here's the code:

HTML:

<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'control.modal.js' %>
<%= javascript_include_tag 'control.textarea.js' %>
<%= javascript_include_tag 'control.textarea.textile.js' %>
...
<div id="editor_overlay" class="" style="position: absolute; top: 0pt; left: 0pt; z-index: 9998; opacity: 0.8;"/>
<div id="editor_container" class="" style="display: none; z-index: 9999;"/>
<textarea id="editor_textarea"></textarea>

JS:

Event.observe(window, 'load', function() {
    textile_toolbar = new Control.TextArea.ToolBar.Textile('editor_textarea');
    textile_toolbar.toolbar.toolbar.id = 'editor_textarea_toolbar';
    edit_overlay = new Control.Modal('editor_overlay',{
        contents: textile_toolbar.textarea
    });
    delete_overlay = new Control.Modal('editor_overlay',{
        contents: "Are you sure?"
    });
    $$('.edit_bar a#edit').each(function( link ){
        Event.observe( link, 'click', function(){
            edit_overlay.open();
        })
    });
    $$('.edit_bar a#delete').each(function( link ){
        Event.observe( link, 'click', function(){
            delete_overlay.open();
        })
    });
    $$('.edit_bar').each( function( edit_bar ){
        new Insertion.Top( edit_bar, html_top);
        new Insertion.Bottom( edit_bar, html_bottom);
    });
});

This is a Rails project and I am using Event.observe (above) to apply all of this functionality unobtrusively. The modal overlay pops up when the respective links are clicked. What doesn't load is the TextArea instance within it.

Can anyone shed some light or code? :)

Thanks!

Luis

Posted June 16th, 2007 at 12:27pm by lgomez

Because of the way modal windows work, the modal container needs to be a direct child of the body element, and not deep in the page. So the contents of any content for modal windows on the page get's copied into the modal container, thus destroying the reference between the toolbar and the element. Workaround? Use the afterOpen callback to attach the functionality instead.

new Control.Modal('my_div',{
    afterOpen: function(){
        new Control.TextArea('same_textarea_id_as_before');
    }
});

Hope this helps!

Posted June 16th, 2007 at 1:02pm by ryan

Hi...

Sorry to bother you again but this is very frustrating... I've tried several variations and none work... this is the one I find logical:

  $$('.edit_bar a#edit').each(function( link ){
        Event.observe( link, 'click', function(){
            new Control.Modal('editor_overlay',{
                afterOpen: function(){
                    new Control.TextArea('editor_textarea');
                }
            })
        })
    });

Do you see anything obvious there that could prevent this from working? The HTML is the same as before.

Thanks,

Luis

Posted June 18th, 2007 at 5:48pm by lgomez