5 Replies Latest reply on Jun 11, 2010 6:04 AM by eswaramoorthy1985

    why rich:hotKey not worked when using jQuery?

    eswaramoorthy1985

      Hi,

      I use rich:hotkey,    at the same time just load jQuery. 

      Case 1 : If not load jquery.js :

      After set cursor focus  textfield, i hit enter(Keyboard) button from that textfield,
      then automatically called alert (ok button click event)  window.

      Case 2 : If load jquery.js :

      The first case not worked.
      Some times, If hit enter button from textField, that time page will be refreshed.(Not often, rare case).

       

       

      <%@page contentType="text/html" pageEncoding="UTF-8"%>
      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">

      <f:view>
          <html>
              <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">           
                  <a4j:loadScript src="resource://jquery.js"/>           
                  <script type="text/javascript">

                      function okClicked()
                      {
                          alert("Ok Button Clicked");                  
                      }
                  </script>


              </head>
              <body onload="document.getElementById('includedForm:nameField').focus();">

                  <h:form id="includedForm">
                      <rich:panel id="includedPanel">
                          <h:panelGrid columns="2">

                              <h:outputText value="Name : " />
                              <h:inputText id="nameField" styleClass="nameField" value ="" />
                              
                              <a4j:commandButton id="okButton" value="Ok" onclick="okClicked();" focus="okButton"/>
                              <a4j:commandButton id="cancelButton" value="Cancel" />

                              <%--HotKey for nameField --%>
                              <rich:hotKey key="return"
                                           selector="#nameField"
                                           handler="#{rich:element('okButton')}.click();
                                           event.stopPropagation();event.preventDefault();
                                           return false;"/>
                               
                          </h:panelGrid>             
                      </rich:panel>
                  </h:form>
              </body>
          </html>
      </f:view>

      i set rich:hotKey(name field) for OK button.

      Help me about this.
      Thanks in advance.
        • 1. Re: why rich:hotKey not worked when using jQuery?
          ilya_shaikovsky

          do you trying to load your external jquery script? if so - it's not a good way as there could be conflicts with built-in one. And b.t.w. check FireBug console for JS errors.

          • 2. Re: why rich:hotKey not worked when using jQuery?
            eswaramoorthy1985

            Hi Ilya Shaikovsky, Thanks for your nice effort.

             

             

            In my project, I have not use any external jQuery.

             

            And also this is not external jQuery --> <a4j:loadScript src="resource://jquery.js"/>.

            • 3. Re: why rich:hotKey not worked when using jQuery?
              eswaramoorthy1985

              Hi Ilya Shaikovsky,

                Thanks for your reply. Let me explain my problem in detail. If I use the rich:jQuery and rich:hotKey in the

              same page, rich:hot key is not working properly. If I exclude the jquery.js library, rich:hotkey works perfectly.

              In the following code, the rich:hotkey is not set to the okButton when I pressed enter from the text field. But

              if I exclude the jquery.js library its working perfectly.

               

              <f:view>
              <html>
                      <head>
                          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
                          <a4j:loadScript src="resource://jquery.js"/>           
                          <script type="text/javascript">
                              function okClicked()
                              {
                                  alert("Ok Button Clicked");                  
                              }
                          </script> 
                      </head>
                      <body>
                       <h:form id="includedForm">
                                       <h:inputText id="nameField" value ="" />
                                       <a4j:commandButton id="okButton" value="Ok" onclick="okClicked();" />
                                       <%--HotKey for nameField --%>
                                       <rich:hotKey key="return"
                                                   selector="#nameField"
                                                   handler="#{rich:element('okButton')}.click();
                                                   event.stopPropagation();event.preventDefault();
                                                   return false;"/>
                       </h:form>
                      </body>
                  </html>
              </f:view>
              

               

              Please give me your valuable suggestion to resolve this issue. Thanks in Advance!!

              • 4. Re: why rich:hotKey not worked when using jQuery?
                ilya_shaikovsky
                • 5. Re: why rich:hotKey not worked when using jQuery?
                  eswaramoorthy1985

                  Hi,

                   

                        Thanks for your well effort.

                   

                        Its worked. rich:hotKey worked.

                   

                        Now i load the following script

                   

                       <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/jquery/jquery.js" />

                   

                       instead of  <a4j:loadScript src="resource:///jquery.js"/>.