How to matching tabview component in server and client side with jsf?

Question

I have two question as below;

I have a Menu and submenus in left side of my page and a Tabview on center of my page. when click to menuItem, I add tab to tabview with javascript dynamically
but I can't get tabs of tabview from backing bean. I can read only first tabs before I added with javascript. so I want to match tabview at server side and client side synchronously.

how can i do this ?

and second; When I closed to tab, I use TabCloseEvent in onTabClose method but event is always null. May be it will be solved with matching tabview with server and client side i don't know.

codes are as below.

Please advise me.

thanks..

xhtml code :

<p:menuitem value="#{itemMenu.menuAck}" 
            action="#{MenuBean.OpenPage(itemMenu.pageName)}" 
            ajax="true"
            oncomplete="handleTabViewEvent(args);" />

<script type="text/javascript">
   function handleTabViewEvent(args) {
       alert('Add tab here..');
    }
</script>

bean code :

public void OpenPage(String pageName) {
     String s = "Divert to handleTabViewEvent function";
}

public void onTabClose(TabCloseEvent event) {  
     FacesContext context = FacesContext.getCurrentInstance();
     TabView tw = (TabView)context.getViewRoot().findComponent("centerForm:tw");
     String s = "I must delete tab here from tw which closed. 
                 But event does not give me tab information. It is always null. And tw has old values";
}

IF you add through javaScript a component on client side, it makes sense not to be available on server side. What exactly you do want to access from serverSide within that tab ? — tartak
General Idea You can use hidden input , populate it with new tab name , than process it with ajax to the server (use it on the server to generate a new tab) and update the tab container — Daniel
I want to add a tab with javascript but if user click same menu again, it should't add same tab. I hold opened tabs in session but when user close a tab, I can't get tab information which is closed. I must be remove this tab from session. How can i clear session in javascript? — CobanBeyi
If you just want to avoid double-opening the tab, you can do it on client side :) Set some cookies and check their value when you want to add/not add a tab. — tartak

BalusC BalusC · Accepted Answer · 2012-11-14T11:47:06

I add tab to tabview with javascript dynamically

This was completely wrong approached in first place.

You need to add the tab using JSF instead of using JS. Right now JSF is completely unaware about the changed client side state and will never know about the new tab. Any workaround would only end up to be uglier and harder to maintain than when just doing it by JSF instead of JS.

How to matching tabview component in server and client side with jsf?

1 Answers

See also: