7 Replies Latest reply on Nov 15, 2012 5:19 AM by ram ram

    Synchronous save when tab changed

    Tony Gedge Newbie

      I have a form containing multiple tabs. Each tab can be saved independently.

      When the user changes from one tab to another, I want to save the current tab, and if that tab saves successfully, swap to the new tab, otherwise remain on the current tab.

      Does anyone have some suggestions on the best way to acheive the above interation?

        • 1. Re: Synchronous save when tab changed
          Ilya Shaikovsky Master

          wrap the whole tab panel within h:form instead of neted to tabs forms usage. Then while switching - whole tab will be decoded and applied. so switch will not be performed if failed. Sure you should use ajax or server switchType.

          • 2. Re: Synchronous save when tab changed
            Tony Gedge Newbie

             

            "ilya_shaikovsky" wrote:
            wrap the whole tab panel within h:form instead of neted to tabs forms usage. Then while switching - whole tab will be decoded and applied. so switch will not be performed if failed. Sure you should use ajax or server switchType.


            Perhaps I have not described what we want to achieve properly.

            We already have the entire tab panel in a form. The issue isn't stopping a tab change on a validation failure - that works fine!

            What we want to do is initiate an action on tab change, and if that action doesn't complete "successfully" (e.g. it places error messages on the faces context) then the tab change should not happen.

            Any suggestions?


            • 3. Re: Synchronous save when tab changed
              Tony Gedge Newbie

              In case anyone else wants to do the same thing, here is how I did it.

              The basic model was to initiate the "modified" test as a server side call initiated from the ontableave javascript hook, and use the render phase to pop-up the modal dialog box if necessary. The buttons on the dialog would call server-side action methods to perform the save or cancel, and the render phase of these requests would pop-down the dialog box.

              The key features here are:


              • Set the showWhenRendered attribute of the modal dialog to true, and use a expression in therendered attribute and render phase to popup/popdown the dialog as needed.
              • Get the desired tab ID that is being switched to using event.enteredTabName in the ontableave event handler javascript.


                So we use the ontableave javascript hook to call an a4j:jsFunction and immediately return false (so the tab wasn't changed). This function uses a4j:actionparam values to populate a SaveConfirmBean backing bean with:

                • An EL value expression for the selected tab variable - used to change tabs when the save succeeds.
                • An EL value expression for a variable that returns whether the data has changed.
                • An EL method expression for an action method to invoke for save.


                  The modal dialog box has save and cancel buttons which initiate actions on the backing bean. The backing bean implementation also has the isChanged action method invoked by the jsFunction.

                  The isChanged action method evaluates the EL expression to determine whether the data has changed. If TRUE, it sets the modal dialog rendered flag to true, otherwise false.

                  The save action method invokes the EL method expression for save. If this action method doesn't throw, and doesn't log a message above INFO level, then the EL value expression for the selected tab is set to the new tab. In all cases the modal dialog rendered flag to false.

                  The cancel action method sets the EL value expression for the selected tab is to the new tab and sets the modal dialog rendered flag to false.

                  So there you have it. The only problem I have now is that some kind of validation or other weirdo error is causing my jsFunction not to be invoked! It works when ajaxSingle="true", but not otherwise!


              • 4. Re: Synchronous save when tab changed
                Tony Gedge Newbie

                 

                "geggle" wrote:
                The only problem I have now is that some kind of validation or other weirdo error is causing my jsFunction not to be invoked! It works when ajaxSingle="true", but not otherwise!


                And this actually turns out to be an interesting quirk with the placement of the a4j:jsFunction and the rich:tabPanel tags. Don't put the a4j:jsFunction that you want to call in the ontableave javascript handler under the rich:tabPanel tag. It will be generated fine, but won't work correctly when invoked.

                • 5. Re: Synchronous save when tab changed
                  Ilya Shaikovsky Master

                   

                  "geggle" wrote:

                  What we want to do is initiate an action on tab change, and if that action doesn't complete "successfully" (e.g. it places error messages on the faces context) then the tab change should not happen.


                  So why you just can't change selectedTab value binding to switch the tab back if the error appears?

                  • 6. Re: Synchronous save when tab changed
                    Tony Gedge Newbie

                     

                    "ilya_shaikovsky" wrote:
                    "geggle" wrote:

                    What we want to do is initiate an action on tab change, and if that action doesn't complete "successfully" (e.g. it places error messages on the faces context) then the tab change should not happen.


                    So why you just can't change selectedTab value binding to switch the tab back if the error appears?


                    Because the user has to interact first to decide whether to actually do the save or not. The flow is:

                    change tabs -> if changed then modal dialog otherwise change tab -> if OK then save otherwise change tab -> if successful then change tab otherwise stay on same tab.

                    • 7. Re: Synchronous save when tab changed
                      ram ram Newbie

                      I have the same problem.

                      any suggestions?