jsf - 单击链接时不要重新加载页面

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 结合使用用于此目的的托管 bean。让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);
    }

    // ...
}