Selected row highlighted only for split second

Hi, i am using the following javascript to highlight the row i select and to turn the selected rows background to yellow. The background changes to yellow when the row is clicked but only for a split second.

var rindx=null;
var rint=null;

function myhandler() {
rindx = document.forms['resultsForm'].elements['routeDisplayId'].value;
var rint = parseInt(rindx);
trs = document.getElementById('resultsForm:routeList:tbody_element').getElementsByTagName('tr');
trs[rint].bgColor = "#FFFF66";
}

the function i then called in the dataTable.

Are you removing the row color with another function?

Eric

No, i then just call the function in my dataTable:

I'm not sure why it does it. Thanks for your responce.

What are you using to select the row? An example call with the code?

Eric
[ January 07, 2008: Message edited by: Eric Pascarello ]

Hey Eric,

I'm using commandLink to select the row, i'd love to paste you my dataTable but i can't seem to submit it because of the angled brackets, even when i remove them i still can't submit them, is there a way around this?

Thanks

Well your page is posting back so the css is not set anymore. You need to return false after calling the JavaScript function or try to set the css from the server if you need the post back to happen.

Eric

Hi Eric do you think it's because i'm using a command link, does it do some processing which wipes off the colour?

h:commandLink id="editLinkCarrier" action="#{VirginHandler.prepareAddScheduleAction}" h

utputText value="#{rowElement.carrierCode}"
f

aram name="routeDisplayId" value="#{rowElement.routeDisplayId }"

Unless I miss my guess, <h:commandLink> is a JSF tag, no?

In any case, that gets converted to HTML and JavaScript before being sent to the browser. You should be able to see what it's doing with a View Source.

P.S. Clicking 'disable smilies' is a good idea when posting code.
[ January 07, 2008: Message edited by: Bear Bibeault ]

Hi Guys,

I'm trying to get the background of a row in my dataTable to change colour when it is clicked. I've posted a specific problem regarding this above but i'm going to approach this from the start again.

Does anyone have any Javascript that can do this or can direct towards any javascript that can do this.

Thanks in advance.

David

It's fairly straightforward to add an onclick handler to the row, locate the row element, and affect its CSS. Which part is hanging you up? What have you tried?
[ January 14, 2008: Message edited by: Bear Bibeault ]

Hi, i tried the following Javascript which does turn the row yellow but only for a second, i need the row to stay yellow when it is selected:

function myhandler()
rindx = document.forms['resultsForm'].elements['routeDisplayId'].value;
var rint = parseInt(rindx);
trs = document.getElementById('resultsForm:routeList:tbody_element').getElementsByTagName('tr');
trs[rint].bgColor = "#FFFF66";

I call the javascript as follows in the dataTable.

Can you see anything obvious wrong with this which would stop the function from working correctly.

Thanks in advance
David

This would be a great spot for some of that hot new jQuery stuff wouldn't it? Maybe doing something like this...

function myhandler()
rindx = document.forms['resultsForm'].elements['routeDisplayId'].value;
var rint = parseInt(rindx);
trs = document.getElementById('resultsForm:routeList:tbody_element').getElementsByTagName('tr');
trs[rint].bgColor = "#FFFF66";

And then in your css have

Does this help? Don't forget to go get jQuery.js from jquery.org

There are some problems with Bryce's example (wrong class name for example) but yes, jQuery makes this sort of thing much easier.

But looking at your original code, the use of bgcolor is suspect. When manipulating styles its much better to use CSS. You may have a case of the markup competing with the CSS.

P.S. Please be sure to use UBB code tags when posting code to the forums. See read this for more information.

Yeah, I grabbed the ID. I don't see a class listed there. So maybe just an addClass() would do it. Can you point out the correct one Bear? I really want to understand that code. I didn't quite fully get it all. Thanks

Rather than derail David's topic, why not start a new one?

Hi,

Firstly thanks Bryce for your recommendation i am trying to get it working but at the minute without success. I am not sure if i am doing things correctly.

I have placed the jQuery.js file in my webapps folder in Tomcat.
I am not sure if this is the correct path to put in the <script> tag to Jquery -

Bear you mentioned there were some problems with Bryces's example, i am using the following, could point out the problems as i've never even heard of jQuery until now:

Thanks

David

P.S thanks for the UBB tip.

David,
This post is starting to get long (which means a lot of new comers aren't going to read it).

At this point, I think the best way to solve this would be for you to reproduce the problem in a small but complete HTML page that can be posted to this forum. With that, other people can see exactly what's going on and make useful suggestions.

The code snippets you've posted so far, don't tell us enough about any other code that might be interfering with what we do see.

Ben,
As suggested i have attached the sections of code applicable to the problem

My dataTable is as follows:

Thanks

I still see bgcolor in there. You really should not be using deprecated styling tags or attributes.

Also, I noticed you've put jQuery into the mix. I'd not do that at this point since it's not something you're familiar with. Going forward, I heartily recommend it, but I'd suggest adopting it in a more controlled fashion.

Also, as this is JSF source, no one here is liable to know anything about it. So at this point I'm going to send this along to the JSF forum where someone may be able to help you find out where the contention is.