views:

346

answers:

0

I am writing this post after reading the post on using jquery live. http://stackoverflow.com/questions/852450/adding-jquery-click-events-to-dynamically-added-content

I am using richfaces, jquery and custom component tree in my project. I am using vertical tabs in my project, that are created by adding specific classes to the items using jquery. I have a new requirement, where the tree and vertical tabs are not initially visible using c:if but become visible when selecting a rich:panelMenuItem. This triggers a jquery event live('click',function()) that adds the custom style classes to the tab.

But it does not work that way.

  1. When a panelMenuItem is selected, the custom component tree loads correctly but style class for the tabs are not added and hence looks like the following

alt text

  1. When i do debug of the jquery step wise, the style of the tab works but the tree is not visible.

alt text

rich:panelMenuItem

<rich:panelMenuItem label="#{item.label}" 
   action="#{treePathLoaderBean.loadModule}" 
   reRender="treeVisibility, treePanelGrid" 
   icon="../resources/images/Module.png" 
   styleClass="bbq-item, moduleClass">
</rich:panelMenuItem>

Tab

 <c:if test="#{treePathLoaderBean.workspaceTreeVisibility}"> 
    ........   
    <div id="tabsLeft">
     <ul>
        <li><a id="tab1Left" onclick="filterTree('LOD1');">
                       <strong>OVERVIEW</strong>
             </a>
        </li>
        <li><a id="tab2Left" onclick="filterTree('LOD2');">
                  <strong>CONTENT</strong>
            </a>
        </li>
        <li><a id="tab3Left" onclick="filterTree('LOD3');">
                   <strong>REFERENCE</strong>
            </a>
        </li>
    </ul>

jQuery that is supposed to be triggered when clicked on the rich:panelMenuItem

 <rich:jQuery selector=".moduleClass" 
              query="live('click', function() {
      jQuery('#tabsLeft').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
             });">
 </rich:jQuery>