Joomla's modal window removing id and class na

Question

I have a form in a module that I want to appear in a modal window. Depending on the id the window may be blank, or if it does show any content all classes and ids are removed, so I can't validate or style the form.

Truncated Code: ...

  <div id="feedback">
    <div class="feedbackinner">
      <!-- form module  -->
        <div id="contact-wrapper">
          <!--form elements with ids and classes-->
        </div>
      <!-- end module -->
    </div><!-- end .feedbackinner -->
  </div><!-- end #feedback -->

This triggers the modal window without any ids or classes (using Firefox Web Developer outline current elements):

<a href="#contact-wrapper" class="modal" rel="{handler: 'clone', clone: 'contact-wrapper'}">Click for ugly unstyled form that won't validate</a>

This triggers a blank modal window:

<a href="#feedback" class="modal" rel="{handler: 'clone', clone: 'feedback'}">Click if you like staring at a blank white box</a>

So most importantly how do I keep all the ids and classes inside the modal window, and why won't calling the parent div work?

( As a work around I moved the form to a component view then called it using handler: 'iframe' instead of clone. I still want to know what's going on with the modal window. )

Thanks!

Answer 1

not seen the code but implications of using Element.clone on an element are apparent. By nature of HTML, id is meant to be unique. This means you are not really supposed to have more than one element with the same id injected into the DOM at the same time.

MooTools mirrors the sentiment correctly by implicitly removing the id from any element it creates a clone of:

https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.js#L860

the .clone method accepts optional arguments which allow you to override stuff:

clone: function(contents, keepid){ - see http://mootools.net/docs/core/Element/Element#Element:clone as well.

cloned elements also lose all the events you may have assigned to them (but cloneEvents can help with that).

I would recommend looking at the squeezebox implementation and double check that the clone is implemented in the intended way. A better practice may be to adopt and re-attach the elements instead - or to copy the whole innerHTML (though this will once again cause non-delegated events to fail).