Win a copy of Murach's Python Programming this week in the Jython/Python forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Selected row highlighted only for split second  RSS feed

 
David Mc Dyre
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Are you removing the row color with another function?

Eric
 
David Mc Dyre
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
No, i then just call the function in my dataTable:

I'm not sure why it does it. Thanks for your responce.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What are you using to select the row? An example call with the code?

Eric
[ January 07, 2008: Message edited by: Eric Pascarello ]
 
David Mc Dyre
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
David Mc Dyre
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 }"
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65826
134
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 ]
 
David Mc Dyre
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65826
134
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 ]
 
David Mc Dyre
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Bryce Martin
Ranch Hand
Posts: 269
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65826
134
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65826
134
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
P.S. Please be sure to use UBB code tags when posting code to the forums. See read this for more information.
 
Bryce Martin
Ranch Hand
Posts: 269
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65826
134
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Rather than derail David's topic, why not start a new one?
 
David Mc Dyre
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Ben Souther
Sheriff
Posts: 13411
Firefox Browser Redhat VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
David Mc Dyre
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ben,
As suggested i have attached the sections of code applicable to the problem


My dataTable is as follows:


Thanks
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65826
134
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!