jQuery strange behaviour

Question

Hi guys, I have a rich:dataTable and there i have a rich column with a span. When the page is loading this span takes some values like: true+false or true+true etc.

Depending on this value, i hide the tr containing this span with jQuery like:

<rich:jQuery query="ready(function() {
jQuery('#inbox:_inboxTable_').find('span[title=test]').each(function(i, o){
  if (jQuery(this).text() == 'true+false' ){
         jQuery(this).closest('tr').fadeOut();
     }
});
})"/>

All it's working OK on Internet Explorer and Chrome but on Firefox is something strange: - when the page is loading normally, the tr are hidden OK but when i do an ajax request (change the page number or size) ALL THE COMPONENTS from the page are faded out...

can u give me a clue?

Answer 1

It sounds like as if the webpage layout is table based and the closest('tr') somehow returned the body's first table row wherein the entire content is placed.

Besides, it wonders me that you seem to think that the very same rich:jQuery query is been executed after every ajax request, because the ready() is in fact only executed during page load. Don't you have another jQuery/JS pieces somewhere else in your page? Or are your ajax requests maybe not as asynchronous as they ought to be?

The information you provided as far is by the way very brief. Please try to elaborate the problem at code level, not from higher levels. Do not only tell in enduser's perspective what happened, but also tell in developer perspective what happened at code level. What lines get executed and what not. What were the values of the variables which goes around. That kind of things a developer ought to know.

If not done yet, install Firebug and use its great Javascript debugger.

Answer 2

Found the problem!!! - closest('tr') has harmfull behaviour in Firefox. So, instead of using:

jQuery(this).closest('tr').fadeOut();

the solution is to use parent by parent until you find the 'tr' of the span:

jQuery(this).parent().parent().parent().fadeOut();