5 Replies Latest reply on Feb 25, 2010 9:05 AM by Alon Singer

    rich:tabPanel ajax switching

    Alon Singer Newbie




      I have rich:tabPanel with rich:tabPanel switchType="ajax". The reason is that one tab affects other content and there is validation pertab. The problem is that it takes few seconds to switch between tabs. If the user clicks tab and on the communication time, until the clicked tab rendered, he clicks again and again the tabs, aside from the fluid of messages and the load on the server, there are javascript errors and even after the new tab switched, some of the content is not rendered. So, my questions are:


      1. How to prevent it?

      2. Is there an option to work with switchType="client", yet run server side validation? (the client is much faster)

      3. I used to pop modal dialog which locks the many switching clicks, the problem is that the validation errors appears on rich:messages and when

      I hide the dialog, the messages disappear as well.


      Any ideas?





        • 1. Re: rich:tabPanel ajax switching
          Lotfi Mellouk Master

          you cannot switch tabs if there exists a validation error, using client switchtype will allow switching tabs without server validation,

          server switch type is similiar to ajax, but it's a http request not an ajax ones, ajax switchType is fatser.

          • 2. Re: rich:tabPanel ajax switching
            Benjamin Kersten Newbie

            1. You can at least prevent duplicate responses using <rich:tab ignoreDupResponses="true"/>. But IMHO JS errors should actually not occur even if the tab is clicked more than once. Or do they occur in your custom code?

            3. You could add a "custom overlay" instead of a popup, e.g.

            <div id="screenblocker" style="display:none; background-color:black; opacity:0.5; z-index:1000; position:absolute; top:0px; left:0px; width=100%; height=100%;" />

            Should be hidden initially ( display:none ) and displayed during tab changes, e.g.

            <rich:tab ontableave="$('screenblocker').show();" ontabenter="$('screenblocker').hide();" />


            Thus, u dont need an additional form within the popup and messages could be displayed on the main page.

            (Care that prototype script is loaded before. Code is untested, but should give the idea).

            1 of 1 people found this helpful
            • 3. Re: rich:tabPanel ajax switching
              Alon Singer Newbie

              Thanks you!


              Is there a way to prevent various JS errors which trown while toggling quickly between tabs?

              The problem is that there when working with AJAX mode, some code regarding components which not exist anymore runs after the tabs changed. The errors are  because the components are not partof the DOM of the page and all of them because of accessing null elements.


              If I change tabs normally and not quickly, the JS errors don't happen.



              • 4. Re: rich:tabPanel ajax switching
                Ilya Shaikovsky Master
                But IMHO JS errors should actually not occur even if the tab is clicked more than once. Or do they occur in your custom code?


                agree, please check where the errors risen using fireBug.

                • 5. Re: rich:tabPanel ajax switching
                  Alon Singer Newbie



                  The erros didn't happen on mycustom code.

                  Please see on the attached files, some of the errors.


                  Need to mention that I have file upload component and spinner component.


                  This is the stacktrace: (goes from up to down)

                  The problem is that  e is null



                  function(){for(var i=0;i<newscripts.length;i++){_this._evaluateScript(newscripts[i]);}



                  new Richfaces.Spinner(

                  "problemEditorPanelForm:CVnumOfRepetitionPercent",{'min':'1','max':'500','delta':'5'} );




                  var edit=this._getDirectChildrenByTag(this.content,'INPUT')[0]


                  var allKids=e.childNodes



                  (Lsat row on this function):

                  function(e,tagName){var kids=new Array();var allKids=e.childNodes;for(var i=0;i<allKids.length;i++){if(allKids[i]&&allKids[i].tagName&&allKids[i].tagName.toUpperCase()==tagName.toUpperCase()){kids.push(allKids[i]);}}