Ajax4Jsf vs AjaxAnywhere: The t:dataTable and t:dataScroller

Submitting with Ajax4Jsf

On Dec 6, Ajax4Jsf released a maintenance release (ajax4jsf-1.0.4MR1.jar which fixed an IE javascript problem not in this post) - But the framework is still a little buggy dealing with the datascroller components. On a good note, Adrian Mitev gave his custom ajaxDataScroller to the A4J project and will hopefully get everything working in both browsers. ***UPDATE - Here is the latest version of the datascroller from Adrian. I had to rename the extension to .jar instead of .zip for upload reasons. If you have trouble extracting, just rename the file to .zip. Adrian says "Actually the attributes of ac:ajaxDataScroller tag differs from the attributes of t:dataScroller. You don't have paginatorMaxPages="9", the attribute is maxPages."

<a4j:form ajaxSubmit="true" reRender="carList,carIndex,scroll_1"> 
 
            <a4j:region id="stat1"> 
 
                <a4j:outputPanel id="list-body"> 
 
                    <t:dataTable id="carIndex"...> 
 
                    <t:dataTable id="carList"...> 
 
                </a4j:outputPanel> 
 
                <t:dataScroller id="scroll_1" 
                        for="carList" 
                        fastStep="10" 
                        pageCountVar="pageCount" 
                        pageIndexVar="pageIndex" 
                        styleClass="scroller" 
                        paginator="true" 
                        paginatorMaxPages="9" 
                        paginatorTableClass="paginator" 
                        paginatorActiveColumnStyle="font-weight:bold;" 
                        actionListener="#{inventoryList.scrollerAction}" 
                        > 
                </t:dataScroller> 
 
                <a4j:status for="stat1" forceId="true" id="ajaxStatus"...> 
 
             </a4j:region> 
 
 
        </a4j:form> 

The above code is functional in Firefox 1.5+ but not in IE 6+. The only bug in Firefox (that I've seen so far) is that a selected status/style on the page number link, once it has been clicked, does not appear. It looks like the component itself is not being reRendered, although it is specified in the a4j:form tag. Other than that, Sergey, Alex, and crew have been doing an awesome job answering posts and getting the maintenance releases out... keep em' coming guys!

The paging doesn't work at all in IE - it has to be something small...

Submitting with AjaxAnywhere

As much as I would love to stick with one ajax framework across the entire app, we have to have a fallback plan. AjaxAnywhere has been a life saver getting the Tomahawk components submitting. The only downfall with this framework is that you are limited no partial page updates, and nowhere near the capabilities/enhancements that A4J has...

The following code does the Ajax submit in both browser with all components working like they should. Using the A4J:status together with a custom "loading..." window with aa took some hackery, but I was able to get both working (in next post I will explain)

<h:form id="mainForm"> 
 
                <aa:zoneJSF id="dataTableZone"> 

                         
                <a4j:region id="stat1"> 
     
                <a4j:outputPanel id="list-body"> 
                <t:dataTable...> 
                </a4j:outputPanel> 

     
                        <a4j:status for="stat1" forceId="true" id="ajaxStatus"...> 
     
                 </a4j:region> 
     

                <t:dataScroller id="scroll_1"...> 
 
            </aa:zoneJSF> 
 
        </h:form> 
 

        <script type="text/JavaScript" src="/facelet-sandbox/aa.js"/> 
 
         <script type="text/JavaScript"> 
 
            ajaxAnywhere.getZonesToReload = function(url, submitButton) { 

                return 'dataTableZone'; 
            } 
 
            ajaxAnywhere.formName = 'mainForm'; 
            ajaxAnywhere.substituteFormSubmitFunction(); 
            ajaxAnywhere.substituteSubmitButtonsBehavior(true); 

           
        </script> 

One more thing, the reason I am nesting an a4j:outputPanel in the above code is for a4j:commandLinks inside the form. So far I haven't had any problems with both frameworks playing nicely together