0

I am trying to use primefaces but its not producing expected result. My code snippet is below

<h:form id="searchForm" styleClass="searchForm">    
     <p:panelGrid columns="3">
         <p:commandButton id="left-overlay-btn" value="" styleClass="xschnapp-search-filter-menu" />
         <p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" />
         <p:commandButton value="&#160;" id="searchButton" action="#{cc.attrs.searchAction}" styleClass="xschnapp-search-action" />
     </p:panelGrid>
     <p:defaultCommand target="searchButton">
</h:form>

In Above code, when I press enter then it hits the first column button and not the expected search even after using primefaces p:defaultCommand.

http://blog.primefaces.org/?p=1787

Someone adviced me to use javascript to manually click search button, thats also failing. Perhaps due to my weak javascript knowledge. Below is code snippet with javascript and that also hit first column button instead of desired search button

<h:form id="searchForm" styleClass="searchForm" onkeypress="if (event.keyCode == 13) {document.getElementById('searchButton').click(); return false}">    
        <p:panelGrid columns="3">
            <p:commandButton id="left-overlay-btn" value="" styleClass="xschnapp-search-filter-menu" />
            <p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" />
            <p:commandButton value="&#160;" id="searchButton" action="#{cc.attrs.searchAction}" styleClass="xschnapp-search-action" />
        </p:panelGrid>
</h:form>

Can somebody please help me.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
apts
  • 19
  • 5
  • Why did you not just improve your original question? https://stackoverflow.com/questions/36330347/hitting-enter-goes-to-wrong-button – Kukeltje Apr 05 '16 at 15:13
  • Hi Kukeltje, thanks for your suggestion. I'll keep in mind for the next time. – apts Apr 05 '16 at 16:08
  • So either remove the other one or this one... take your pick... – Kukeltje Apr 05 '16 at 16:25
  • other deleted. Any idea, why getDocumentById(form:searchButton) is showing null ? or whats wrong in javascript call ? – apts Apr 05 '16 at 16:48
  • Check the `id` of your button in the resulting html : according to what you provided it is not `form:searchButton`. – ForguesR Apr 05 '16 at 17:32
  • I have tried all possible combination getDocumentById('form:searchButton'), getDocumentById('searchForm:searchButton'), getDocumentById('searchButton'), getDocumentById('form.searchButton') and still the result is null – apts Apr 06 '16 at 06:10

1 Answers1

0

I have had the same problem defining global hotkey for my enterprise site. The aproach which worked for me is: 

<h:form id="form">
    <p:hotkey bind="Enter" update="msg" actionListener="#{yourBean.yourSearchfunction}"/>
    <p:remoteCommand name="search" actionListener="#{yourBean.yourSearchfunction}" update="msg"/>
    //Your code
</h:form>
<h:outputScript>
$(':input').bind('keydown', 'Enter', function () {
    search();
    return false;
});
</h:outputScript>

With this code regardless where your cursor stays it will start your search function on pressing enter. Maybe you want it a bit more finegrained then you can remove the p:hotkey component to only use to start your search function if the cursor is inside a input field.

The javascript is needed because the p:hotkey component works everywhere except if the cursor stays inside an input field. So you bind your remote comand to the enter event inside every inputfield in the view.

ScreamingTree
  • 302
  • 1
  • 13
  • I tried this approach, its not working :( Because I only have the id of searchButton. Search Action is associated with this button already by composite-elements. – apts Apr 06 '16 at 06:56