Button can be clicked only once on a XPage

Question

I have the following XPage which has one table and only two tr's.

The first one is a button itself which puts into viewScope['showPasswordTr'] boolean true value when clicked first time, when puts false when clicked again.

The second tr has an input which is rendered if viewScope['showPasswordTr']is true.

The problem I've encountered is that I can only click the button only once and it's 100% because of input field present. If I remove it, it works as expected

The second time and so on, the button just freezes and doesn't execute the action specified onclick event. Why is so? And how can I make it work as expected?

Thanks in advance.

EDIT

Well, It's obviously all because of required property set to true... So, should I check the element for emptiness only in the disered control then? Is it a good practice?

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:table id="buttonTable">
    <xp:tr id="buttonTr">
        <xp:td id="buttonTd">
            <xp:button id="authAsPersonButton" 
                value="This button can be clicked only once" />
                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="partial" execId="buttonTable"
                    refreshId="buttonTable">
                    <xp:this.action>
                        <![CDATA[#{javascript:
                        print("clicked");
                        if(viewScope['showPasswordTr']) 
                        {
                            viewScope['showPasswordTr'] = false;
                        }
                        else 
                        {
                            viewScope['showPasswordTr'] = true;
                        }

                        }]]>
                    </xp:this.action>
                </xp:eventHandler>
        </xp:td>
    </xp:tr>

    <xp:tr id="passwordLabelTr" rendered="#{javascript:
                return  viewScope['showPasswordTr'] == true;
                }">

            <xp:td id="passwordLabelTd">
                <xp:text id="passwordText" style="font-size: 14px;">
                    <xp:this.value>
                        <![CDATA[#{javascript: 
                            return 'password:';
                            }]]>
                    </xp:this.value>
                </xp:text>
            </xp:td>


        <xp:td id="passwordInputTd" align="right">
            <xp:inputText id="passwordInput" password="true"
                required="true">
            </xp:inputText>
        </xp:td>

    </xp:tr>

</xp:table>

</xp:view>

Answer 1

Add execId="buttonTd" or disableValidators="true" to your eventHandler properties. Then your example works as expected.

I optimized the code a bit (event handling within the button + shorter code for handling viewScope.showPasswordTr):

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:table id="buttonTable">

        <xp:tr id="buttonTr">
            <xp:td id="buttonTd">
                <xp:button id="authAsPersonButton" value="Toggle password field">
                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="partial" refreshId="buttonTable" execMode="partial"
                        disableValidators="true">
                        <xp:this.action>
                        <![CDATA[#{javascript:
                            viewScope.showPasswordTr = !viewScope.showPasswordTr}]]>
                        </xp:this.action>
                    </xp:eventHandler>
                </xp:button>
            </xp:td>
        </xp:tr>

        <xp:tr id="passwordLabelTr" rendered="#{!!viewScope.showPasswordTr}">
            <xp:td id="passwordLabelTd">
                <xp:text id="passwordText" style="font-size: 14px;" value="password:" />
            </xp:td>
            <xp:td id="passwordInputTd" align="right">
                <xp:inputText id="passwordInput" password="true"
                    required="true">
                </xp:inputText>
            </xp:td>
        </xp:tr>

    </xp:table>

</xp:view>