CODEWITHSUNDEEP
javascriptjqueryjsfprimefaces
Kush Sahu
Kush Sahu

Reputation: 399

How to get the value of selectOneMenu by using clientId in Javascript Method?

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

Upvotes: 0

Views: 8760

Answers (3)

Tapas Bose
Tapas Bose

Reputation: 29806

Here you go:

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/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)); // uncoment 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:composition>

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

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.component.UIComponent has if (!(binding.isLiteralText())).

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

Upvotes: 3

Kush Sahu
Kush Sahu

Reputation: 399

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

Upvotes: 0

Dakait
Dakait

Reputation: 2620

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

Upvotes: 1

Related Questions