jQuery .each css not working IE10?

[1DMF]

Hi,

I have a simple function that is meant to clear the row highlighting in a table.

function clearRow(){
    $('tr.searchrow').each(function(){$(this).css('background-color','#ffffff');});  
}

This works fine in FF & IE when ran from a mouseover event, so as you hover over a table row, the previous row is set back to white (well all of them , then the desired one is highlighted).

However, I have a few buttons, which when I click also run the clearRow() function, but the current highlighted row is not cleared in IE. It works fine in FF

The only thing the highlighting does different is to select the desired row by ID

$('#myID').css('background-color','#cccccc');

but use a generic grab all rows by class name and clear them, to remove highlighting.

Why does the hover event call work, but the click event call doesn't?

Thanks,
1DMF

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

 

[jpadie]

couple of maybes.

1. why are you using each? to set all matching nodes just use the selector.

$('tr .searchrow').css('background-color', '#fffff');

2. i have had hair-tearing issues in the past with the differences between having a space and not having a space between classes and node types. technically of course there's nothing wrong with tr.xxxx but i wonder whether trying it with a space might unlock the issue?

you also might want to make sure that the nested table cells don't have their own background colour set. or expressly set them to transparent

$('tr .searchrow td').css('background-color','transparent');

 

[1DMF]

using a space doesn't work in FF or IE.

also to include child selector shouldn't it have a chevron?

http://api.jquery.com/child-selector/

$('tr.searchrow > td').css('background-color','transparent');

Though it seems I don't need to select the child td tags, simply changing the colour to 'transparent' fixed it?

Why would that be the case? very odd!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

 

[1DMF]

looking at it, regarding the space, I think it only works with a space if it is a child element eg.

<div id="mydiv">
 <input type="text" class="myclass" />
 <input type="text" class="myclass" />
</div>

So you can use...

$("#mydiv .myclass")....

but as my table row had the class applied to it, it needs to be connected like a CSS rule would be (tag.class).

I guess space works like the child selector chevron?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

 

[jpadie]

using a space doesn't work in FF or IE.

i don't doubt it. as said, i've torn my hair out over getting space/non-space to work in selectors. i don't code for IE any more so have forgotten the right way. sorry to waste your time on that.

also to include child selector shouldn't it have a chevron?

sure. if you were wanting child selectors. But child selectors only select direct children whereas ancestor descendant selectors (i.e. tr td) are not so picky. The result would have been net the same unless you were nesting tables. In that case using a child selector would have been much better.
think of ancestor descendant as shorthand for $(ancestor).find(descendant)

Though it seems I don't need to select the child td tags, simply changing the colour to 'transparent' fixed it?

ah. annoying. i cannot see why that would be the case either (although my first code would not have worked for want of a sixth 'f').

 

[1DMF]

i don't doubt it. as said, i've torn my hair out over getting space/non-space to work in selectors. i don't code for IE any more so have forgotten the right way. sorry to waste your time on that.

Don't be silly, it's cool, you didn't waste my time, I always appreciate your input and the ability to have an open discussion about something.

sure. if you were wanting child selectors. But child selectors only select direct children whereas ancestor descendant selectors (i.e. tr td) are not so picky

Ah I see, so 'chevron' direct children , 'space' all descendants, thanks for the jQuery selector 101 lesson ;-)

ah. annoying. i cannot see why that would be the case either (although my first code would not have worked for want of a sixth 'f').

Well an odd one for sure, I changed the colour to red just to test, and the problem came back, so I added the following...

    $('tr.searchrow').css('background-color','#ff0000');  
    $('tr.searchrow > td').css('background-color','transparent');

And it still didn't work? this is very odd, I'm not sure what...

$('#row'+id).css('background-color','#cccccc');

is doing in IE, but the code to 'transparent' the td and 'red' the tr does not remove the 'grey'?

OK transparent is a fix for my purpose, but it should work applying any colour? so all rows should turn red , but they don't?

Is this a bug in IE or jQuery?

I'm using 1.7.1 , I did upgrade to 1.9 but that throws a lot of errors in FF error console so went back to 1.7.1?



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

 

[jpadie]

can you post the rendered html and I'll do some testing later. if it's a bug I'm sufficiently keen on jquery to go to the trouble of reporting it. if it's an IE thing then it can just get added to the long list of IE weirdies that unfortunate souls have to deal with.

 

[1DMF]

No probs, here you go..

http://www.homeloanpartnership.com/jQuery_test/

I knocked up a test page for you to play with (which has been validated!).

Basically, if you hover over a row in the results window, it is highlighted and the flyout box appears correctly.

However, if you click the [x] to close the flyout window (either one), the flyout box slides in but the row is not changed back to white, it stays grey.

Run it in firefox it works fine, change the colour to transparent it works fine in IE & FF

Note: hideTip is the JS function, which runs clearRow to change the row colour

So unless you can spot some error I have made , I guess this is a bug?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

 

[jpadie]

thanks. I will take a look this evening and setup up a windows pc to test with.

 

[1DMF]

Did you find the culprit?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

 

[jpadie]

sorry. not yet.
i rewrote part of the script to be more jQuery friendly before seeing what was awry with IE. then realised the error of my ways. then ran out of time.

I will have another bash.

 

[1DMF]

i rewrote part of the script to be more jQuery friendly

How was it un-jQuery friendly?

Any help you can give to improve my jQuery techniques are always appreciated.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

 

[jpadie]

forgive me, i was not being perjorative.

i don't have the code I rewrote as I realised that it was not the object! but there were little enhancements such as using more anonymous functions, not using inline events, iterators rather than multiple lines, dynamic filling of the pop-up fields (rather than rebuilding the html each time) etc.

I should have some time later this evening, so will try to do both tasks and post back.

 

[1DMF]

forgive me, i was not being perjorative.

I didn't think for a minute you were, no forgiveness required.

I should have some time later this evening, so will try to do both tasks and post back.

Cool, looking forward to it.

Note: the actual showTip function is generic, and each different page in the application has its own setTip to build the relevant HTML to 'slideout' from the JSON; the data to 'slideout' changes dependent on the context of the appication function (page) you are using.

I compiled the example purely as a demo to the issue, but if you come up with a better way of doing it , i'll be sure to rip it and use it

Obviously the JSON data structure is different depending on the page you are on, which is dynamically created, I just hard coded some for the demo.

It's also worth noting, that this only seems to be an issue with IE10 as I have tested on IE 8/9 and it works fine!

You may also be wondering why I'm passing the event, but that's because the showTip as mentioned is a genric slider routine (which I removed some functions from), if (tt) is true, it instead works out the click position from the event and shows the info as a mouse pointer tooltip instead, so please forgive the laziness of the demo code, as some arguments look superflous, but in the full production version are used for other functionality.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads