Meaningless Drivel is fun!*
The moose likes JSF and the fly likes Swap Images on a rich datatable using javascript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "Swap Images on a rich datatable using javascript" Watch "Swap Images on a rich datatable using javascript" New topic
Author

Swap Images on a rich datatable using javascript

Nelisa Kiboti
Greenhorn

Joined: May 21, 2012
Posts: 3
I have a rich column which has this tag <img src="#{PageUtil.baseUri()}#{item.imageLocation}" height="100"/>. This source takes you to an external folder which contains my images. on the same jsf page i have a drop down list of colors which when i select a color i should be able to swap my images on my datatable. my problem is am only able to swap only one image on the first row.
The below tag contains a drop down list of colors
<h:selectOneMenu id="selectDropDown" value="#{group.contractItemSelected}" onchange="document.getElementByTagName('img').src= colorUrlMap[this.value];" style="margin-left: 1.8em;">
<f:selectItems value="#{group.contractItemsSelect}"/>
</h:selectOneMenu>


Someone please help me out on the code to swap all images when i select a color from the drop down list. if you need more information, please let me know.

Thanks in advance!!!
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15952
    
  19

Welcome to the JavaRanch, Nelissa!

You can avoid the clumsy image source EL if you use the JSF graphicImage tag instead of the brute-force HTML IMG tag. The JSF graphicImage tag already knows what your baseURI is.

The JavaScript document.getElementByTagName only gives you the first tag with that name, so it's no surprise that only the first img tag can be changed.


Customer surveys are for companies who didn't pay proper attention to begin with.
Nelisa Kiboti
Greenhorn

Joined: May 21, 2012
Posts: 3
Thanks so much Tim, i really appreciate you responding very fast. Well am new in this project and right now am trying to fix bugs and add new feature. i will try what you have suggested.
Nelisa Kiboti
Greenhorn

Joined: May 21, 2012
Posts: 3
Tim Holloway wrote:Welcome to the JavaRanch, Nelissa!

You can avoid the clumsy image source EL if you use the JSF graphicImage tag instead of the brute-force HTML IMG tag. The JSF graphicImage tag already knows what your baseURI is.

The JavaScript document.getElementByTagName only gives you the first tag with that name, so it's no surprise that only the first img tag can be changed.



I changed the images to JSF graphicImage tag, which other way can i swap the images when i select something from the drop down list?

Thanks again!!!
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Swap Images on a rich datatable using javascript
 
Similar Threads
DataTable with DataScroller issue
Drop down value not passed properly on the action
Setting the default drop-down list value
Drop down list value
t:selectBooleancheckbox data from datatable