点击链接时不重新加载页面

Question

我有一个由图像链接组成的设计。它们必须像选择组件一样工作，例如当我点击一个链接时，在背后我控制哪个被选中。用户想提交更改时，他/她点击提交按钮并保存选择。

因此，我需要一个h:blahblah组件来获取选择，当用户点击它时不重新加载页面，并且可能再次点击以取消选择或重新选择。

我需要h:组件，因为我只能轻松地更改它们的css。

如果您能分享如何完成这项工作的建议，我也会很高兴。

谢谢

---

由我的同事解决

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

- merveotesi

---

这里是JSF选择标签的链接，你可以像这样处理值的更改：'value={#myBean.selectedItemString}'，并且你可以将selectedItemString作为私有字符串添加到你的bean类中，然后通过getter和setter访问它。同时也可以查看PrimeFaces: http://www.primefaces.org/showcase-labs/ui/selectOneMenu.jsf - HRgiger

Answer 1

你可以使用<f:ajax>与@ViewScoped管理的bean结合使用。让<f:ajax>的listener设置所选图像的值。你只需要将<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);
    }

    // ...
}

- BalusC