CommandButton Onclick inside tab always takes me to first tab Primefaces

Question

Below is my code. Here the CommandButton action is not working and always moving the first tab.

<h:head>
    <title>Alert Input</title>
</h:head>
<h:body>
    <h1 style="margin: auto;text-align: center">Fraud Alert Admin Page</h1>
    <p:separator style="height:5px;background-color:black;"/>
    <p:tabView id="tabs">
        <p:tab id="alertInput" title="Enter Alert">
            <h:form>
                <p:growl id="submitMessage" showDetail="true" sticky="true"/>
                <p:panel id="alertPanel">
                    <p:panelGrid columns="2" style="margin-bottom:10px">
                        <p:outputLabel for="sevLevel" value="Sev:" />
                        <p:selectOneMenu id="sevLevel" required="true" value="#{alertInputBean.alertSev}">
                            <f:selectItem itemLabel="Informational" itemValue="1"/>
                            <f:selectItem itemLabel="Warning" itemValue="2"/>
                            <f:selectItem itemLabel="Urgent" itemValue="3"/>
                            <f:selectItem itemLabel="Severe" itemValue="4"/>
                        </p:selectOneMenu>
                        <p:outputLabel for="alertName" value="Alert Name:"/>
                        <p:inputText id="alertName" required="true" label="Alert Name" value="#{alertInputBean.alertName}"/>
                        <p:outputLabel for="alertDescription" value="Alert Description:"/>
                        <p:inputText id="alertDescription" required="true" label="Description" value="#{alertInputBean.alertDesc}"/>
                    </p:panelGrid>
                    <p:toolbar>
                        <f:facet name="left">
                            <p:commandButton value="submit" actionListener="#{alertInputBean.submitAlert()}"
                                             update="submitMessage" ajax="false">
                            </p:commandButton>
                        </f:facet>
                        <f:facet name="right">
                            <h:commandButton value="Reset">
                                <p:ajax update="alertPanel" resetValues="true"/>
                            </h:commandButton>
                        </f:facet>
                    </p:toolbar>
                </p:panel>
            </h:form>
        </p:tab>
        <p:tab id="alertExisting" title="Current Alerts">
            <h:form id="form">
                <p:dataTable id="allAlerts" var="alerts" 
                             value="#{alertInputBean.retrieveAllAlerts()}"
                             emptyMessage="No alerts found with the given criteria."
                             selection="#{alertInputBean.selectedAlerts}" 
                             rowKey="#{alerts.alertName}" scrollable="true" scrollHeight="250">
                    <f:facet name="header">
                        Current Alerts
                    </f:facet>
                    <p:column selectionMode="multiple" style="width:16px;text-align:center"/>
                    <p:column headerText="Alert Severity">
                        <h:outputText value="#{alerts.sev}"/>
                    </p:column>
                    <p:column headerText="Alert Name">
                        <h:outputText value="#{alerts.alertName}"/>
                    </p:column>
                    <p:column headerText="Alert Description">
                        <h:outputText value="#{alerts.descrption}"/>
                    </p:column>
                    <p:column headerText="Creation Date">
                        <h:outputText value="#{alerts.createDate}"/>
                    </p:column>
                    <p:column headerText="Modify Date">
                        <h:outputText value="#{alerts.modifyDate}"/>
                    </p:column>
                    <p:column headerText="Enabled">
                        <h:outputText value="#{alerts.enabled}"/>
                    </p:column>
                    <f:facet name="footer">
                        <p:commandButton process="@this" value="Update" icon="ui-icon-search" 
                                         update=":tabs:form:multiAlertUpdate" onclick="PF('multiAlertDialog')show()"/>
                    </f:facet>
                </p:dataTable>
                <p:dialog header="Update Selected" widgetVar="multiAlertDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" width="200">
                    <p:outputPanel id="multiAlertUpdate" style="text-align: center">
                        <ui:repeat value="#{alertInputBean.selectedAlerts}" var="sAlerts">
                            <p:outputLabel value="#{sAlerts.sev}-#{sAlerts.alertName}" style="display: block"/>
                        </ui:repeat>
                    </p:outputPanel>
                </p:dialog>                 
            </h:form>
        </p:tab>
    </p:tabView>
</h:body>

Below is the XHTML I have the above code. The problem is whenever I click on the commandbutton I am redirected to the first tab. Intended onClick is not at all working.

Answer 1

First Command Button

It happens because you have defined the ajax attribute as false, and you are trying to call a method with actionListener which uses an ajax call.

Set ajax=true or just delete it (the default is true), and your page may work

If you don't want ajax behavior, use action instead of actionListener

---

Last Command Button

If the problem is in the last command button (please be more clear in the next time), you just have to define type=button, so it will work as a simple button.

<p:commandButton type="button" process="@this" value="Update" icon="ui-icon-search" 
 update=":tabs:form:multiAlertUpdate" onclick="PF('multiAlertDialog')show()"/>