Win a copy of Functional Reactive Programming this week in the Other Languages forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

change image on click

 
Mohan Mehra
Ranch Hand
Posts: 74
  • Mark post as helpful
  • send pies
  • 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" />
        <hutputText id="code" value="#{msg.code}" />
<div id="example"><h:graphicImage onclick="changeIt()" url="../../../images/asc.gif"></h:graphicImage></div>
</h:commandLink>
 
Tim Holloway
Saloon Keeper
Posts: 18303
56
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • 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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic