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

    showing js popup window prior to showing modalPanel on submit

    asookazian

      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
          asookazian

          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
            asookazian

            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
              asookazian

              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
                asookazian

                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
                  asookazian

                  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
                    asookazian

                    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
                      asookazian

                      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
                        asookazian

                        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
                          asookazian

                          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
                            asookazian

                            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
                              asookazian

                              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

                                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
                                  asookazian

                                  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
                                    asookazian

                                    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???