Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Swap Images on a rich datatable using javascript

 
Nelisa Kiboti
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 18094
48
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

 
Nelisa Kiboti
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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!!!
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic