jQuery - want to hide row from rich:dataTable

Question

Hi Guys, I have a rich:dataTable. I want to hide a row with this code:

<c:if test="#{not empty documents &amp;&amp; documents.size!=0}">
    <rich:jQuery selector="#_inboxTable_ tr"
        query="ready(function() {
            jQuery.noConflict();
            if ( jQuery(this).find('checkboxStatus').attr('checked', true)) {
                new Effect.Fade(jQuery(this));
            }
        })"
    />
</c:if>

The problem is that i receive: element.getInlineOpacity is not a function error....

I was initially supposing that I cannot hide a row with this Fade effect but I have made a simple other table and all was working ok...

Can you give me a clue on this issue?

Answer 1

element.getInlineOpacity is not a function

I've never seen this before, so I Googled a bit. And what turns out? It look like that you're (at least, under the hood) mixing jQuery with Prototype or Scriptaculous and that the whole thing is colliding with each other.

Cleanup it and retry.

Edit as others already pointed out, you need to replace the non-jQuery thing new Effect.Fade() by the jQuery fadeOut() function.

Answer 2

Effect.fade isn't jquery code which is probably causing you problems. Especially since you are passing it a jquery object. You could try passing it the raw DOM element instead e.g.

if ( jQuery(this).find('checkboxStatus').attr('checked', true)) {
    new Effect.Fade(this);
}

Then again, I'm not sure exactly what this whole rich table thing is... Or exactly what you are trying to do... Do you want to fade out any table row with a checked checkbox in it? What is checkboxStatus? Is it a class (in which case there should be a . in the above code)?

Depending what you are trying to do, something like this might be a more jQuery approach:

jQuery(this).find('.checkboxStatus:checked').parent('tr').fadeOut();