Falscher Button reagiert auf Enter

  • Themenstarter Themenstarter Gelöschtes Mitglied 68249
  • Beginndatum Beginndatum
G

Gelöschtes Mitglied 68249

Gast
Moin,

ich habe da mal ein kleines Problem mit Formularen, bin mir aber nicht ganz sicher, ob es nicht ein reines HTML Problem ist.
Ich habe ein Java Backend mit einem Primefaces Frontend.
Auf einer meiner Seiten habe ich eine relativ komplexe Suche.
Java:
    <h:panelGrid columns="2">
        <p:outputLabel for="@next" value="Test" rendered="#{proIpsSearchHandler.showTest}" />
        <p:inputText value="23203" rendered="#{proIpsSearchHandler.showTest}" />
    </h:panelGrid>
        
    <h:panelGrid columns="3">
        <p:outputLabel for="@next" value="Entität:" />
        <p:selectOneMenu id="entityDropdown" value="#{proIpsSearchHandler.selectedInterfaceName}">
            <p:ajax update="searchValPnl newBtn" listener="#{proIpsSearchHandler.changeEntity}" />
            <f:selectItem itemLabel="Wähle eine Entität" itemValue="" noSelectionOption="true" />
            <f:selectItems value="#{proIpsSearchHandler.selectableInterfaceNames}" required="true" />
        </p:selectOneMenu>
        <p:commandButton id="newBtn" icon="pi pi-star" styleClass="ui-button-success" disabled="#{not proIpsSearchHandler.newEnabled}" update=":datenpflegeForm"
                action="#{dataExplorerHandler.newRecord(proIpsSearchHandler.selectedInterfaceName)}" immediate="true"  />
    </h:panelGrid>
        
    <h:panelGrid columns="4" id="searchValPnl">
        <p:outputLabel for="@next" value="Suchbegriffe"/>
        
        <h:panelGrid id="searchVal1Pnl" columns="3">
            <p:selectOneMenu id="searchfieldDropdown1" value="#{proIpsSearchHandler.selectedSearchfield1}">
                <p:ajax update="searchVal1Pnl searchVal2Pnl" />
                <f:selectItem itemLabel="Wähle ein Suchfeld" itemValue="" noSelectionOption="true" />
                <f:selectItems value="#{proIpsSearchHandler.availableSearchFields}" required="true" />
            </p:selectOneMenu>
            <p:selectOneMenu id="searchOperatorDropdown1" value="#{proIpsSearchHandler.selectedSearchOperator1}">
                <f:selectItems value="#{proIpsSearchHandler.searchOperators}" required="true" />
            </p:selectOneMenu>
            <p:inputText id="searchValue1" value="#{proIpsSearchHandler.searchString1}" required="true" label="Suchbegriff" rendered="#{proIpsSearchHandler.selectedSearchfield1 ne 'Status'}">
                <f:validateLength minimum="2" />
            </p:inputText>
            <p:selectOneMenu id="searchState1" value="#{proIpsSearchHandler.selectedSearchState1}" rendered="#{proIpsSearchHandler.selectedSearchfield1 eq 'Status'}">
                <f:selectItems value="#{proIpsSearchHandler.availableStates}" required="true" />
            </p:selectOneMenu>
        </h:panelGrid>
        
        <h:panelGrid id="searchVal2Pnl" columns="3">
            <p:selectOneMenu id="searchfieldDropdown2" value="#{proIpsSearchHandler.selectedSearchfield2}" rendered="#{not empty proIpsSearchHandler.selectedSearchfield1}">
                <p:ajax update="searchVal2Pnl searchVal3Pnl" />
                <f:selectItem itemLabel="Wähle ein Suchfeld" itemValue="" noSelectionOption="true" />
                <f:selectItems value="#{proIpsSearchHandler.availableSearchFields}" required="false" />
            </p:selectOneMenu>
            <p:selectOneMenu id="searchOperatorDropdown2" value="#{proIpsSearchHandler.selectedSearchOperator2}" rendered="#{not empty proIpsSearchHandler.selectedSearchfield1}">
                <f:selectItems value="#{proIpsSearchHandler.searchOperators}" required="true" />
            </p:selectOneMenu>
            <p:inputText id="searchValue2" value="#{proIpsSearchHandler.searchString2}" required="false" label="Suchbegriff" rendered="#{not empty proIpsSearchHandler.selectedSearchfield1 and proIpsSearchHandler.selectedSearchfield2 ne 'Status'}">
                <f:validateLength minimum="2" />
            </p:inputText>
            <p:selectOneMenu id="searchState2" value="#{proIpsSearchHandler.selectedSearchState2}" rendered="#{not empty proIpsSearchHandler.selectedSearchfield1 and proIpsSearchHandler.selectedSearchfield2 eq 'Status'}">
                <f:selectItems value="#{proIpsSearchHandler.availableStates}" required="false" />
            </p:selectOneMenu>
        </h:panelGrid>
        
        <h:panelGrid id="searchVal3Pnl" columns="3">
            <p:selectOneMenu id="searchfieldDropdown3" value="#{proIpsSearchHandler.selectedSearchfield3}" rendered="#{not empty proIpsSearchHandler.selectedSearchfield2}">
                <p:ajax update="searchVal3Pnl" />
                <f:selectItem itemLabel="Wähle ein Suchfeld" itemValue="" noSelectionOption="true" />
                <f:selectItems value="#{proIpsSearchHandler.availableSearchFields}" required="false" />
            </p:selectOneMenu>
            <p:selectOneMenu id="searchOperatorDropdown3" value="#{proIpsSearchHandler.selectedSearchOperator3}" rendered="#{not empty proIpsSearchHandler.selectedSearchfield2}">
                <f:selectItems value="#{proIpsSearchHandler.searchOperators}" required="true" />
            </p:selectOneMenu>
            <p:inputText id="searchValue3" value="#{proIpsSearchHandler.searchString3}" required="false" label="Suchbegriff" rendered="#{not empty proIpsSearchHandler.selectedSearchfield2 and proIpsSearchHandler.selectedSearchfield3 ne 'Status'}">
                <f:validateLength minimum="2" />
            </p:inputText>
            <p:selectOneMenu id="searchState3" value="#{proIpsSearchHandler.selectedSearchState3}" rendered="#{not empty proIpsSearchHandler.selectedSearchfield2 and proIpsSearchHandler.selectedSearchfield3 eq 'Status'}">
                <f:selectItems value="#{proIpsSearchHandler.availableStates}" required="false" />
            </p:selectOneMenu>
        </h:panelGrid>
    </h:panelGrid>

    <h:panelGrid columns="2">
        <p:commandButton value="Suchen" action="#{proIpsSearchHandler.search}" icon="pi pi-search"
            update="searchResultTable :datenpflegeForm:msgs" />

        <p:commandButton process="@this" value="Ausgabespalten" action="#{proIpsSearchHandler.editColumns}"
            update="manage-result-columns :datenpflegeForm:msgs" oncomplete="PF('manageResultColumnsDialog').show()"
            styleClass="ui-button-success" style="margin-right: .5rem">
            <p:resetInput target="manage-result-columns" />
        </p:commandButton>
    </h:panelGrid>

Zur Erklärung:
Der User wählt sich eine Entität, in der er suchen möchte. Au deren Grundlage hat er Suchfelder in der Entität. Für jeden eingegebenen Suchbegriff kann er einen weiteren, aber maximal drei Suchbegriffe zusätzlich eintragen (das will ich zukünftig noch dynamischer bauen). Bis da hin hat es super geklappt, dass wenn der User den Suchbegriff eingetragen hat und hat Enter gedrückt, dann hat das System automatisch gesucht.
Jetzt kam aber die Möglichkeit dazu, dass man in der Entität neue Datensätze anlegen kann (Zeile 13 & 14). Wenn der Button aktiv ist, und der User will aber suchen und drückt dann einfach Enter, dann läuft nicht die Suche, sondern der Neu-Prozess los.
Wie schon gesagt, evtl. ist das ein reines HTML Problem, aber kann ich der Oberfläche irgendwie erklären, was bei Enter passieren soll?
 
Gib dem commandButton in Zeile 73 (Suchen) eine id, z. B
HTML:
        <p:commandButton value="Suchen" action="#{proIpsSearchHandler.search}" icon="pi pi-search"
            id = "suchen"
            update="searchResultTable :datenpflegeForm:msgs" />
Dann fügst Du ein:
HTML:
<p:defaultCommand target="suchen" />
 
Als Ergänzung evtl. einfach noch der Showcase von PrimeFaces zu der Thematik default Button:
PrimeFaces Showcase
Dieses dynamische Setzen brauchst Du natürlich nicht, aber ich fand den Showcase recht interessant.

Den Rest konnte ich mir sparen, da @mihe7 schneller war 🙂
 
Man , ich hätte schwören können, dass ich schon jeden Artikel in dem Showcase gelesen habe, aber das hab ich glaube ich noch nie gesehen. Danke für die Antworten.
 

Neue Themen


Zurück
Oben