0 Replies Latest reply on May 27, 2008 8:58 AM by ff fff

    reRender Problem of javascript widgets

    ff fff Newbie

      Hello,

      1) I am using javascript controls/widgets (dojo , ext js )
      2) These widgets are nested inside an a4j:outputPanel
      3) If that outputPanel gets reRendered, the widgets stops working

      This behaviour i could reproduce with any js widget - so i think its a very basic problem when using ajax4jsf and js widgets.
      I noticed richfaces controls dont have this problem (rich:tree for example,
      wil keep its state when reRender)

      Well i can only guess whats the reason andf why richfaces components show the right behaviour.Can you explain me this behaviour and maybe a hint how to reproduce that?

      Do i have to use the cdk to make my own jsf components?

      
      <h:form>
       <a4j:outputPanel id="updatePanel">
       value: #{testBean.value}
      
       //shows the desired behavior - tree keeps its state when rerendered
       <rich:tree style="width:300px" nodeSelectListener="#{simpleTreeBean.processSelection}"
       reRender="selectedNode" ajaxSubmitSelection="true" switchType="client"
       value="#{simpleTreeBean.treeNode}" var="item">
       </rich:tree>
      
       <br />
       <div id="tree" style="overflow:auto; border:1px solid #c3daf9;">
      
       </div>
      
       //shows the wrong behavior
       //will executed every time the sourrounding outputPanel get rerendered
       <script type="text/javascript">//<![CDATA[
       var myValue = #{testBean.value};
       var tree = new Ext.tree.TreePanel({
       el:'tree',
       loader: new Ext.tree.TreeLoader({
       dataUrl:'treedata.json',
       uiProviders:{
       'myUIProvider': Ext.tree.MyNodeUI
       }
       }),
       selModel: new Ext.tree.CheckNodeMultiSelectionModel(),
       height: '100%',
       animate:true,
       autoScroll:true,
       enableDD:false,
       containerScroll: true,
       dropConfig: {appendOnly:true}
       });
      
       // set the root node
       var root = new Ext.tree.AsyncTreeNode({
       text: 'Ext JS',
       draggable:false, // disable root node dragging
       id:'source'
       });
      
       tree.setRootNode(root);
      
       // render the tree
       tree.render();
       root.expand(false, /*no anim*/ false);
       //
       //]]>
       </script>
       </a4j:outputPanel>
      
       <a4j:commandLink action="#{testBean.testAction}"
       reRender="updatePanel"
       value="UPDATE"/>
       </h:form>
      
      


      Thank your very much,
      Holger