Custom Template - Text Area Element

[felixkat]

I was having a little fun trying to get some JS actions to work on a text area element with a Custom Template.

Most things appear to be okay but a Yes\No element with a JS Action to show\hide a text area element failed to work.

After a bit of firebugging I kept finding 'C is Null'.

To cut a long story short it seems to work if I wrap the text element in <li> tags, namely doing something like,

<li class="fabrikElementContainer ">
     <div class="f_health_chronical_expl">
          <?php
            $this->element = $this->elements['f_health_chronical_expl'];
            echo $this->loadTemplate('element');
          ?>
     </div>
</li>

This doesn't appear to happen with field elements though, i.e I don't need the tags.

Around line 203 in \media\com_fabrik\js\form.js says amusingly

// c will be the <li> element - you can't apply fx's to this as it makes the
// DOM squiffy with
// multi column rows, so get the li's content and put it inside a div which
// is injected into c
// apply fx to div rather than li - damn im good


I need to look through this more but I'm curious as to why it works with a field element and not a text area element, the latter having to have the <li> tags.

 

[cheesegrits]

Not being able to see your custom template, it's hard to debug.

But, in general, you always need to retain out basic structure for elements. Especially the main container. If you don't have something (I don't think it has to be an LI, can be a DIV) wrapping the element, with class 'fabrikElementContainer', then all sorts of JS problems will crop up, as we rely on that wrapper being there for lots of things.

For instance, if you look at form.js, a couple of lines above the lines you quoted, you'll see where we do:

c = document.id(id).getParent('.fabrikElementContainer');

... which locates the container for the element, by looking for a parent element wirth that class. Note that there's no requirement for it to be an LI, just a container with that class. So div, span, li, etc. should all work.

-- hugh

 

[felixkat]

Ahh, I'll go for the DIV route then, really thought I had tried that though, I'll post back the results.

 

[felixkat]

Cheers Hugh, my bad for not working that one out, works perfect.



Well incase any other people arrive at this thread.


The following works fine in a custom template.

<div class="fabrikElementContainer foobar">
            <?php
            $this->element = $this->elements['foobar'];
            echo $this->loadTemplate('element');
            ?>
</div>

 

[cheesegrits]

Just FYI, the textarea element is a little funky, and gets some special treatment if it's in WYSIWYG mode, when we have to take in to account the DOM manipulation things like MCE / JCE do.

But as far as I know, we should shield you from that, as long as you wrap that fabrikElementContainer around it.

-- hugh