4 Replies Latest reply on Feb 9, 2009 7:55 AM by Ilya Shaikovsky

    how to alert about unsaved data on <rich:tabPanel/>

    ramki dirisala Novice

      hi,
      in my app i have 3 tabs(student info,education details, personal details).
      when i change some data in first tab and if i click on second tab with out saving first tab data, in that case alert should appear. how can we do this.

      for each tab i have action attribute for loading data for that tab. here the probelm is i need to store unsaved data first after i need to load data for current tab.


      thanks,
      ramki.

        • 1. Re: how to alert about unsaved data on <rich:tabPanel/>
          Nick Belaevski Master

          Hi Ramki,

          Use cancelable ontableave event attribute:

          <rich:tabPanel>
           <rich:tab label="Tab 1" ontableave="return confirm('Go to the next tab?');">
           Tab1
           </rich:tab>
           <rich:tab label="Tab 2">
           Tab2
           </rich:tab>
           </rich:tabPanel>

          You can save form value by using a4j:jsFunction component:
          <rich:tabPanel switchType="ajax" eventsQueue="tabQueue">
           <rich:tab label="Tab 1" ontableave="saveData()">
           Tab1 <h:inputText value="" />
          
           <a4j:jsFunction name="saveData" eventsQueue="tabQueue" />
           </rich:tab>
           <rich:tab label="Tab 2">
           Tab2
           </rich:tab>
           </rich:tabPanel>

          Furthermore, tab values are automatically processed on server if tab switching occurs.

          • 2. Re: how to alert about unsaved data on <rich:tabPanel/>
            ramki dirisala Novice

            hi,
            i have some concerns here.

            i am using 3.2.2 GA. in that i think eventQueue attribute is not there.
            when i leave tab, if user changes something in that tab i need to alert user about unsaved data on that tab. if says ok then i need to save that tab data first then i need to load tab data which he clicked. if he say cancel simply i need to load next tab data which clicked.

            before alert user, how can i know user chages something inside that tab. can you please clarify my doubts.

            thanks,
            ramki.

            • 3. Re: how to alert about unsaved data on <rich:tabPanel/>
              Nick Belaevski Master

              eventsQueue attribute existed long before 3.3.0.GA, so you can use it in 3.2.2.GA.

              So I've added an example of code on how to program tab panel component in order to implement your use case. You have to write some JS code in order to know whether changes were made by the user or not.

              • 4. Re: how to alert about unsaved data on <rich:tabPanel/>
                Ilya Shaikovsky Master

                1) eventQueue present in 3.2.2. a4j:queue tag was designed only for 3.3.0 but queue attribute was always there ;)

                2) You could define the forms not around the tabPanel but inside every tab. Or leave the form around componet but make the tabs ajaxSingle. In this case tabs children values will not be updated automatically. And you will be responsible to store the values like Nick adviced.

                3) You could check the changes via some JS. just define some boolean client side variable which will becomes true after any input change.