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

Question

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>
</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

If you are using PrimeFaces look at the `p:remoteCommand` component, it generates a Javascript function to invoke backing-bean method. — Bhesh Gurung, Aug 27 '11 at 15:58
@BheshG: Thanks! Yes, I'm using primefaces & I also tried using remotecommand but I couldn't figure out how to pass value from `h:outputLink` to `f:setPropertyActionListener` inside of `p:remoteCommand`. If you could assist me with a sample code that would be great! — Rajat Gupta, Aug 27 '11 at 19:29
Consider that I have the value in `h:outputLink` in a JSF backing bean. — Rajat Gupta, Aug 27 '11 at 19:33
Looks like you can't use EL Expression for the id attribute. Like ` — Bhesh Gurung, Aug 28 '11 at 21:25

Bhesh Gurung · Accepted Answer · 2011-08-28T20:46:53.217

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>

Infact I was using p:commandLink earlier but I am now wanting to use outputLink inorder to create bookmarkable urls besides allowing the inverse click options like 'open in new tab' — Rajat Gupta, Aug 28 '11 at 19:04
I have got some hint for my case.. I can also use remoteCommand to pass value to backing bean from js. Rightnow, I cannot figure out how to supply/receive parameters to remoteCommand — Rajat Gupta, Aug 28 '11 at 19:06
@Marcos: I have updated the answer. I am not sure about whether it's the right way to do that but it seems to work. Basically, have a hidden-input (bound to the backing bean item prop using el) inside the form with the p:remoteCommand and use jQuery to update the value attribute of hidden input before invoking the remoteCommand. Also don't forget to process hidden input on remoteCommand invocation. — Bhesh Gurung, Aug 28 '11 at 20:49

score 0 · Answer 2 · edited May 23 '17 at 11:55

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.

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

2 Answers2

Linked