6 Replies Latest reply on Apr 29, 2014 8:30 AM by Wang Liyu

    Richfaces 4 tabPanel Object delay construction issue

    Wang Liyu Apprentice

      In the Richfaces 4, the tab of TabPanel's tab Object (new RichFaces.ui.Tab(...)) is constructed at the end of the response, so if I use JQuery's $.ready() try to manipulate some attributes in the Tab (for example disable/enable), it will cause exception, because the $.ready() is happened before the object constructed, is there anyway other way than setTimeout that I can do to fix this problem?

       

      Thanks,

      Liyu

        • 1. Re: Richfaces 4 tabPanel Object delay construction issue
          Michal Petrov Master

          You handle disabling via the component attributes, why handle it in the object constructor?

           

          Though if you really have to you can extend the constructor:

          var oldInit = RichFaces.ui.Tab.prototype.init;
                     
          RichFaces.ui.Tab = RichFaces.ui.Tab.extendClass({
              init : function (componentId, options) {
                  oldInit.call(this, componentId, options);
                    // do other things
              }
          });
          
          • 2. Re: Richfaces 4 tabPanel Object delay construction issue
            Wang Liyu Apprentice

            So here is the details:

            I have some big pages that has to break into several tabs, because it's very big, I don't want to use ajax/server mode, it's client mode (there are some hidden logic cross tabs), so tab 1 has a field, it will disable/enable tab 3 if checked/unchecked, so the the page rendering response will be something like this:

             

            <partial-response><changes><update id="hzAjaxFrame"><![CDATA[<div id="hzAjaxFrame">...<input name="AMTermsForm:stepUpInd" tabindex="14" id="AMTermsForm:stepUpInd" onclick="onClickStepUp()" type="checkbox" autocomplete="off">...

            <script type="text/javascript">

              jQuery(document).ready(function() {

            if (stepUpInd.isChecked()) {

            RichFaces.$('AMTermsForm:stepUpRates').disabled=true;

            }

            </script>

            </update>

            ...

            <extension id="org.richfaces.extension"><complete>new RichFaces.ui.TabPanel(&quot;AMTermsForm:AMTermsTabPanel&quot;,{&quot;onitemchange&quot;:function(event){FocusFirstElFixed(event);},&quot;onbeforeitemchange&quot;:function(event){return validateFirstFixed(event);},&quot;activeItem&quot;:&quot;information&quot;,&quot;cycledSwitching&quot;:false,&quot;ajax&quot;:{&quot;incId&quot;:&quot;1&quot;} ,&quot;isKeepHeight&quot;:false} );new RichFaces.ui.Tab(&quot;AMTermsForm:information&quot;,{&quot;leave&quot;:null,&quot;name&quot;:&quot;information&quot;,&quot;index&quot;:0,&quot;togglePanelId&quot;:&quot;AMTermsForm:AMTermsTabPanel&quot;,&quot;disabled&quot;:false,&quot;enter&quot;:null,&quot;switchMode&quot;:&quot;client&quot;} );new RichFaces.ui.Tab(&quot;AMTermsForm:details&quot;,{&quot;leave&quot;:null,&quot;name&quot;:&quot;details&quot;,&quot;index&quot;:1,&quot;togglePanelId&quot;:&quot;AMTermsForm:AMTermsTabPanel&quot;,&quot;disabled&quot;:false,&quot;enter&quot;:null,&quot;switchMode&quot;:&quot;client&quot;} );new RichFaces.ui.Tab(&quot;AMTermsForm:stepUpRates&quot;,{&quot;leave&quot;:null,&quot;name&quot;:&quot;stepUpRates&quot;,&quot;index&quot;:2,&quot;togglePanelId&quot;:&quot;AMTermsForm:AMTermsTabPanel&quot;,&quot;disabled&quot;:false,&quot;enter&quot;:null,&quot;switchMode&quot;:&quot;client&quot;} );RichFaces.javascriptServiceComplete();;</complete></extension></changes></partial-response>

             

            and Since the Richfaces.ui.Tab('AMTermsForm:stepUpRates') is construct after the $.ready() function call, it broke on any browser, I have to setTimeout to delay the call of disable tab.

             

            Not sure the code you showed before is working, I'll try it.

            • 3. Re: Richfaces 4 tabPanel Object delay construction issue
              Michal Petrov Master

              You should be able to do this by calling the JavaScript function via the oncomplete attribute of an ajax listener. By that time the tab should be rendered. Note that simply assigning disabled=true will not affect the tab styling - i.e. it will not look disabled.

              • 4. Re: Richfaces 4 tabPanel Object delay construction issue
                Wang Liyu Apprentice

                I tried on the tab's oncomplete attribute, it doesn't work, I guess that will only work with ajax mode.

                • 5. Re: Richfaces 4 tabPanel Object delay construction issue
                  Michal Petrov Master

                  If the tab isn't involved in the ajax call then its oncomplete won't work. You could try attaching <a4j:ajax> to the inputbox.

                  • 6. Re: Richfaces 4 tabPanel Object delay construction issue
                    Wang Liyu Apprentice

                    Found an almost perfect spot to put the logic, Richfaces fire a event at the end of AJAX Response with RichFaces.javascriptServiceComplete(); the only thing is that this method only called when it's AJAX request, if it's normal GET/POST, it won't fire, Just wondering why is that?

                     

                    Another way around is that using Richfaces API in the pre render view event:

                     

                    For example:

                    JavaScriptService jsSvc = ServiceTracker.getService(event.getFacesContext(), JavaScriptService.class);

                            jsSvc.addPageReadyScript(event.getFacesContext(), new JSLiteral("log ('Javascript ready function here.');"));

                     

                    This will fire the event no matter it's AJAX or normal POST/GET, the only thing I don't like is my java code has to bound with RichFaces specific API that may change over the versions.

                     

                    any suggestion?