0 Replies Latest reply on Oct 3, 2012 12:11 PM by Roberto Contiero

    Problem with ExtendedDataTable and <ui:include>

    Roberto Contiero Newbie



      I have a facelet page with a template and a <rich:tabPanel>. The first tab contains an extendedDataTable that is included with an <ui:include> tag. My code is the following:



                <ui:composition template="/pages/template/main.xhtml">

                          <ui:define name="content">

                                    <rich:notifyMessages stayTime="3000" globalOnly="true" />


                                    <h:outputStylesheet library="css" name="jquery-ui-progressbar.css" />

                                    <h:outputScript library="js" name="modernizr.js" target="head" />

                                    <h:outputScript library="js" name="jquery-ui-progressbar.js" target="head" />

                                    <h:outputScript target="head">


                                                        if ((!jQuery.browser.msie || (jQuery.browser.msie  && parseInt(jQuery.browser.version, 10) >= 10)) && Modernizr.draganddrop) {

                                                          // Browser supports HTML5 DnD.

                                                          var globalObject = {

                                                                              callbacks: new Array(),

                                                                              startUpload: true, //This variable regulates file upload if user adds files while an upload is in progress

                                                                              currentXMLHttpRequest: undefined,

                                                                              bitrateTimestamp: undefined,

                                                                              progressBarId: '#{rich:clientId('uploadProgressbar')}',

                                                                              progressBarContainerId: '#{rich:clientId('uploadProgressbarContainer')}'


                                                          jQuery(document).ready(function() {

                                                                      jQuery('.dropRegion').on('dragover', handleDragOver);

                                                                      jQuery('.dropRegion').on('drop', handleDrop);

                                                                      jQuery('#' + escapeJsfId('#{rich:clientId('uploadProgressbar')}')).progressbar({ value: 0 });


                                                        } else {

                                                                    // Disable Drag & Drop of files from desktop

                                                                    jQuery(document).ready(function() {

                                                                              jQuery('#' + escapeJsfId('#{rich:clientId('tryOtherBrowser')}')).show();





                                    <h:outputScript library="js" name="dragAndDrop.js" target="head" />


                                    <h:form id="tabPanelForm">

                         <a4j:jsFunction name="fileTabAction"

                                                        action="#{fileManagerControllerBean.retrieve}" render="fileTab" />

                                              <a4j:jsFunction name="usersTabAction"

                                                        action="#{userListControllerBean.retrieve}" render="usersTab" />

                                              <a4j:jsFunction name="sharingTabAction"

                                                        action="#{trackingDataControllerBean.retrieve}" render="sharingTab" />

                                              <a4j:jsFunction name="invoicesTabAction"

                                                        action="#{invoicesControllerBean.retrieve}" render="invoicesTab" />



                                              <rich:tabPanel id="tabPanel" switchType="ajax" activeItem="#{tabPanelBackingBean.activeTab}"

                                                        tabHeaderClass="tabHeader" styleClass="tabPanel">

                                                        <rich:tab id="fileTab" name="file" onenter="fileTabAction();"


                                                                  <f:facet name="header">

                                                                            <h:panelGrid columns="2">

                                                                                      <h:graphicImage library="images" name="file_tab.png"

                                                                                                styleClass="tab_images" />

                                                                                      <h:outputText value="#{label['homeTabPanel.files']}" />





                                                                  <ui:include src="/pages/fileManager.xhtml" />






      If I put the code of the file "fileManager.xhtml" (that contains extendedDataTable code) directly inside the tab, the extendedDataTable works properly; on the other hand, if I put the table code on a separated file and include it with an <ui:include> (like in the code up here), the extendedDataTable generates a javascript error when navigate between tab. The error looks the same quoted into this bug https://issues.jboss.org/browse/RF-11948. In the attachment there is a screenshot of the error.

      Do you have any idea about this error?


      Thak you very much