Vineeth NG Vineeth NG - 3 months ago 17
jQuery Question

function call on update of component in jsf

I have a Treenode inside a form

<h:form id="form">
<p:panel styleClass="gridTree" id="gridTree" style="overflow:auto">
<p:tree value="#{permissionsBean.root}" var="node" dynamic="true" cache="true" id="permissionTree" >
<p:treeNode>
<h:outputText value="#{node}"/>
</p:treeNode>
</p:tree>
</p:panel>


To fix the height of the tree and add a scroll bar for the height i am changing the height in a script

$(document).ready(function(){
var windowHeight = $(window).height();
$('.gridTree').css('height',windowHeight-220+'px');
$(window).resize(function () {
windowHeight = $(window).height();
$('.gridTree').css('height',windowHeight-220+'px');
});
});


Now I am updating the form from the change event of a select one menu
update="@form"
.This will remove the height which was set in the document.ready function. So how can call a javascript function that will set the height of tree when the component is updated?

Answer

I don't know it is correct or not but if I use the 'onchange' attribute of ui component in JSF to call my resize function worked. I tried with the jQuery change function but it did not work.

         <p:selectOneMenu id="categoryName" value="#{permissionsBean.permissions.category}"  >
                <f:selectItem itemLabel="Select" itemValue="0" />
                <f:selectItems value="#{permissionsBean.permission}" var="perm" itemLabel="#{perm.category}" itemValue="#{perm.category}"/>
                <p:ajax event="change" update="msgs picklist @form"   listener="#{permissionsBean.handleCategoryChange}" oncomplete="resizeComp();"/>
        </p:selectOneMenu>