Win a copy of Practical SVG this week in the HTML/CSS/JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Hiding / Showing t:div Tomahawk component

 
ved gunjan
Ranch Hand
Posts: 86
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Experts
I'm new to the world of JSF and presently playing around with Apache MyFaces Tomahawk JSF implementation.
Im trying this scenario, which will be a requirment in my project.
I have a jsp page( main.jsp ) which contain 3 Tabs...(I have created these tabs using css) in its menu.

Now when the user clicks on any one of the tab, i want to display the content of that tab in the same page(i.e main.jsp)
Im planning to include the content of these tabs as
<jsp:include />

So in the main.jsp, i have used <t:div> tag and inside this i have placed the individual <jsp:include >

Sumthing like this...

<t:div id="tab1">
<f:subview id="opt_1">
<jsp:include page="optionsPanel.jsp"/>
</f:subview>
<t:div>
---------------------
<t:div id="tab2">
<f:subview id="opt_2">
<jsp:include page="optionsPanel_2.jsp"/>
</f:subview>
<t:div>
-------------------
<t:div id="tab3">
<f:subview id="opt_3">
<jsp:include page="optionsPanel_3.jsp"/>
</f:subview>
<t:div>

So when the user clicks on any of the tabs, i'm calling a _javascript, through which i'm displaying the respective <t:div> and hiding the other two.

This is my java script...

funtion toggleTab(sTab)
{
if(sTab==1)
{
tab1.style.display='block';
tab2.style.display='none';
tab3.style.display='none';
}
..........
...........

}

The problem is im not able to get the desired results.There is no action only.
Please guide me as to what im doing wrong and more importantly wht is the more proper approach to acheive the scenario.

Any help will be great.

Thanks
Ved
 
Patricio Hervas
Greenhorn
Posts: 16
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi.

I think you probably have some issues in your jscript.

first, unless you use the "forceId=true" property in your tomahawk
tags, the id's of your tags would be "form:id", so instead of refering
in the script of "div1.style" you would have to use "form1:div1.style"

then, i think (im not that sure though) that you might want to use
"document.getElementById('form1:div1').style.display" to change the
display properties

if you set the "forceId=true" then it would be
"document.getElementById('div1').style.display"

hope that helps

PAto
 
Onion rings are vegetable donuts. Taste this tiny ad:
the new thread boost feature: great for the advertiser and smooth for the coderanch user
https://coderanch.com/t/674455/Thread-Boost-feature
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!