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.
- 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
- When i do debug of the jquery step wise, the style of the tab works but the tree is not visible.
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>