I have a datatable which contains selectOneMenu. I want to get selected value of selectOneMenu in my Javascript method by using clientId. I have tried with this following code..

 <p:dataTable var="name" value="#{model.nameList}" rowIndexVar="rowIndex">
<p:selectOneMenu id="selector_#{rowIndex}" onchange="select(#{rowIndex});">
            <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
            <f:selectItem itemLabel="Month" itemValue="Month"></f:selectItem>
            <f:selectItem itemLabel="Week" itemValue="Week"></f:selectItem>
        </p:selectOneMenu>
</p:dataTable>

<script type="text/javascript">
    function select(rowIndex){
        selector = "selector_" + rowIndex;
        var element = $("select[name$=" + selector +" option:selected").val();

        alert(element);
    }
</script>

---

I need two values in javascript method, rowIndex and the selected value of selectOneMenu

I have a datatable which contains selectOneMenu. I want to get selected value of selectOneMenu in my Javascript method by using clientId. I have tried with this following code..

 <p:dataTable var="name" value="#{model.nameList}" rowIndexVar="rowIndex">
<p:selectOneMenu id="selector_#{rowIndex}" onchange="select(#{rowIndex});">
            <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
            <f:selectItem itemLabel="Month" itemValue="Month"></f:selectItem>
            <f:selectItem itemLabel="Week" itemValue="Week"></f:selectItem>
        </p:selectOneMenu>
</p:dataTable>

<script type="text/javascript">
    function select(rowIndex){
        selector = "selector_" + rowIndex;
        var element = $("select[name$=" + selector +" option:selected").val();

        alert(element);
    }
</script>

---

I need two values in javascript method, rowIndex and the selected value of selectOneMenu

• javascript
• jquery
• jsf
• primefaces

Share Improve this question Follow edited Mar 11, 2013 at 10:20 Kush Sahu asked Mar 11, 2013 at 7:11 Kush SahuKush Sahu 39911 gold badge1313 silver badges3333 bronze badges 1

• please show the generated markup of your jsp – Dakait Commented Mar 11, 2013 at 7:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Here you go:

<ui:position xmlns="http://www.w3/1999/xhtml" xmlns:ui="http://java.sun./jsf/facelets" xmlns:h="http://java.sun./jsf/html"
    xmlns:f="http://java.sun./jsf/core" xmlns:p="http://primefaces/ui" template="/WEB-INF/templates/globalTemplate.xhtml">

    <ui:define name="title">15320268</ui:define>
    <ui:define name="content">
        <p:growl id="growl" showDetail="true" />

        <h:form>
            <p:dataTable var="name" value="#{so15320268.nameList}" rowIndexVar="rowIndex" widgetVar="table">                
                <p:column>
                    <p:selectOneMenu widgetVar="menu_#{rowIndex}" onchange="select(menu_#{rowIndex});">
                        <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
                        <f:selectItem itemLabel="Month" itemValue="Month"></f:selectItem>
                        <f:selectItem itemLabel="Week" itemValue="Week"></f:selectItem>
                    </p:selectOneMenu>
                </p:column>
            </p:dataTable>
        </h:form>
        <script type="text/javascript">
            function select(widgetVar){
                var selectMenuDiv = widgetVar.getJQ(); // it will give you the underlying jquery object
                //alert(selectMenuDiv.get(0)); // unent this line it will show: [object HTMLDivElement]; 
                // so it is not select element
                var selectMenu = $(selectMenuDiv).find('select');
                var selectValue = $('> option:selected', selectMenu).val();
                alert(selectValue);             
            }
        </script>
    </ui:define>
</ui:position>

Look into the following image, this is how <p:selectOneMenu/> renders:

Look carefully at the id of highlighted div. It ends with selector_. The xhtml was: <p:selectOneMenu id="selector_#{rowIndex}". You were trying to create id with el and in JSF which is not allowed, that is why the #{rowIndex} didn't rendered for id. The documentation says that id must be evaluated to java.lang.String if it does support el then this would be

javax.el.ValueExpression(must evaluate to java.lang.String)

Probably the the reason is in the method public void setValueExpression(String name, ValueExpression binding) of javax.faces.ponent.UIComponent has if (!(binding.isLiteralText())).

I hope it will help you to understand the el cannot be used in id.

add a class to your select

<p:dataTable var="name" value="#{model.nameList}" rowIndexVar="rowIndex">
<p:selectOneMenu styleClass="myClass" id="selector_#{rowIndex}" data-rowindex="#{rowIndex}">
            <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
            <f:selectItem itemLabel="Month" itemValue="Month"></f:selectItem>
            <f:selectItem itemLabel="Week" itemValue="Week"></f:selectItem>
        </p:selectOneMenu>
</p:dataTable>

and the js part

<script type="text/javascript">

 $(function(){
  $(".myClass").change(function(e){
   console.log($(this).val());
   console.log($(this).attr("data-rowindex"));
   //or
   //console.log($(this).data('rowindex'));
  });
 });

</script>

DEMO

I solved it by using styleClass. Now I am able to get both selected value and the rowIndex inside javascript method.

<p:dataTable var="name" value="#{model.nameList}" rowIndexVar="rowIndex">
<p:column>
<p:selectOneMenu id="selector_#{rowIndex}" styleClass="menu_#{rowIndex}" onchange="select('#{rowIndex}');">
            <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
            <f:selectItem itemLabel="Month" itemValue="Month"></f:selectItem>
            <f:selectItem itemLabel="Week" itemValue="Week"></f:selectItem>
        </p:selectOneMenu>
</p:column>
</p:dataTable>

<script type="text/javascript">
    function select(rowIndex){
        var menuClassName = "menu_" + rowIndex;
        var element = $("select[class$='" + menuClassName + "'] option:selected").val(); 

    }
</script>

But as according to my question I am still not able to get this functioanality using clientId