Чтобы не перезагружать страницу по ссылке нажмите

Question

У меня есть дизайн, который состоит из изображений для ссылок.Они должны работать как выбранный компонент, например, когда я нажимаю одну ссылку, на обратной стороне я контролирую, какая из них выбрана.После того, как пользователь хочет зафиксировать свои изменения, он / она нажимает кнопку «Отправить» и сохраняет выбор.

Поэтому мне нужен компонент h:blahblah для выбора, который не перезагружает страницу, когда пользователь щелкает по ней, и, возможно,нажмите еще раз, чтобы отменить выбор, возможно, нажмите еще раз, чтобы выбрать снова.

Мне нужен h: компонент, потому что я могу легко изменить только их CSS.

Я также буду рад, если вы поделитесь своими советами о том, какмогу ли я выполнить эту работу тоже.

Спасибо

---

РЕШЕНО моим коллегой

<h:outputLink value="javascript:void(0);"><p:ajax event="click"  
                    listener="#{beanView.method()}"/>My Link</h:outputLink>

Answer 1

Для этого вы можете использовать <f:ajax> в сочетании с управляемым компонентом @ViewScoped.Позвольте listener из <f:ajax> установить выбранное значение изображения.Вы можете просто вложить <f:ajax> внутри <h:graphicImage>.

<h:form>
    <h:graphicImage name="image1.png">
        <f:ajax event="click" listener="#{bean.setSelectedImage('image1')}" />
    </h:graphicImage>
    <h:graphicImage name="image2.png">
        <f:ajax event="click" listener="#{bean.setSelectedImage('image2')}" />
    </h:graphicImage>
    <h:graphicImage name="image3.png">
        <f:ajax event="click" listener="#{bean.setSelectedImage('image3')}" />
    </h:graphicImage>
    <h:commandButton value="Submit" action="#{bean.submit}" />
</h:form>

с

@ManagedBean
@ViewScoped
public class Bean {

    private String selectedImage;

    public void submit() {
        System.out.println(selectedImage);
    }

    // ...
}