9 Replies Latest reply on Oct 15, 2010 4:10 AM by ilya_shaikovsky

    rich:hotKey esc not working in modelpanel

    sivaprasad9394

      Hi All,

       

      I have problem in model panel esc is not working and other keys(like ctrl+c) are working.How to fix this one?Is there anything more than this required to trigger event?

       

       

      <rich:modalPanel id="info_name_editmodal" moveable="false" resizeable="false"
      width="950" height="450">
      <f:facet name="header">
      <h:outputText value="Edit Customer Info" styleClass="modalPanel12"/>
      </f:facet>
      <f:facet name="controls">
      <h:panelGroup>
      <h:outputLabel value="Press Esc to close"></h:outputLabel>
      <rich:hotKey id="myKey"  key="ESC" handler="#{rich:component('info_name_editmodal')}.hide()" />
      <h:outputLabel value="(OR)"></h:outputLabel>
      <h:graphicImage value="../_assets/image/close.png" id="hidelinkeditinfonric"
      styleClass="hidelink" style="border:0" alt="Close" title="Close"/>
      <rich:componentControl for="info_name_editmodal" attachTo="hidelinkeditinfonric"
      operation="hide" event="onclick"/>
      </h:panelGroup>
      </f:facet>
      <table class="font_exist" width="950" height="50%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="top">
          <table width="900" border="0">
            <tr class="font_exist">
              <td width="750"> </td>
              <td width="112">Your Serving Time:</td>
              <td width="63"><input name="textfield17" type="text" id="textfield2" value="00:00" size="8" disabled="disabled" /></td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td valign="top"><table width="858" border="0" cellspacing="0.1" cellpadding="0.1">
            <tr height="19">
              <td width="90"> <h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.accno']}"/></td>
              <td width="393"><span class="font1 style2">45123413</span></td>
              <td width="11"> </td>
              <td width="97"><h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.name']}"/></td>
              <td width="371">Malika Mia </td>
            </tr>
            <tr>
              <td> <h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.serviceno']}"/></td>
              <td><span class="font1 style2">019300090009999</span></td>
              <td> </td>
              <td><h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.servicestatus']}"/></td>
              <td>Active</td>
            </tr>
            <tr>
              <td> <h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.servicetype']}"/></td>
              <td>Postpaid</td>
              <td> </td>
              <td><h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.vipcode']}"/></td>
              <td>VIP 6 </td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td></td>
        </tr>
        <tr>
          <td> </td>
        </tr>
        <tr>
          <td height="2" bgcolor="#45aed8"></td>
        </tr>
        <tr>
          <td> </td>
        </tr>
        <tr>
          <td><table width="958" border="0">
            <tr>
              <td width="122">Current Name :</td>
              <td width="540"><span class="style2">Malika Mia </span></td>
              <td width="282"> </td>
            </tr>
                    <tr>
                  <td width="122"><span class="style3">*</span> New Name : </td>
                  <td width="540">
                    <label>
                    <input type="text" name="textfield" />
                    </label>
               
                  <span class="mandatory_text">
                
                    </span></td></tr>
      <tr>
      <td colspan="2"><table width="342" id="newIc" style="display:none"><tr>
                  <td width="102"><span class="mandatory_text">*</span>NRIC:</td>
                  <td width="228"><input name="textfield4322" type="text" size="30" />             </td>
                </tr>
         <tr>
                  <td>Old IC : </td>
                  <td><input name="textfield2" type="text" size="30" /></td>
                </tr></table>
      <table width="342" id="army" style="display:none"><tr>
                  <td width="102"><span class="mandatory_text">*</span>Army / Police no:</td>
                  <td width="228"><input name="textfield4322" type="text" size="30" />             </td>
                </tr></table>
        <table width="342" id="foreigner" style="display:none"><tr>
                  <td width="102"><span class="mandatory_text">*</span>Passport:</td>
                  <td width="228"><input name="textfield4322" type="text" size="30" />             </td>
                </tr></table>
      <table width="342" id="brn" style="display:none"><tr>
                  <td width="102"><span class="mandatory_text">*</span>BRN Number:</td>
                  <td width="228"><input name="textfield4322" type="text" size="30" />             </td>
                </tr></table>            </td>
      </tr>
            
            <tr>
              <td height="18">Notes :</td>
              <td><textarea name="textarea" cols="50" rows="5"></textarea></td>
              <td> </td>
              </tr>
          </table></td>
        </tr>
        <tr>
          <td> </td>
        </tr>
      </table>
      <table width="400" border="0" cellspacing="0.1" cellpadding="0.1">
        <tr>
          <td width="10"> </td>
          <td width="390"><h:commandButton id="closeButtonId" styleClass="celcocm01" value="save"/>
      <rich:componentControl for="info_name_editmodal" attachTo="closeButtonId"
      operation="hide" event="onclick" />  </td>
        </tr>
      </table>
      </rich:modalPanel>

      <rich:modalPanel id="info_name_editmodal" moveable="false" resizeable="false"

      width="950" height="450">

      <f:facet name="header">

      <h:outputText value="Edit Customer Info" styleClass="modalPanel12"/>

      </f:facet>

      <f:facet name="controls">

      <h:panelGroup>

      <h:outputLabel value="Press Esc to close"></h:outputLabel>

      <rich:hotKey id="myKey"  key="esc" handler="#{rich:component('info_name_editmodal')}.hide()" />

      <h:outputLabel value="(OR)"></h:outputLabel>

      <h:graphicImage value="../_assets/image/close.png" id="hidelinkeditinfonric"

      styleClass="hidelink" style="border:0" alt="Close" title="Close"/>

      <rich:componentControl for="info_name_editmodal" attachTo="hidelinkeditinfonric"

      operation="hide" event="onclick"/>

      </h:panelGroup>

      </f:facet>

       

      <table class="font_exist" width="950" height="50%" border="0" cellpadding="0" cellspacing="0">

        ....................

      .....................

      </table>

      </rich:modalPanel>

       

      When i tried in Mozilla i got this warning,look the image

       

      KeyError.JPG

        • 1. Re: rich:hotKey esc not working in modelpanel
          ilya_shaikovsky

          try to move tag definition out of modal panel.

          • 2. Re: rich:hotKey esc not working in modelpanel
            sivaprasad9394

            ilya thank you for your reply.I tried but it is not working.Still it is showing the same warning.??

             

            My main jsp:

             

            <html>

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

            <title>Insert title here</title>

            </head>

            <body>

            <f:subview id="generalSubview">

            <h:form id="postpaidCustomerGeneralForm">

            <a4j:region id="postpaidCustomerRegion" renderRegionOnly="true">

            <table width="100%" border="0" cellspacing="1" cellpadding="1">

                        <tr>

            <td width="147"><h:outputText  value="#{msg['existingcustomer.tab.postpaid.postpaid.name']}"/></td>

              <td width="5"><h:outputText value=":" /></td>

                              <td width="638" class="font_exist">

              <h:outputText id="postpaidNameFields" styleClass="style1" value="#{generalInformationBean.name}"/></td>

                              <td width="30">

             

            <a4j:commandLink limitToList="true"

            id="nricEditLinks" value="#{msg['statusEdit']}"

            oncomplete="Richfaces.showModalPanel('info_name_editmodal');"></a4j:commandLink>

            </td>              

                    </tr>  

                </table>

            </a4j:region>     

            </h:form>

            </f:subview>

            <a4j:region>

            <a4j:include viewId="/existingcustomer/postpaid/genaralinformation/generalinfo/info_name_editmodal.jsp"></a4j:include>

            </a4j:region>

            </body>

            </html>

             

            info_name_editmodal.jsp i have displayed in my previous post.

             

            <html>
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
            <title>Insert title here</title>
            </head>
            <body>
            <f:subview id="generalSubview">
            <h:form id="postpaidCustomerGeneralForm">
            <a4j:region id="postpaidCustomerRegion" renderRegionOnly="true">
            <table width="100%" border="0" cellspacing="1" cellpadding="1">
                        <tr>
            <td width="147"><h:outputText  value="#{msg['existingcustomer.tab.postpaid.postpaid.name']}"/></td>
            <td width="5"><h:outputText value=":" /></td>
                              <td width="638" class="font_exist">
            <h:outputText id="postpaidNameFields" styleClass="style1" value="#{generalInformationBean.name}"/></td>
                              <td width="30">
            <a4j:commandLink limitToList="true"
            id="nricEditLinks" value="#{msg['statusEdit']}"
            oncomplete="Richfaces.showModalPanel('info_name_editmodal');"></a4j:commandLink>
            </td>              
                        </tr>
                        <tr>
            <td width="147"><h:outputText  value="#{msg['existingcustomer.tab.postpaid.postpaid.serviceno']}"/></td>
            <td width="5"><h:outputText value=":" /></td>
                              <td width="638" class="font_exist">
            <h:outputText id="postpaidservivenoFields" styleClass="style1" value="#{generalInformationBean.serviceNo}"/></td>
                              <td width="30"><a4j:commandLink ajaxSingle="true" id="servicenoEditLinks" styleClass="celcomNoColor01"
            reRender="postpaidservivenoFields" value="#{msg['statusEdit']}" immediate="true">
            </a4j:commandLink></td>              
                        </tr>
                        <tr>
            <td width="147"><h:outputText  value="#{msg['existingcustomer.tab.postpaid.accountno']}"/></td>
            <td width="5"><h:outputText value=":" /></td>
                              <td width="638" class="font_exist">
            <h:outputText id="postpaidaccountnoFields" styleClass="style1" value="#{generalInformationBean.accountNumber}"/></td>
                              <td width="30"></td>              
                        </tr>
                        <tr>
            <td width="147"><h:outputText  value="#{msg['existingcustomer.tab.postpaid.servicestatus']}"/></td>
            <td width="5"><h:outputText value=":" /></td>
                              <td width="638" class="font_exist">
            <h:outputText id="postpaidServiceStatusFields" styleClass="style1" value="#{generalInformationBean.serviceStatus}"/></td>
                              <td width="30"><a4j:commandLink ajaxSingle="true" id="servicestatusEditLinks" styleClass="celcomNoColor01"
            reRender="postpaidServiceStatusFields" value="#{msg['statusEdit']}" immediate="true">
            </a4j:commandLink></td>              
                        </tr>
                         <tr>
            <td width="147"><h:outputText  value="#{msg['existingcustomer.tab.postpaid.callbar']}"/></td>
            <td width="5"><h:outputText value=":" /></td>
                              <td width="638" class="font_exist">
            <h:outputText id="postpaidCallBarFields" styleClass="style1" value="#{generalInformationBean.callBar}"/></td>
                              <td width="30"><a4j:commandLink ajaxSingle="true" id="callBarEditLinks" styleClass="celcomNoColor01"
            reRender="postpaidCallBarFields" value="#{msg['statusEdit']}" immediate="true">
            </a4j:commandLink></td>              
                        </tr>
                        <tr>
            <td width="147"><h:outputText  value="#{msg['existingcustomer.tab.postpaid.creditlimit']}"/></td>
            <td width="5"><h:outputText value=":" /></td>
                              <td width="638" class="font_exist">
            <h:outputText id="postpaidCreditLimitFields" styleClass="style1" value="#{generalInformationBean.creditLimit}"/></td>
                              <td width="30"><a4j:commandLink ajaxSingle="true" id="creditLimitEditLinks" styleClass="celcomNoColor01"
            reRender="postpaidCreditLimitFields" value="#{msg['statusEdit']}" immediate="true">
            </a4j:commandLink></td>              
                        </tr>
                        <tr>
            <td width="147"><h:outputText  value="#{msg['existingcustomer.tab.postpaid.vipcode']}"/></td>
            <td width="5"><h:outputText value=":" /></td>
                              <td width="638" class="font_exist">
            <h:outputText id="postpaidVipCodeFields" styleClass="style1" value="#{generalInformationBean.vipCode}"/></td>
                              <td width="30"><a4j:commandLink ajaxSingle="true" id="vipCodeEditLinks" styleClass="celcomNoColor01"
            reRender="postpaidVipCodeFields" value="#{msg['statusEdit']}" immediate="true">
            </a4j:commandLink></td>              
                        </tr>
                        <tr>
            <td width="147"><h:outputText  value="#{msg['existingcustomer.tab.postpaid.accountcategory']}"/></td>
            <td width="5"><h:outputText value=":" /></td>
                              <td width="638" class="font_exist">
            <h:outputText id="postpaidAccountCategoryFields" styleClass="style1" value="#{generalInformationBean.accountCategory}"/></td>
                              <td width="30"></td>              
                        </tr>
                         <tr>
            <td width="147"><h:outputText  value="#{msg['existingcustomer.tab.postpaid.parentaccountno']}"/></td>
            <td width="5"><h:outputText value=":" /></td>
                              <td width="638" class="font_exist">
            <h:outputText id="postpaidParentAccnoFields" styleClass="style1" value="#{generalInformationBean.parentAccountNo}"/></td>
                              <td width="30"></td>              
                        </tr>
                        <tr>
            <td width="147"><h:outputText  value="#{msg['existingcustomer.tab.postpaid.childcount']}"/></td>
            <td width="5"><h:outputText value=":" /></td>
                              <td width="638" class="font_exist">
            <h:outputText id="postpaidChildCountFields" styleClass="style1" value="#{generalInformationBean.childCount}"/></td>
                              <td width="30"></td>              
                        </tr>                               
                </table>
            </a4j:region>     
            </h:form>
            </f:subview>
            <a4j:region>
            <a4j:include viewId="/existingcustomer/postpaid/genaralinformation/generalinfo/info_name_editmodal.jsp"></a4j:include>
            </a4j:region>
            </body>
            </html>

            • 3. Re: rich:hotKey esc not working in modelpanel
              sivaprasad9394

              Still it is not working.Any one have idea to work for this?Thanks in advance.

              • 4. Re: rich:hotKey esc not working in modelpanel
                sivaprasad9394

                <f:subview id="infoChnageMobileEditSubview">
                <a4j:form id="infoChnageMobileEditForm"  ajaxSubmit="true">
                <input id="addressbar" type="hidden" value='/existingcustomer/postpaid/genaralinformation/generalinfo/info_name_editmodal.jsp'>
                <h:outputLink value="#" id="link" onclick="return false;">
                <rich:hotKey  id="myKey"  key="esc" type="onkeypress"
                handler="Richfaces.showModalPanel('info_changemobile_editmodal');"/>
                <rich:modalPanel id="info_changemobile_editmodal" moveable="false" resizeable="false" autosized="false"
                width="950" height="500" showWhenRendered="false" style="overflow-y: scroll">
                <f:facet name="header">
                <h:outputText value="Edit Customer Info-Service Number" styleClass="modalPanel12"/>
                </f:facet>
                <f:facet name="controls">
                <h:panelGroup>
                <h:outputLabel value="Press Esc to close"></h:outputLabel>
                 
                <h:outputLabel value="(OR)"></h:outputLabel> 
                <h:graphicImage value="../_assets/image/close.png" id="hidelinkeditinfochangeMobile"
                styleClass="hidelink" style="border:0" alt="Close" title="Close"/>
                <rich:componentControl for="info_changemobile_editmodal" attachTo="hidelinkeditinfochangeMobile"
                operation="hide" event="onclick"/> 
                </h:panelGroup>
                </f:facet>
                <div>
                <table class="font_exist" width="950" height="50%" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td valign="top">
                    <table width="900" border="0">
                      <tr class="font_exist">
                        <td width="750"> </td>
                        <td width="112">Your Serving Time:</td>
                        <td width="63"><input name="textfield17" type="text" id="textfield2" value="00:00" size="8" disabled="disabled" /></td>
                      </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td valign="top"><table width="858" border="0" cellspacing="0.1" cellpadding="0.1">
                      <tr height="19">
                        <td width="90"> <h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.accno']}"/></td>
                        <td width="393"><span class="font1 style2">45123413</span></td>
                        <td width="11"> </td>
                        <td width="97"><h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.name']}"/></td>
                        <td width="371">Malika Mia </td>
                      </tr>
                      <tr>
                        <td> Service NO :</td>
                        <td><span class="font1 style2">0193000900</span></td>
                        <td> </td>
                        <td>Service Status :</td>
                        <td>Active</td>
                      </tr>
                      <tr>
                        <td> Service Type :</td>
                        <td>Postpaid</td>
                        <td> </td>
                        <td>VIP Code :</td>
                        <td>VIP 6 </td>
                      </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td></td>
                  </tr>
                  <tr>
                    <td> </td>
                  </tr>
                  <tr>
                    <td height="2" bgcolor="#45aed8"></td>
                  </tr>
                  <tr>
                    <td> </td>
                  </tr>
                  <tr>
                    <td><table width="958" border="0">
                      <tr>
                        <td width="141">Current MSISDN : </td>
                        <td width="221">
                        <h:outputText styleClass="style3" value="0193000900"></h:outputText></td>
                        <td width="582"> </td>
                      </tr>
                      <tr>
                        <td><span class="mandatory_text">*</span>New MSISDN : </td>
                        <td><h:inputText id="searchFieldId" ></h:inputText>       
                          <a4j:commandButton  limitToList="true" ajaxSingle="true" value="#{msg['search']}"
                          onclick="Richfaces.showModalPanel('info_msisdn_no_searchmodal');">
                          </a4j:commandButton>
                          </td>
                         </tr>      
                      <tr>
                        <td height="18">Notes :</td>
                        <td><textarea name="textarea" cols="35" rows="5"></textarea></td>
                      </tr>
                      <tr>
                        <td height="18"> </td>
                        <td> </td>
                      </tr>
                      <tr>
                        <td height="76">Broad Cast Option : </td>
                        <td><label></label>
                          <table width="200" border="0">
                            <tr>
                              <td width="63">
                                 <a4j:outputPanel ajaxRendered="true">
                                 <a4j:region renderRegionOnly="true">
                <h:selectOneRadio  id="broadCastOption" 
                value="#{generalInformationBean.selectRadioButtonValue}" valueChangeListener="#{generalInformationBean.selectRadioValue}">  
                <a4j:support event="onclick" ajaxSingle="true"
                  reRender="broadCastOption,info_changemobile_editmodal,info_msisdn_no_searchmodal"
                  data="#{generalInformationBean.rdoButtonFlag}"
                  oncomplete="if(data==true)
                  {
                      #{rich:component('info_changemobile_editmodal')}.hide();
                    #{rich:component('broadcast_modal')}.show();
                  }
                  else
                  {
                          return false;
                  }"/>
                 
                <f:selectItem id="yesoption" itemValue="true" itemLabel="Yes"/>
                <f:selectItem id="Nooption" itemValue="false" itemLabel="No"/>                    
                </h:selectOneRadio>
                </a4j:region>
                </a4j:outputPanel>
                               </td>
                            </tr>
                          </table>          </td>
                        <td> </td>
                      </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td> </td>
                  </tr>
                </table>
                <table width="400" border="0" cellspacing="0.1" cellpadding="0.1">
                  <tr>
                    <td width="10"> </td>
                    <td width="390"><a4j:commandButton limitToList="true" ajaxSingle="true"
                     type="button" id="closeButtonIds" styleClass="celcocm01" value="save"/>
                <rich:componentControl for="info_changemobile_editmodal" attachTo="closeButtonIds"
                operation="hide" event="onclick" />  </td>
                  </tr>
                </table>
                </div>
                </rich:modalPanel>
                </h:outputLink>
                </a4j:form>
                </f:subview>

                <f:subview id="infoChnageMobileEditSubview">

                <a4j:form id="infoChnageMobileEditForm"  ajaxSubmit="true">

                <input id="addressbar" type="hidden" value='/existingcustomer/postpaid/genaralinformation/generalinfo/info_name_editmodal.jsp'>

                <h:outputLink value="#" id="link" onclick="return false;">

                <rich:hotKey  id="myKey"  key="esc" type="onkeypress"

                handler="Richfaces.showModalPanel('info_changemobile_editmodal');"/>

                <rich:modalPanel id="info_changemobile_editmodal" moveable="false" resizeable="false" autosized="false"

                width="950" height="500" showWhenRendered="false" style="overflow-y: scroll">

                <f:facet name="header">

                <h:outputText value="Edit Customer Info-Service Number" styleClass="modalPanel12"/>

                </f:facet>

                <f:facet name="controls">

                <h:panelGroup>

                <h:outputLabel value="Press Esc to close"></h:outputLabel>

                 

                 

                <h:outputLabel value="(OR)"></h:outputLabel> 

                <h:graphicImage value="../_assets/image/close.png" id="hidelinkeditinfochangeMobile"

                styleClass="hidelink" style="border:0" alt="Close" title="Close"/>

                <rich:componentControl for="info_changemobile_editmodal" attachTo="hidelinkeditinfochangeMobile"

                operation="hide" event="onclick"/> 

                </h:panelGroup>

                </f:facet>

                <div>

                <table class="font_exist" width="950" height="50%" border="0" cellpadding="0" cellspacing="0">

                  <tr>

                    <td valign="top">

                    <table width="900" border="0">

                      <tr class="font_exist">

                        <td width="750"> </td>

                        <td width="112">Your Serving Time:</td>

                        <td width="63"><input name="textfield17" type="text" id="textfield2" value="00:00" size="8" disabled="disabled" /></td>

                      </tr>

                    </table></td>

                  </tr>

                  <tr>

                    <td valign="top"><table width="858" border="0" cellspacing="0.1" cellpadding="0.1">

                      <tr height="19">

                        <td width="90"> <h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.accno']}"/></td>

                        <td width="393"><span class="font1 style2">45123413</span></td>

                        <td width="11"> </td>

                        <td width="97"><h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.name']}"/></td>

                        <td width="371">Malika Mia </td>

                      </tr>

                      <tr>

                        <td> Service NO :</td>

                        <td><span class="font1 style2">0193000900</span></td>

                        <td> </td>

                        <td>Service Status :</td>

                        <td>Active</td>

                      </tr>

                      <tr>

                        <td> Service Type :</td>

                        <td>Postpaid</td>

                        <td> </td>

                        <td>VIP Code :</td>

                        <td>VIP 6 </td>

                      </tr>

                    </table></td>

                  </tr>

                  <tr>

                    <td></td>

                  </tr>

                  <tr>

                    <td> </td>

                  </tr>

                  <tr>

                    <td height="2" bgcolor="#45aed8"></td>

                  </tr>

                  <tr>

                    <td> </td>

                  </tr>

                  <tr>

                    <td><table width="958" border="0">

                      <tr>

                        <td width="141">Current MSISDN : </td>

                        <td width="221">

                        <h:outputText styleClass="style3" value="0193000900"></h:outputText></td>

                        <td width="582"> </td>

                      </tr>

                      <tr>

                        <td><span class="mandatory_text">*</span>New MSISDN : </td>

                        <td><h:inputText id="searchFieldId" ></h:inputText>       

                          <a4j:commandButton  limitToList="true" ajaxSingle="true" value="#{msg['search']}"

                          onclick="Richfaces.showModalPanel('info_msisdn_no_searchmodal');">

                          </a4j:commandButton>

                          </td>

                         </tr>      

                      <tr>

                        <td height="18">Notes :</td>

                        <td><textarea name="textarea" cols="35" rows="5"></textarea></td>

                      </tr>

                      <tr>

                        <td height="18"> </td>

                        <td> </td>

                      </tr>

                      <tr>

                        <td height="76">Broad Cast Option : </td>

                        <td><label></label>

                          <table width="200" border="0">

                            <tr>

                              <td width="63">

                            <a4j:outputPanel ajaxRendered="true">

                            <a4j:region renderRegionOnly="true">

                <h:selectOneRadio  id="broadCastOption" 

                value="#{generalInformationBean.selectRadioButtonValue}" valueChangeListener="#{generalInformationBean.selectRadioValue}">  

                <a4j:support event="onclick" ajaxSingle="true"

                   reRender="broadCastOption,info_changemobile_editmodal,info_msisdn_no_searchmodal"

                   data="#{generalInformationBean.rdoButtonFlag}"

                   oncomplete="if(data==true)

                   {

                  #{rich:component('info_changemobile_editmodal')}.hide();

                     #{rich:component('broadcast_modal')}.show();

                   }

                   else

                   {

                  return false;

                   }"/>

                  

                <f:selectItem id="yesoption" itemValue="true" itemLabel="Yes"/>

                <f:selectItem id="Nooption" itemValue="false" itemLabel="No"/>

                </h:selectOneRadio>

                </a4j:region>

                </a4j:outputPanel>

                               </td>

                            </tr>

                          </table>          </td>

                        <td> </td>

                      </tr>

                    </table></td>

                  </tr>

                  <tr>

                    <td> </td>

                  </tr>

                </table>

                <table width="400" border="0" cellspacing="0.1" cellpadding="0.1">

                  <tr>

                    <td width="10"> </td>

                    <td width="390"><a4j:commandButton limitToList="true" ajaxSingle="true"

                     type="button" id="closeButtonIds" styleClass="celcocm01" value="save"/>

                <rich:componentControl for="info_changemobile_editmodal" attachTo="closeButtonIds"

                operation="hide" event="onclick" />  </td>

                  </tr>

                </table>

                </div>

                 

                 

                 

                </rich:modalPanel>

                </h:outputLink>

                </a4j:form>

                </f:subview>

                • 6. Re: rich:hotKey esc not working in modelpanel
                  sivaprasad9394

                  Hi Andreas,

                    Thanks for you reply.i tried as per the url also it is not working below is my jsp page code.How to solve this problem??

                   

                   

                  <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
                  <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
                  <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
                  <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
                  <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
                  <script type="text/javascript">
                  function RedirectPage()
                  {
                  var location1="/existingcustomer/postpaid/genaralinformation/generalinfo/info_name_editmodal.jsp";
                  var CONTEXT_ROOT = '<%= request.getContextPath().concat("/existingcustomer/postpaid/genaralinformation/generalinfo/info_name_editmodal.jsp") %>';
                  alert(CONTEXT_ROOT);
                  }
                  function ChangeModelPanel()
                  {
                  alert("Hello");
                  alert(document.getElementById('broadCastOption').value);
                  }
                  </script>
                  <f:subview id="infoChangeMobileEditSubview">
                  <a4j:form id="infoChagneMobileEditForm"  ajaxSubmit="true">
                  <input id="addressbar" type="hidden" value='/existingcustomer/postpaid/genaralinformation/generalinfo/info_name_editmodal.jsp'>
                  <h:outputLink value="#" id="link" onclick="return false;">
                          
                  <rich:modalPanel id="info_changemobile_editmodal" moveable="false" resizeable="false" autosized="false"
                  width="950" height="500" showWhenRendered="false" style="overflow-y: scroll">
                  <f:facet name="header">
                  <h:outputText value="Edit Customer Info-Service Number" styleClass="modalPanel12"/>
                  </f:facet>
                  <f:facet name="controls">
                  <h:panelGroup>
                  <h:outputLabel value="Press Esc to close"></h:outputLabel>
                  <rich:hotKey key="esc" selector="#infoChagneMobileEditForm"   
                           handler="#{rich:element('infoChagneMobileEditForm:cancelButtonId')}.click();event.stopPropagation();event.preventDefault(); return false;"
                            disableInInput="false"/>
                  <h:outputLabel value="(OR)"></h:outputLabel>
                  <h:graphicImage value="../_assets/image/close.png" id="hidelinkeditinfochangeMobile"
                  styleClass="hidelink" style="border:0" alt="Close" title="Close"/>
                  <rich:componentControl for="info_changemobile_editmodal" attachTo="hidelinkeditinfochangeMobile"
                  operation="hide" event="onclick"/>
                  </h:panelGroup>
                  </f:facet>
                  <div>
                  <table class="font_exist" width="950" height="50%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td valign="top">
                      <table width="900" border="0">
                        <tr class="font_exist">
                          <td width="750"> </td>
                          <td width="112">Your Serving Time:</td>
                          <td width="63"><input name="textfield17" type="text" id="textfield2" value="00:00" size="8" disabled="disabled" /></td>
                        </tr>
                      </table></td>
                    </tr>
                    <tr>
                      <td valign="top"><table width="858" border="0" cellspacing="0.1" cellpadding="0.1">
                        <tr height="19">
                          <td width="90"> <h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.accno']}"/></td>
                          <td width="393"><span class="font1 style2">45123413</span></td>
                          <td width="11"> </td>
                          <td width="97"><h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.name']}"/></td>
                          <td width="371">Malika Mia </td>
                        </tr>
                        <tr>
                          <td> Service NO :</td>
                          <td><span class="font1 style2">0193000900</span></td>
                          <td> </td>
                          <td>Service Status :</td>
                          <td>Active</td>
                        </tr>
                        <tr>
                          <td> Service Type :</td>
                          <td>Postpaid</td>
                          <td> </td>
                          <td>VIP Code :</td>
                          <td>VIP 6 </td>
                        </tr>
                      </table></td>
                    </tr>
                    <tr>
                      <td></td>
                    </tr>
                    <tr>
                      <td> </td>
                    </tr>
                    <tr>
                      <td height="2" bgcolor="#45aed8"></td>
                    </tr>
                    <tr>
                      <td> </td>
                    </tr>
                    <tr>
                      <td><table width="958" border="0">
                        <tr>
                          <td width="141">Current MSISDN : </td>
                          <td width="221">
                          <h:outputText styleClass="style3" value="0193000900"></h:outputText></td>
                          <td width="582"> </td>
                        </tr>
                        <tr>
                          <td><span class="mandatory_text">*</span>New MSISDN : </td>
                          <td><h:inputText id="searchFieldId" ></h:inputText>      
                            <a4j:commandButton  limitToList="true" ajaxSingle="true" value="#{msg['search']}"
                            onclick="Richfaces.showModalPanel('info_msisdn_no_searchmodal');">
                            </a4j:commandButton>
                            </td>
                           </tr>     
                        <tr>
                          <td height="18">Notes :</td>
                          <td><textarea name="textarea" cols="35" rows="5"></textarea></td>
                        </tr>
                        <tr>
                          <td height="18"> </td>
                          <td> </td>
                        </tr>
                        <tr>
                          <td height="76">Broad Cast Option : </td>
                          <td><label></label>
                            <table width="200" border="0">
                              <tr>
                                <td width="63">
                                   <a4j:outputPanel ajaxRendered="true">
                                   <a4j:region renderRegionOnly="true">
                  <h:selectOneRadio  id="broadCastOption"
                  value="#{generalInformationBean.selectRadioButtonValue}" valueChangeListener="#{generalInformationBean.selectRadioValue}"> 
                  <a4j:support event="onclick" ajaxSingle="true"
                    reRender="broadCastOption,info_changemobile_editmodal,info_msisdn_no_searchmodal"
                    data="#{generalInformationBean.rdoButtonFlag}"
                    oncomplete="if(data==true)
                    {
                        #{rich:component('info_changemobile_editmodal')}.hide();
                      #{rich:component('broadcast_modal')}.show();
                    }
                    else
                    {
                            return false;
                    }"/>
                  <f:selectItem id="yesoption" itemValue="true" itemLabel="Yes"/>
                  <f:selectItem id="Nooption" itemValue="false" itemLabel="No"/>                   
                  </h:selectOneRadio>
                  </a4j:region>
                  </a4j:outputPanel>
                                 </td>
                              </tr>
                            </table>          </td>
                          <td> </td>
                        </tr>
                      </table></td>
                    </tr>
                    <tr>
                      <td> </td>
                    </tr>
                  </table>
                  </div>
                  <h:panelGrid columns="6">
                  <a4j:commandButton limitToList="true" ajaxSingle="true"
                       type="button" id="saveButtonId" styleClass="celcocm01" value="#{msg.save}"/>
                  <rich:componentControl for="info_changemobile_editmodal" attachTo="saveButtonId"
                  operation="hide" event="onclick" />
                  <a4j:commandButton limitToList="true" ajaxSingle="true"
                       type="button" id="resetButtonId" styleClass="celcocm01" value="#{msg.reset}"/>
                  <rich:componentControl for="info_changemobile_editmodal" attachTo="resetButtonId"
                  operation="hide" event="onclick" />
                  <a4j:commandButton limitToList="true" ajaxSingle="true"
                       type="button" id="cancelButtonId" styleClass="celcocm01" value="#{msg.cancel}"/>
                  <rich:componentControl for="info_changemobile_editmodal" attachTo="cancelButtonId"
                  operation="hide" event="onclick" />
                  </h:panelGrid>
                  </rich:modalPanel>
                  </h:outputLink>
                  </a4j:form>
                  </f:subview>

                  <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>

                  <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

                  <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>

                  <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>

                  <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

                   

                  <script type="text/javascript">

                   

                  function RedirectPage()

                  {

                  var location1="/existingcustomer/postpaid/genaralinformation/generalinfo/info_name_editmodal.jsp";

                  var CONTEXT_ROOT = '<%= request.getContextPath().concat("/existingcustomer/postpaid/genaralinformation/generalinfo/info_name_editmodal.jsp") %>';

                  alert(CONTEXT_ROOT);

                  }

                  function ChangeModelPanel()

                  {

                  alert("Hello");

                  alert(document.getElementById('broadCastOption').value);

                  }

                   

                  </script>

                  <f:subview id="infoChangeMobileEditSubview">

                  <a4j:form id="infoChagneMobileEditForm"  ajaxSubmit="true">

                  <input id="addressbar" type="hidden" value='/existingcustomer/postpaid/genaralinformation/generalinfo/info_name_editmodal.jsp'>

                  <h:outputLink value="#" id="link" onclick="return false;">

                   

                   

                   

                  <rich:modalPanel id="info_changemobile_editmodal" moveable="false" resizeable="false" autosized="false"

                  width="950" height="500" showWhenRendered="false" style="overflow-y: scroll">

                  <f:facet name="header">

                  <h:outputText value="Edit Customer Info-Service Number" styleClass="modalPanel12"/>

                  </f:facet>

                  <f:facet name="controls">

                  <h:panelGroup>

                  <h:outputLabel value="Press Esc to close"></h:outputLabel>

                  <rich:hotKey key="esc" selector="#infoChagneMobileEditForm"    

                           handler="#{rich:element('infoChagneMobileEditForm:cancelButtonId')}.click();event.stopPropagation();event.preventDefault(); return false;"

                            disableInInput="false"/>

                   

                  <h:outputLabel value="(OR)"></h:outputLabel>

                  <h:graphicImage value="../_assets/image/close.png" id="hidelinkeditinfochangeMobile"

                  styleClass="hidelink" style="border:0" alt="Close" title="Close"/>

                  <rich:componentControl for="info_changemobile_editmodal" attachTo="hidelinkeditinfochangeMobile"

                  operation="hide" event="onclick"/>

                  </h:panelGroup>

                  </f:facet>

                  <div>

                  <table class="font_exist" width="950" height="50%" border="0" cellpadding="0" cellspacing="0">

                    <tr>

                      <td valign="top">

                      <table width="900" border="0">

                        <tr class="font_exist">

                          <td width="750"> </td>

                          <td width="112">Your Serving Time:</td>

                          <td width="63"><input name="textfield17" type="text" id="textfield2" value="00:00" size="8" disabled="disabled" /></td>

                        </tr>

                      </table></td>

                    </tr>

                    <tr>

                      <td valign="top"><table width="858" border="0" cellspacing="0.1" cellpadding="0.1">

                        <tr height="19">

                          <td width="90"> <h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.accno']}"/></td>

                          <td width="393"><span class="font1 style2">45123413</span></td>

                          <td width="11"> </td>

                          <td width="97"><h:outputText  value="#{msg['existingcustomer.postpaid.common.popup.fields.name']}"/></td>

                          <td width="371">Malika Mia </td>

                        </tr>

                        <tr>

                          <td> Service NO :</td>

                          <td><span class="font1 style2">0193000900</span></td>

                          <td> </td>

                          <td>Service Status :</td>

                          <td>Active</td>

                        </tr>

                        <tr>

                          <td> Service Type :</td>

                          <td>Postpaid</td>

                          <td> </td>

                          <td>VIP Code :</td>

                          <td>VIP 6 </td>

                        </tr>

                      </table></td>

                    </tr>

                    <tr>

                      <td></td>

                    </tr>

                    <tr>

                      <td> </td>

                    </tr>

                    <tr>

                      <td height="2" bgcolor="#45aed8"></td>

                    </tr>

                    <tr>

                      <td> </td>

                    </tr>

                    <tr>

                      <td><table width="958" border="0">

                        <tr>

                          <td width="141">Current MSISDN : </td>

                          <td width="221">

                          <h:outputText styleClass="style3" value="0193000900"></h:outputText></td>

                          <td width="582"> </td>

                        </tr>

                        <tr>

                          <td><span class="mandatory_text">*</span>New MSISDN : </td>

                          <td><h:inputText id="searchFieldId" ></h:inputText>      

                            <a4j:commandButton  limitToList="true" ajaxSingle="true" value="#{msg['search']}"

                            onclick="Richfaces.showModalPanel('info_msisdn_no_searchmodal');">

                            </a4j:commandButton>

                            </td>

                           </tr>     

                        <tr>

                          <td height="18">Notes :</td>

                          <td><textarea name="textarea" cols="35" rows="5"></textarea></td>

                        </tr>

                        <tr>

                          <td height="18"> </td>

                          <td> </td>

                        </tr>

                        <tr>

                          <td height="76">Broad Cast Option : </td>

                          <td><label></label>

                            <table width="200" border="0">

                              <tr>

                                <td width="63">

                              <a4j:outputPanel ajaxRendered="true">

                              <a4j:region renderRegionOnly="true">

                  <h:selectOneRadio  id="broadCastOption"

                  value="#{generalInformationBean.selectRadioButtonValue}" valueChangeListener="#{generalInformationBean.selectRadioValue}"> 

                  <a4j:support event="onclick" ajaxSingle="true"

                     reRender="broadCastOption,info_changemobile_editmodal,info_msisdn_no_searchmodal"

                     data="#{generalInformationBean.rdoButtonFlag}"

                     oncomplete="if(data==true)

                     {

                    #{rich:component('info_changemobile_editmodal')}.hide();

                       #{rich:component('broadcast_modal')}.show();

                     }

                     else

                     {

                    return false;

                     }"/>

                   

                  <f:selectItem id="yesoption" itemValue="true" itemLabel="Yes"/>

                  <f:selectItem id="Nooption" itemValue="false" itemLabel="No"/>

                  </h:selectOneRadio>

                  </a4j:region>

                  </a4j:outputPanel>

                                 </td>

                              </tr>

                            </table>          </td>

                          <td> </td>

                        </tr>

                      </table></td>

                    </tr>

                    <tr>

                      <td> </td>

                    </tr>

                  </table>

                  </div>

                  <h:panelGrid columns="6">

                  <a4j:commandButton limitToList="true" ajaxSingle="true"

                       type="button" id="saveButtonId" styleClass="celcocm01" value="#{msg.save}"/>

                  <rich:componentControl for="info_changemobile_editmodal" attachTo="saveButtonId"

                  operation="hide" event="onclick" />

                   

                  <a4j:commandButton limitToList="true" ajaxSingle="true"

                       type="button" id="resetButtonId" styleClass="celcocm01" value="#{msg.reset}"/>

                  <rich:componentControl for="info_changemobile_editmodal" attachTo="resetButtonId"

                  operation="hide" event="onclick" />

                   

                  <a4j:commandButton limitToList="true" ajaxSingle="true"

                       type="button" id="cancelButtonId" styleClass="celcocm01" value="#{msg.cancel}"/>

                  <rich:componentControl for="info_changemobile_editmodal" attachTo="cancelButtonId"

                  operation="hide" event="onclick" />

                  </h:panelGrid>

                   

                   

                  </rich:modalPanel>

                  </h:outputLink>

                  </a4j:form>

                  </f:subview>

                   

                   

                  • 7. Re: rich:hotKey esc not working in modelpanel
                    ahoehma

                    try a a4j:form inside the modalpanel not outside ... it's only a idea

                    • 8. Re: rich:hotKey esc not working in modelpanel
                      sivaprasad9394

                      Hi Andreas,

                       

                      Thanks for your reply and spending your good time for me.Could you tell me what are all the jquery setups need to be done to make work this?Thanks in advance.

                      • 9. Re: rich:hotKey esc not working in modelpanel
                        ilya_shaikovsky

                          <rich:hotKey key="esc" selector="#infoChagneMobileEditForm"

                         

                        I'm not sure that trying to catch event at form will works fine. It's better to remove selector (to catch the event on document)