Changing p:graphicImage border colour on selection

Question

I have the following code to display the images

<ui:repeat id="repeat5" value="#{getData.imageThumbnail1}" var="imagesLst2" varStatus="loop">
    <h:panelGroup>
        <p:commandLink id="cl3" action="#{getData.imageID(imagesLst2.imageID)}" styleClass="ovr" update=":mainForm:tabView:example">
            <p:graphicImage id="gi3" value="#{imagesStreamer.image}" styleClass="bord" alt="image not available3"  width="60" height="60" >
                <f:param name="id5" value="#{imagesLst2.imageID}" />
            </p:graphicImage>
        </p:commandLink>
    </h:panelGroup>
</ui:repeat>

I have a css file to display border for the p:graphicImage .bord { border-style:solid; border-width:2px; border-color:#00FFFF; }

I can view multiple images, when i select a image it needs to change the border-color for that graphicImage (at any point of time there will be only one selected image), how do i do it in PrimeFaces I tried using a javascript but could not figure out how to change the border for an existing component.

UPDATE:1

I did the above task with the following code

 <p:graphicImage id="gi3" value="#{imagesStreamer.image}" onmousedown="mouseDown(this)" styleClass="bord" alt="image not available3"  width="60" height="60" >

and the javascript

function mouseDown(element) {
    var element1 = (element);
    element1.style.borderColor="#ff0000";
}

Now my problem is how do i change the previously selected border colour on a new selection.

score 0 · Answer 1 · edited May 23 '17 at 10:09

This is how i did the above things

jsf code

<p:graphicImage id="gi3" value="#{imagesStreamer.image}" onmousedown="mouseDown(this)" styleClass="bord" alt="image not available3"  width="60" height="60" >

javascript

var elementOld;

function mouseDown(element) {
    var element1 = (element);
    element1.style.borderColor="#ff0000";

    if(elementOld != null){
        elementOld.style.borderColor="#739E39"
    }
    elementOld = element1;
}

Thanks to BalusC reply How to refer to a JSF component Id in jquery?

score 0 · Answer 2 · answered Jun 25 '12 at 11:00

I think this is a cleaner solution, and you won't have to use global variables.

Add a that surrounds the ui:repeat. Then simply solved with jquery.

markup:

<p:graphicImage id="gi3" value="#{imagesStreamer.image}" alt="image not available3"  width="60" height="60" onclick="setBorder(this)">

javascript:

function setBorder(element) {
    $('#imageContainer .bord').removeClass('bord'); // Removes the border from all images that has it.
    $(element).addClass('bord'); // Adds the border class to the clicked image.
}

Changing p:graphicImage border colour on selection

2 Answers2