PrimeFaces inputText enable/disable

Question

I have two radio buttons on JSF2/PrimeFaces page, which I need to enable/disable an inputText field depending on the choice.

<h:form prependId="false">
    <p:panelGrid id="notif">
        <p:row id="notif1">
            <p:column>
                <h:outputText value="label" />
            </p:column>
            <p:column>
                <p:selectOneRadio id="radiobuttons" value="#{state.radioStatus}" layout="pageDirection">
                    <f:selectItem itemLabel="enable" itemValue="enable" />
                    <f:selectItem itemLabel="disable" itemValue="disable" />
                    <p:ajax update="date" />
                </p:selectOneRadio>
            </p:column>
            <p:column>
                <p:inputText id="date" value="#{state.infoDate}" disabled="#{!state.checkStatus}" >
                </p:inputText>
                <p:inputText id="test" value="#{state.infoDateTest}">
                </p:inputText>
            </p:column>
        </p:row>
    </p:panelGrid>
</h:form>

Also this all is inside a tab, but there is no nested forms when checked the generated html. The fields seem to get the id of the tab, but they seem to be correct like this (Did not work when tried to use id notation 'tabView:date' for the ajax.)

The problem is that when entering the page, the 'actual' text field is disabled by default and should be enabled when the radio button is set to enable it. When the radio button status is updated, I can see the event is registered on the server side and the inputText field gets "visually" enabled (by default it is disabled as supposed to). However the field is not "focusable" after enabling it, so can't write to it.

The more bizarre it gets when I added the 'test' inputText field, which does not get it self enabled/disabled regarding to radio buttons. On a fresh page load you can write to it, but after changing the radio button status, it is not writable anymore (the text that was entered prior to ajax call, will remain, but is not editable).

However the radio buttons continue to work and will fire events on the server side.

Could someone point out what I may be doing incorrectly, or could this be a bug with PrimeFaces?

// Update Like said, the managed bean works as supposed to, so I don't see any problems there, but here is the code (simplified and renamed for readability as the relevant parts are taken from a bigger context).

@ManagedBean(name = "state")
@SessionScoped
public class ExampleBean implements Serializable {

    private static final String disable = "disable";
    private static final String enable = "enable";
    private String text;
    private List<TestRow> rows = null;
    private TestRow row = null;
    private String radioStatus = "enable";
    private String infoDate = "";
    private String infoDateTest = "";

    @PostConstruct
    public void initEmpty() {
    }

    public String getRadioStatus() {

        return this.radioStatus;
    }

    public void setRadioStatus(String radioStatus) {

        this.radioStatus = radioStatus;
    }

    public String getInfoDate() {

        return infoDate;
    }

    public void setInfoDate(String infoDate) {

        this.infoDate = infoDate;
    }

    public String getInfoDateTest() {

        return infoDateTest;
    }

    public void setInfoDateTest(String infoDateTest) {

        this.infoDateTest = infoDateTest;
    }

    public boolean isCheckStatus() {

        return this.radioStatus.equalsIgnoreCase(enable) ? true : false;
    }
}

Which PF version are you dealing with? Also could you publish your managed bean code? — Aritz, Oct 14 '13 at 14:08
Sorry, forgot that information. PrimeFaces 3.5 (extensions 0.6.3). — Ville Myrskyneva, Oct 15 '13 at 04:54
Should had guessed it. I tried this code above on a test project of mine without the extra stuff on the "actual" page, and I now have this working. Next step seems to be adding it in a tab and resolving which other component/functionality on the actual page. — Ville Myrskyneva, Oct 15 '13 at 06:00
Most of the times best solution is to try something like you did, in a test project. Glad to see it worked ;-) — Aritz, Oct 15 '13 at 06:18
You are correct. It just requires some extra work to set up a clean test project. And when the original page works otherwise correctly, the first assumption is that it may be a bug within the framework. I have to keep this test project available in future to test things if I encounter something like this. — Ville Myrskyneva, Oct 15 '13 at 06:31
Btw. The tab contents are in separate fragments, but it seems to work correctly even when the fragments are included. — Ville Myrskyneva, Oct 15 '13 at 06:33
An extra project is very handy, always. With JSF-PF frameworks, which are continuouslly being tested, it's much easier to have an issue in your code rather than a bug in the framework itself. — Aritz, Oct 15 '13 at 06:35
One more test showed that the above worked on another page. It just refuses to work where it is supposed to. This is definitely related to some other content on the page/tab. — Ville Myrskyneva, Oct 15 '13 at 09:37

Ville Myrskyneva · Accepted Answer · 2013-10-16T10:14:49.747

Unfortunately I was not able to figure out what is causing the actual problem. The basic thing seems to be that the inherited javascript (primefaces) is not working properly on this page (maybe because of some other js inherited). Finally I just made it a custom enable/disable js-function:

js.toggleDisableStatus = function(elementId) {

// Can't use jQuery $("#xx:yy"), the syntax is not accepted by jquery but
// used by JSF/PrimeFaces
var element = document.getElementById(elementId);
var attrValue = element.getAttribute('disabled');
if (attrValue === undefined || attrValue == null) {
    element.disabled = true;
    element.style.background = "#dddddd";
} else {
    element.removeAttribute('disabled');
    element.style.background = "";
}
};

This may be flawed but works for now. The radio buttons are selected by the persisted status (loaded in state) and the enable/disable state for the input-field is also set when initially loading the page. Generally I think this should work for this particular case.

Some other research I did based on this issue: I had beans from two separate SessionScope implementations which resulted in initializing the SessionScoped beans again when the page was reloaded. The explanation for that was found here: http://stackoverflow.com/questions/11887940/jsf-2-session-bean-created-for-every-request — Ville Myrskyneva, Oct 16 '13 at 10:16
After fixing the imports of SessionScopes all to 'import javax.faces.bean.SessionScoped' I got rid of the invalid construction of the beans, but unfortunately the original problem still persist(ed). — Ville Myrskyneva, Oct 16 '13 at 10:17

PrimeFaces inputText enable/disable

1 Answers1