How can I use rowIndex of p:dataTable to hide/show another component?

Question

I am trying out with p:dataTable. There I have three column. In second column I have commandbutton which when clicked, it should show inputbox on respective row in 3rd column. Inputbox on 3rd column has been set style="display:none"

MY xhtml

<h:form>
    <p:dataTable var="name" value="#{model.namelist}" rowIndexVar="rowIndex">
        <p:column>
                <h:outputText value="#{name} -----"></h:outputText>
        </p:column>
        <p:column>
                <p:commandButton value="click" onclick="som_#{rowIndex}.show();"></p:commandButton>
        </p:column>
        <p:column>
        <p:inputText widgetVar="som_#{rowIndex}" style="display:none">
                </p:inputText>                  
        </p:column>

    </p:dataTable>
    </h:form>

I think it should work, but I dont know where I am doing mistake.

Answer 1

When I run your code I got error in js like som_0.show is not a function. I guess widgetVar doesn't support el. That's why your code doesn't work. But this should solve your issue:

<h:form>
    <p:dataTable var="name" value="#{model.nameList}" rowIndexVar="rowIndex">
        <p:column>
            <h:outputText value="#{name} -----"></h:outputText>
        </p:column>
        <p:column>
            <p:commandButton value="click" onclick="$('.som_#{rowIndex}').show();"/>
        </p:column>
        <p:column>
            <p:inputText styleClass="som_#{rowIndex}" style="display:none"/>
        </p:column>

    </p:dataTable>
</h:form>

As styleClass supports el. So I did the same thing with styleClass and with a little jQuery.

Edit:

You probably need to add somewhere in your code the following line:

<h:outputScript library="primefaces" name="jquery/jquery.js" />

Edit:

Here is you dynamic widgetVar version:

<h:form>
    <p:dataTable var="name" value="#{so15320268.nameList}" rowIndexVar="rowIndex" widgetVar="table">
        <p:column>
            <h:outputText value="#{name} -----"></h:outputText>
        </p:column>
        <p:column>
            <p:commandButton value="click" onclick="textVar_#{rowIndex}.getJQ().show();"/>
        </p:column>
        <p:column>
            <p:inputText styleClass="som_#{rowIndex}" widgetVar="textVar_#{rowIndex}" style="display:none"/>
        </p:column>
    </p:dataTable>                                  
</h:form>

After digging into the js source of primefaces I came to know that there is no show method in PrimeFaces.widget.InputText like PrimeFaces.widget.Dialog. So you need to extract the jQuery object behind from the widgetVar and it can be done by widgetVar.getJQ() or widgetVar.jq; these two has been defined in PrimeFaces.widget.BaseWidget as:

PrimeFaces.widget.BaseWidget = Class.extend({

    init: function(cfg) {
        this.cfg = cfg;
        this.id = cfg.id;
        this.jqId = PrimeFaces.escapeClientId(this.id),
        this.jq = $(this.jqId);

        //remove script tag
        $(this.jqId + '_s').remove();
    },

    //used mostly in ajax updates, reloads the widget configuration
    refresh: function(cfg) {
        return this.init(cfg);
    },

    //returns jquery object representing the main dom element related to the widget
    getJQ: function(){
        return this.jq;
    }

});

I have strikeout my previous comment as it is wrong. widgetVar does support el. Hope it will help.