This week's giveaway is in the Spring forum.
We're giving away four copies of Microservices Testing (Live Project) and have Chris Love & Andres Sacco on-line!
See this thread for details.
Win a copy of Microservices Testing (Live Project) this week in the Spring forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Tim Cooke
  • Ron McLeod
  • Jeanne Boyarsky
  • Paul Clapham
Sheriffs:
  • Liutauras Vilda
  • Henry Wong
  • Devaka Cooray
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Al Hobbs
  • Carey Brown
Bartenders:
  • Piet Souris
  • Mikalai Zaikin
  • Himai Minh

change image on click

 
Ranch Hand
Posts: 74
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
how to change image after clicking on it using jsf.

my code:

function changeIt()
{
alert("hi");
var theImg = document.getElementsByTagName('img')[1].src;
alert(theImg);
var x = theImg.split("/");
alert(x);
var t = x.length-1;
alert(t);
var y = x[t];
alert(y);

if(y=='asc.gif')
{
alert("hi");
document.getElementById('example').src='../../../images/desc.gif'
}
if(y=='desc.gif')
{
document.getElementById('example').src='../../../images/asc.gif'
}
}


<h:commandLink actionListener="#{Machine.sortDataList}">
<f:attribute name="sortField" value="getmCode" />
        <h:outputText id="code" value="#{msg.code}" />
<div id="example"><h:graphicImage onclick="changeIt()" url="../../../images/asc.gif"></h:graphicImage></div>
</h:commandLink>
 
Saloon Keeper
Posts: 25794
184
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
That's not really "using JSF". It's using JavaScript on a JSF View.

You should be able to simplify the JavaScript code considerably, however. Just pass "this" as a parameter to the changeIt() function. Like so:


That should pass the generated IMG tag element to changeIt, eliminating the need for all those messy DOM searches. And, as a side benefit, passing the image as a parameter means that the JavaScript is more likely to be reusable if you have multiple clickable images on the page.

Also, when using JavaScript to search the DOM by ID, remember that the generated HTML IDs are not the same values as the "id" attributes on JSF tags.
 
reply
    Bookmark Topic Watch Topic
  • New Topic