Pass a value from h:outputLink to JSF after onclick event

I need to pass an integer to a JSF backing bean after onclick event on h:outputLink.

Important : I cannot use f:param to pass value as request parameters to the naviagating page as I am preventing default onclick behaviour of h:outputlink. The control instead of navigating to page defined by href attribute, goes to a javascript function.

Using Primefaces 3.0M3 snapshot with JSF 2.0

My code follows:

<h:outputLink id="#{item.id}" value="/itemDetails.xhtml" class="itemLink" >
      #{item.name}
</h:outputLink>


<script>
$(".itemLink").click(function(event) {
  showDetailsInDialog();// show the item details in dialog 
  event.preventDefault();// prevent the behaviour provided by href
});
</script>


<h:form>
    <p:remoteCommand name="showDetailsInDialog" update="itemDetailsPanel" oncomplete="itemDetailsDialog.show()">
        <f:setPropertyActionListener value="....id of the item...." target="#{itemsList.selectedItem}"/>
    </p:remoteCommand>
开发者_如何学JAVA</h:form>

I have a reusable dialog that displays the details of item selected from a itemslist. For this when the h:outputLink for an element is clicked the id of that item needs to be passed to JSF to render appropriate content in dialog.

As shown above If I can get the id of item in remotecommand, I can pass it to appropriate backing bean through setPropertyActionListener

I think you should use p:commandLink instead of h:outputLink as follows -

View -

<h:form>
    <p:commandLink value="#{item.name}" action="#{myBean.fetchItem()}" update="detailPanel" oncomplete="detailDlg.show();">
        <f:setPropertyActionListener target="#{myBean.itemId}" value="#{item.id}"/>
    </p:commandLink>
</h:form>

Bean -

@ManagedBean
@ViewScoped
public class MyBean {

    @ManagedProperty(value="#{itemStore}")
    private ItemStore itemStore;

    private int itemId; //getter/setter
    private Item item;  //getter/setter

    public void fetchItem() {
        this.item = this.itemStore.getItemWithId(this.itemId);
    }

Update:

You can do that by using JQuery as follows -

<script>
    jQuery(document).ready(function() {
            jQuery(".itemLink").click(function(event){
                jQuery("#itemIdHI").attr("value", jQuery(this).attr("id"));
                remCom();
                event.preventDefault();
            });
        });
</script>

<h:form prependId="false">
    <h:inputHidden id="itemIdHI" value="#{myBean.itemId}"/>
    <p:remoteCommand name="remCom" action="#{myBean.axnMethod()}" process="itemIdHI" update="detailPanel" oncomplete="detailDlg.show()"/>
</h:form>

Check this out. I have the same problems as you, but i solved it after reading BalusC's link.

For short, there's what u're talking abt:

f:attribute: with the h:commandLink and h:commandButton tags you can also trigger a method of the backing bean using the actionListener attribute. With this you can also use the f:attribute tag to dynamically pass the parameters. Here is an example:

<h:form>
    <h:commandLink value="Click here" actionListener="#{myBean.action}">
        <f:attribute name="attributeName1" value="attributeValue1" />
        <f:attribute name="attributeName2" value="attributeValue2" />
    </h:commandLink>

    <h:commandButton value="Press here" actionListener="#{myBean.action}">
        <f:attribute name="attributeName1" value="attributeValue1" />
        <f:attribute name="attributeName2" value="attributeValue2" />
    </h:commandButton>
</h:form>

Those attributes can be retrieved using getAttributes() of the parent UI component, which on its turn can be retrieved by the ActionEvent passed by the actionListener.

package mypackage;

import javax.faces.event.ActionEvent;

import net.balusc.util.FacesUtil;

public class MyBean {

    // Actions -----------------------------------------------------------------------------------

    public void action(ActionEvent event) {
        String attributeName1 = FacesUtil.getActionAttribute(event, "attributeName1");
        String attributeName2 = FacesUtil.getActionAttribute(event, "attributeName2");

        System.out.println("attributeName1: " + attributeName1);
        System.out.println("attributeName1: " + attributeName1);
    }

}

package net.balusc.util;

import javax.faces.event.ActionEvent;

public class FacesUtil {

    // Getters -----------------------------------------------------------------------------------

    public static String getActionAttribute(ActionEvent event, String name) {
        return (String) event.getComponent().getAttributes().get(name);
    }

}

The variables attributeName1 and attributeName2 now should contain the values attributeValue1 and attributeValue2 respectively.

Take care that each attribute name should be unique and should not overwrite any default component attributes, like "id", "name", "value", "binding", "rendered", etc.