14 Replies Latest reply on Aug 2, 2010 11:55 AM by Arbi Sookazian

    showing js popup window prior to showing modalPanel on submit

    Arbi Sookazian Master

      I have a use case which requires showing a js confirm warning window to the user when they click the submit button of the form:

       

      <a4j:commandLink styleClass="widget_button"
                      rendered="#{pageaction != 'view'}"
                      style="float:right"
                      action="#{merchantBillingGroupEditorUI.submit}"
                      onclick="return showWarning();"
                      oncomplete="hideProgress();">
                      <span><h:outputText value="Finish" /></span>
                      <j4j:idProxy id="nextButton" />
                  </a4j:commandLink>

       

      The js which shows the modalPanel is showProgress().

       

      I am also using Seam remoting as below:

       

      <script type="text/javascript" src="/cis/seam/resource/remoting/resource/remote.js"></script>
      <script type="text/javascript" src="/cis/seam/resource/remoting/interface.js?merchantBillingGroupEditorUI"></script>
         
          <script type="text/javascript">
           function showWarning() {
               var rtn = null;
               var callback = function(result) {
                                   if (result == null || result == '') {
                                       rtn = confirm('No interchange programs were assigned to rate category.  Are you sure you want to proceed with saving?');
                                       if (rtn == true) {
                                            //showProgress();                                     
                                            return true;
                                       }
                                       else
                                           return false;
                                   }
                                };
               Seam.Remoting.getContext().setConversationId( #{conversation.id} );
               Seam.Component.getInstance("merchantBillingGroupEditorUI").getSelectedRateCategory(callback);        
           }
          </script>

       

      If the user clicks cancel to the confim window, I don't want the action method (submit) in the a4j:commandLink to execute and the modalPanel (please wait dialog) should not display either.  I *do* want it to execute and modalPanel to display if the user clicks ok to the confirm window.

       

      How can I achieve this?  Currently I can't get this to work.  thx.

        • 1. Re: showing js popup window prior to showing modalPanel on submit
          Arbi Sookazian Master

          If I uncomment the showProgress() call in the js function, then the modalPanel is displayed but the form is not submitted (modalPanel is displayed infinitely).

           

          The following does not work either:

           

          <a4j:commandLink styleClass="widget_button"
                          rendered="#{pageaction != 'view'}"
                          style="float:right"
                          action="#{merchantBillingGroupEditorUI.submit}"
                          onclick="return showWarning();"
                          onsubmit="showProgress();"
                          oncomplete="hideProgress();">
                          <span><h:outputText value="Finish" /></span>
                          <j4j:idProxy id="nextButton" />
                      </a4j:commandLink>

           

          When I click ok, form does not submit and the modalPanel does not display.

           

          Message was edited by: Arbi Sookazian

          • 2. Re: showing js popup window prior to showing modalPanel on submit
            Arbi Sookazian Master

            When I tried this, the form is not submitted:

             

            <a4j:commandLink styleClass="widget_button"
                            rendered="#{pageaction != 'view'}"
                            style="float:right"
                            action="#{merchantBillingGroupEditorUI.submit}"
                            onclick="return true;"               
                            oncomplete="hideProgress();">
                            <span><h:outputText value="Finish" /></span>
                            <j4j:idProxy id="nextButton" />
                        </a4j:commandLink>

             

            Is this expected behavior?

             

            "The return true command at the end means that the default action should also occur (if the user clicks, the link is followed). It is a boolean value, meaning it can take two values — true or false. Setting this to false will stop the default action from occurring. So, for example, you can disable a link by setting its click event to return false."

             

            http://www.yourhtmlsource.com/javascript/eventhandlers.html

             

            Message was edited by: Arbi Sookazian

            • 3. Re: showing js popup window prior to showing modalPanel on submit
              Arbi Sookazian Master

              With this snippet, the form submission is successful:

               

              <a4j:commandLink styleClass="widget_button"
                              rendered="#{pageaction != 'view'}"
                              style="float:right"
                              action="#{merchantBillingGroupEditorUI.submit}">
                              <span><h:outputText value="Finish" /></span>
                              <j4j:idProxy id="nextButton" />
                          </a4j:commandLink>

               

              Note that the onclick event handler is removed above...

              • 4. Re: showing js popup window prior to showing modalPanel on submit
                Arbi Sookazian Master

                FF3 page source:

                 

                <div style="width: 100%;"><a class="widget_button" href="#" id="j_id203:j_id204:j_id340" name="j_id203:j_id204:j_id340" onclick="showProgress();;A4J.AJAX.Submit('j_id203',event,{'parameters':{'j_id203:j_id204:j_id340':'j_id203:j_id204:j_id340','cid':'199'} ,'oncomplete':function(request,event,data){hideProgress();},'similarityGroupingId':'j_id203:j_id204:j_id340'} );return false;" style="float:right" tabindex="1">
                                         <span>Next &gt;&gt;</span><span id="nextButton" title="j_id203:j_id204:j_id340"></span></a>
                                 </div>

                 

                source from .xhtml:

                 

                <a4j:commandLink styleClass="widget_button"
                                rendered="#{pageaction != 'view'}"
                                style="float:right"
                                action="#{merchantBillingGroupEditorUI.submit}"
                                onclick="return true;">
                                <span><h:outputText value="Finish" /></span>
                                <j4j:idProxy id="nextButton" />
                            </a4j:commandLink>

                 

                Why is  showProgress() in the onclick event handler in the page source?

                 

                I even commented out the a4j:queue:

                 

                <!-- <a4j:queue size="1"
                            requestDelay="0"
                            ignoreDupResponses="true"
                            sizeExceededBehavior="dropNew"
                            onrequestqueue="showProgress();"
                            oncomplete="hideProgress();" />  -->

                 

                Is the browser caching the page?  If yes, how do I clear the cache?

                • 5. Re: showing js popup window prior to showing modalPanel on submit
                  Arbi Sookazian Master

                  Also I find it *very* strange that the other button's HTML source is not in the page source view:

                   

                  <a4j:commandLink styleClass="widget_button"
                                  rendered="#{pageaction != 'view'}"
                                  style="float:left" immediate="true" action="previous">
                                  <span><h:outputText value="&lt;&lt;Previous" /></span>
                                  <s:conversationId />
                              </a4j:commandLink>

                   

                  Why is that happening?

                   

                  When I search for "<a class="widget_button"", there is only one hit in the page source....

                   

                  This is unexpected.

                  • 6. Re: showing js popup window prior to showing modalPanel on submit
                    Arbi Sookazian Master

                    I just cleared the cache in FF3 and it still shows as this in page source:

                     

                    <div style="width: 100%;"><a class="widget_button" href="#" id="j_id203:j_id204:j_id340" name="j_id203:j_id204:j_id340" onclick="showProgress();;A4J.AJAX.Submit('j_id203',event,{'parameters':{'j_id203:j_id204:j_id340':'j_id203:j_id204:j_id340','cid':'205'} ,'oncomplete':function(request,event,data){hideProgress();},'similarityGroupingId':'j_id203:j_id204:j_id340'} );return false;" style="float:right" tabindex="1">
                                             <span>Next &gt;&gt;</span><span id="nextButton" title="j_id203:j_id204:j_id340"></span></a>
                                     </div>

                    The showProgress() should not be in the onclick event handler...
                    • 7. Re: showing js popup window prior to showing modalPanel on submit
                      Arbi Sookazian Master

                      This:

                       

                      <a4j:commandLink value="Get greeting" reRender="greeting" />

                      Generates this:

                      <a href="#" onclick="A4J.AJAX.Submit(?"request parameters"); return false;"><span>Get greeting</span></a>

                      So perhaps I need to write the HTML tag by hand rather than using the a4j:commandLink tag??

                      I'm not sure I can achieve what I want now using the onclick event handler only but there is no other suitable event
                      handler in this case...

                      • 8. Re: showing js popup window prior to showing modalPanel on submit
                        Arbi Sookazian Master

                        So I simplified the javascript scenario to do some root-cause analysis:

                         

                        <script type="text/javascript">   
                           
                            
                             function showWarning3() {             
                                      alert('hey2!');                      
                             }
                            
                             function showWarning4() {                  
                                      return confirm('hey2!');                           
                             }
                          </script>

                         
                          1) <a href="http://www.ticketmaster.com" onclick="return alert('hey!'); return false;"><span>alert()</span></a>
                         
                          2) <a href="http://www.ticketmaster.com" onclick="javascript:showWarning3(); return false;"><span>javascript function invoked</span></a>
                         
                          3) <a href="http://www.ticketmaster.com" onclick="return confirm('hey!'); return false;"><span>confirm inline()</span></a>
                         
                          4) <a href="http://www.ticketmaster.com" onclick="javascript:showWarning4(); return false;"><span>confirm js function()</span></a>

                         

                        The behavior is as expected for links 1 and 3 above.  2 and 4 immediately go to the target URL when I click the links (i.e. the alert or confirm dialogs are skipped/ignored).  So why does this happen?  Why can't I use a js function call?  Why must I use an inline javascript to make this work as I want?

                        • 9. Re: showing js popup window prior to showing modalPanel on submit
                          Arbi Sookazian Master

                          And I can't use this solution (form onsubmit) because the xhtml template is a sub-template and the <form> tag is in the master template.

                           

                          http://www.daniweb.com/forums/thread79522.html

                           

                          This means that if I add the onsubmit event handler to the form element then it will fire for all the wizard's pages (not just the page I'm concerned with now).

                          • 10. Re: showing js popup window prior to showing modalPanel on submit
                            Arbi Sookazian Master

                            The following seems to partially work (at least the browser seems to submit a HTTPrequest/response cycle):

                             

                            function showWarning2() {
                                    
                                     value = confirm('****No interchange programs were assigned to rate category.  Are you sure you want to proceed with saving?');
                                     alert('value = '+value);
                                     return value;
                                                         
                                 }

                             

                            <input type="submit" value="Send me your name!" onclick="return showWarning2();"/>

                             

                            So maybe it's not possible to do what I'm trying to do with a4j:commandLink and onclick event handler or it's a bug in RichFaces 3.3.3.GA.

                             

                            The problem with the above solution is the submit method in the action handler is not invoked b/c this is a plain HTML component...

                            • 11. Re: showing js popup window prior to showing modalPanel on submit
                              Arbi Sookazian Master

                              The <form onsubmit="return showWarning();"> does not work.  I just tried that and the problem is when i select a new value in the HtmlSelectOneMenu components (which have a4j:support embedded in them), the form is submitted and the confirm dialog displays.  I don't want it to display when I change a value in the drop-down selections.  even with ajaxSingle=true it fires the onsubmit event for the form.  The a4j:support is required to call the setter method and then read the property via getter in Seam remoting js function.

                               

                              Man, what a PITA....

                              • 12. Re: showing js popup window prior to showing modalPanel on submit
                                Ilya Shaikovsky Master

                                1) commandLink and button do not provides onsubmit. Use onclick instead.

                                2) use conditional return in order to cancel the request conditionally. Currently you making return anyway - so it breaks submission javaScript.

                                onclick="return showWarning();"

                                should be

                                onclick="if (showWarning()) return false;"

                                 

                                 

                                it worked in this way from the verry beggining http://www.jroller.com/a4j/entry/js_events_on_sending_ajax

                                1 of 1 people found this helpful
                                • 13. Re: showing js popup window prior to showing modalPanel on submit
                                  Arbi Sookazian Master

                                  I tried the following and when I click OK button in the confirm dialog, the AJAX request is not happening.  Why?  The form is not submitted.

                                   

                                  <script type="text/javascript">
                                       function showWarning() {
                                         
                                           var callback = function(result) {
                                                               if (result == null || result == '') {
                                                                   return confirm('No interchange programs were assigned to rate category.  Are you sure you want to proceed with saving?');                                
                                                               }
                                                            };
                                           Seam.Remoting.getContext().setConversationId( #{conversation.id} );
                                           Seam.Component.getInstance("merchantBillingGroupEditorUI").getSelectedRateCategory(callback);        
                                       }
                                       </script>

                                   

                                  <a4j:commandLink styleClass="widget_button"
                                                  rendered="#{pageaction != 'view'}"
                                                  style="float:right"
                                                  action="#{merchantBillingGroupEditorUI.submit}"
                                                  onclick="if (!showWarning()) return false;">
                                                  <span><h:outputText value="Finish" /></span>
                                                  <j4j:idProxy id="nextButton" />
                                              </a4j:commandLink>

                                   

                                  When I click cancel button in confirm dialog, it behaves as expected (dialog closes and the form is not submitted).

                                   

                                  How to fix?

                                  • 14. Re: showing js popup window prior to showing modalPanel on submit
                                    Arbi Sookazian Master

                                    This seems to behave appropriately:

                                     

                                    function showWarning2() {
                                             return confirm('No interchange programs were assigned to rate category.  Are you sure you want to proceed with saving?');
                                         }

                                     

                                    <a4j:commandLink styleClass="widget_button"
                                                    rendered="#{pageaction != 'view'}"
                                                    style="float:right"
                                                    action="#{merchantBillingGroupEditorUI.submit}"
                                                    onclick="if (!showWarning2()) return false;">
                                                    <span><h:outputText value="Finish" /></span>
                                                    <j4j:idProxy id="nextButton" />
                                                </a4j:commandLink>

                                     

                                    So maybe it has to do with using the callback function in the Seam remoting code???