Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

<s:tabbedPanel > enable and disable tabs on button click in struts2

Posted on 2009-06-28
10
Medium Priority
?
5,756 Views
Last Modified: 2013-11-24
Hi Can i get some code how to enable and disable a tab in struts tabbed panel.

I have three tabs in tabbed panel ..default show will have two tabds showed before button click and after button click the first and third will be visible ,disabling the second tab..


 <s:tabbedPanel id="test2" theme="simple" cssStyle="width: 500px; height: 300px;" doLayout="true" closeButton="pane"  useSelectedTabCookie="true">
                       <s:div id="one" label="test1" theme="ajax" >
                           I'm a Tab!!!
                       </s:div > 
                       <s:div  id="two" label="test2"  theme="ajax" disabled="trie" >
                           I'm the other Tab!!!
                       </s:div >
                       <s:div  id="three" label="test2"  theme="ajax" disabled="true" >
                           I'm the other Tab!!!
                       </s:div ></s:tabbedPanel>

 <s:submit onclick="enabledisable()" />

Please i need this urgent...
0
Comment
Question by:pothireddysunil
  • 5
  • 5
10 Comments
 
LVL 1

Author Comment

by:pothireddysunil
ID: 24737311
Please need urgent help....
0
 
LVL 20

Expert Comment

by:Venabili
ID: 24738072
Two things:
1. Having a div with the same IDas the tabbed pane is a recipe for disaster (see below how it is changed)
2. Depending on what version you are using, something like the code below shoould do it.
And after this:

 <s:submit onclick="enableTab('two')"/>
for example (or whatever you want to do... not quite sure why you need submits at all - I would do something like:
<input type="button" onclick="enableTab('two')" value="Tab2" /> (and you can add a few more invocation inside - disabling 2 and enabling 1 and 3 for example
<script type="text/javascript">
   function enableTab(param) {
      var tabContainer = dojo.widget.byId('test2');
      tabContainer.enableTab(param);
   }
    
   
   function disableTab(param) {
      var tabContainer = dojo.widget.byId('test2');
      tabContainer.disableTab(param);
   }
</script>

Open in new window

0
 
LVL 1

Author Comment

by:pothireddysunil
ID: 24747572
thank you Venabil for the quick responce.I have requirement for displaying values in two tabs as default and on submit - calling an action  which is called as refresh will enable the thrid tab ,disabling the second tab.

I have developed the sample code putting two button ..but it is not working please help..


also i found the code here  http://yueguc.javaeye.com/blog/314303 ..but it is not working for me..


<script type="text/javascript">
            function enableTab(param) {
                var tabContainer = dojo.widget.byId('test2');
                tabContainer.enableTab(param);
            }
    
            function disableTab(param) {
                var tabContainer = dojo.widget.byId('test2');
                tabContainer.disableTab(param);
        </script>
    </head>
    <body>
<input type="button" onclick="enableTab('one')" value="Enable Tab 2 using widget" />
<input type="button" onclick="disableTab('three')" value="Disable Tab 2 using widget" />
        <s:tabbedPanel id="test" >
            <s:div id="one" label="Current Clinician" theme="ajax">
                <display:table  name="loaddata1" id="row1" >
                    <display:column property="tvShow" title="TV Show" />
                    <display:column property="userName" title="User Name" />
                    <display:column property="emailId" title="Email Id" />
                </display:table>
 
 
            </s:div>
 
            <s:div id="two"  theme="ajax" label="Other Clinician">
                <display:table  name="loaddata2" id="row2">
                    <display:column property="tvShow" title="TV Show" />
                    <display:column property="userName" title="User Name" />
                    <display:column property="emailId" title="Email Id" />
                </display:table>
            </s:div>
 
            <s:div id="three"  theme="ajax" label="All Patient Information" disabled="true">
                <display:table  name="loaddata3" id="row3">
                    <display:column property="tvShow" title="TV Show" />
                    <display:column property="userName" title="User Name" />
                    <display:column property="emailId" title="Email Id" />
                </display:table>
            </s:div>
 
        </s:tabbedPanel>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 20

Expert Comment

by:Venabili
ID: 24750153
That was an example usage - you need to get the invocations correctly
Let's see first if the approach works - what happens if you change
<input type="button" onclick="enableTab('one')" value="Enable Tab 2 using widget" />
to
<input type="button" onclick="enableTab('one');disableTab('two');disableTab('three')" value="Enable Tab 2 using widget" />
and you click the button?
0
 
LVL 1

Author Comment

by:pothireddysunil
ID: 24754100
Venabili ,i tried the code change.I did'nt notice any error nor anything in Mozilla.But in IE i found error ..it shows at the line declared for the <s:tabbed panel>
I'm attaching the code what i have till now...

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib uri="/WEB-INF/displaytag.tld" prefix="display" %>
<html>
    <head>
        <s:head theme="ajax" />
      
        <script type="text/javascript">
 
function comm_direct_change(checked){
     document.getElementById('direct').style.display = checked?"block":"none";
}
 
            function enableTab(param) {
                var tabContainer = dojo.widget.byId('test2');
                tabContainer.enableTab(param);
            }
    
            function disableTab(param) {
                var tabContainer = dojo.widget.byId('test2');
                tabContainer.disableTab(param);
            }
        </script>
         <style type="text/css">
            div#direct{
                display: none;
                visibility:hidden;
            }
        </style>
    </head>
    <body>
  <input type="button" onclick="enableTab('one');disableTab('two');disableTab('three')" value="Enable Tab 2 using widget" />
  <s:tabbedPanel id="test" name="test12" closeButton="true" selectedTab="true">
            <s:div id="one" label="Current Clinician" theme="ajax" >
                 <input type="checkbox" onclick="comm_direct_change(this.checked)">Show
                <display:table  name="loaddata1" id="row1" >
                    <div   id="direct" >  <display:column property="tvShow" title="TV Show" />    </div>
                    <display:column property="userName" title="User Name" />
                    <display:column property="emailId" title="Email Id" />
                </display:table>
 
 
            </s:div>
 
            <s:div id="two"  theme="ajax" label="Other Clinician">
                <display:table  name="loaddata2" id="row2">
                    <display:column property="tvShow" title="TV Show" />
                    <display:column property="userName" title="User Name" />
                    <display:column property="emailId" title="Email Id" />
                </display:table>
            </s:div>
 
            <s:div id="three"  theme="ajax" label="All Patient Information" disabled="true">
                <display:table  name="loaddata3" id="row3">
                    <display:column property="tvShow" title="TV Show" />
                    <display:column property="userName" title="User Name" />
                    <display:column property="emailId" title="Email Id" />
                </display:table>
            </s:div>
 
        </s:tabbedPanel>
 
 
 
</html>
 
 
 
struts action class
 
 
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package example;
 
import com.opensymphony.xwork2.ActionSupport;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;
 
/**
 *
 * @author D074710
 */
public class tabbeddemo extends ActionSupport {
 
    private List loaddata1 = null;
    private List loaddata2 = null;
    private List loaddata3 = null;
 
    public String execute() throws Exception {
      this.setLoaddata1(this.LoadData1());
       this.setLoaddata2(this.LoadData2());
        this.setLoaddata3(this.LoadData3());
        return SUCCESS;
    }
 
    public String setterLoadData1() {
        this.setLoaddata1(this.LoadData1());
        return SUCCESS;
    }
 
    public String setterLoadData2() throws ClassNotFoundException, SQLException {
        this.setLoaddata2(this.LoadData2());
        return SUCCESS;
    }
 
    public String setterLoadData3() {
        this.setLoaddata3(this.LoadData3());
        return SUCCESS;
    }
 
    public List LoadData1() {
        List actorList = new ArrayList();
        actorList.add(new ActorData("The Office1", "Michael Scott", "michael.scott@dundermifflin.com"));
        actorList.add(new ActorData("The Office1", "Dwight Schrute", "dwight.schrute@dundermifflin.com"));
        actorList.add(new ActorData("The Office1", "Jim Halpert", "jim.halpert@dundermifflin.com"));
        actorList.add(new ActorData("The Office1", "Pam Beesly", "pam.beesly@dundermifflin.com"));
        actorList.add(new ActorData("The Office1", "Andy Bernad", "andy.bernad@dundermifflin.com"));
        actorList.add(new ActorData("The Office1", "Angela Martin", "angela.martin@dundermifflin.com"));
        actorList.add(new ActorData("Friends1", "Rachel Green", "rachel.green@friends.com"));
        actorList.add(new ActorData("Friends1", "Monica Geller", "monica.geller@friends.com"));
        actorList.add(new ActorData("Friends1", "Phoebe Buffay", "phoebe.buffay@friends.com"));
        actorList.add(new ActorData("Friends1", "Joey Tribbiani", "joey.tribbiani@friends.com"));
        actorList.add(new ActorData("Friends1", "Chandler Bing", "chandler.bing@friends.com"));
        actorList.add(new ActorData("Friends1", "Ross Geller", "ross.geller@friends.com"));
        return actorList;
    }
 
  public List LoadData2() {
        List actorList = new ArrayList();
        actorList.add(new ActorData("The Office2", "Michael Scott", "michael.scott@dundermifflin.com"));
        actorList.add(new ActorData("The Office2", "Dwight Schrute", "dwight.schrute@dundermifflin.com"));
        actorList.add(new ActorData("The Office2", "Jim Halpert", "jim.halpert@dundermifflin.com"));
        actorList.add(new ActorData("The Office2", "Pam Beesly", "pam.beesly@dundermifflin.com"));
        actorList.add(new ActorData("The Office2", "Andy Bernad", "andy.bernad@dundermifflin.com"));
        actorList.add(new ActorData("The Office2", "Angela Martin", "angela.martin@dundermifflin.com"));
        actorList.add(new ActorData("Friends2", "Rachel Green", "rachel.green@friends.com"));
        actorList.add(new ActorData("Friends2", "Monica Geller", "monica.geller@friends.com"));
        actorList.add(new ActorData("Friends2", "Phoebe Buffay", "phoebe.buffay@friends.com"));
        actorList.add(new ActorData("Friends2", "Joey Tribbiani", "joey.tribbiani@friends.com"));
        actorList.add(new ActorData("Friends2", "Chandler Bing", "chandler.bing@friends.com"));
        actorList.add(new ActorData("Friends2", "Ross Geller", "ross.geller@friends.com"));
        return actorList;
    } 
 /*
 public List LoadData2()  throws ClassNotFoundException, SQLException, SQLException {
        List dataList = new ArrayList();
        StringBuffer eQuery = new StringBuffer();
        String clinicianId = "1117161";
        String s1 = "SELECT e.clinicianname,e.epinumber,e.Site_ID, e.clinician_id,e.client_id,e.nickname,e.gds,e.symptoms,e.harm,e.function,e.social,e.sa, e.alliance,e.gds_assess_num1,e.fdate,e.recentdate,e.assess_num,e.changescore,e.gdstarget,e.benchmarkscore,e.testid,e.status,g.resource_id FROM episodes e ,groupclinicians g where e.clinician_id =" + clinicianId;
        String s2 = " group by e.epinumber order by e.benchmarkscore,e.gds desc";
        eQuery.append(s1);
        eQuery.append(s2);
         System.out.println("The Clinician Query"+eQuery );
 
        ResultSet rsMainQuery = graphUtil.getResultSet(eQuery.toString());
      //  ResultSet rsmainQuery1 = rsMainQuery;
        DisplayData LoadData;
        DateFormat df = new SimpleDateFormat("MM/dd/yyyy");
        while (rsMainQuery.next()) {
            LoadData = new DisplayData();
            LoadData.setClinicianname(rsMainQuery.getString("clinicianname"));
        //    System.out.println(""+rsMainQuery.getString("clinicianname"));
            LoadData.setClinicianid(((int) rsMainQuery.getDouble("clinician_id")));
          //   System.out.println(""+rsMainQuery.getString("clinician_id"));
            LoadData.setClientid(((int) rsMainQuery.getDouble("client_id")));
          //   System.out.println(""+rsMainQuery.getString("client_id"));
            LoadData.setNickname(rsMainQuery.getString("nickname"));
           ///  System.out.println(""+rsMainQuery.getString("clinicianname"));
           //   System.out.println(""+rsMainQuery.getString("clinicianname"));
            LoadData.setGdsscore((rsMainQuery.getDouble("gds")));
           //  System.out.println(""+rsMainQuery.getString("clinicianname"));
            LoadData.setRecentdate(df.format(rsMainQuery.getDate("recentdate")));
            // System.out.println(""+rsMainQuery.getString("clinicianname"));
            LoadData.setSymptoms((rsMainQuery.getDouble("symptoms")));
          //   System.out.println(""+rsMainQuery.getString("clinicianname"));
            LoadData.setHarm((rsMainQuery.getDouble("harm")));
           //  System.out.println(""+rsMainQuery.getString("clinicianname"));
            LoadData.setFunction1((rsMainQuery.getDouble("function")));
            LoadData.setSocial((rsMainQuery.getDouble("social")));
            LoadData.setSa((rsMainQuery.getDouble("sa")));
            LoadData.setAlliance((rsMainQuery.getDouble("alliance")));
            LoadData.setGdsassessnum1((rsMainQuery.getDouble("gds_assess_num1")));
            LoadData.setAssessnum((rsMainQuery.getDouble("assess_num")));
            LoadData.setChangescore((rsMainQuery.getDouble("changescore")));
            LoadData.setGdstarget((rsMainQuery.getDouble("gdstarget")));
            LoadData.setBenchmarkscore((rsMainQuery.getDouble("benchmarkscore")));
            LoadData.setTestid((rsMainQuery.getDouble("testid")));
            LoadData.setStatus((rsMainQuery.getString("status")));
            LoadData.setEpinum((int)rsMainQuery.getDouble("epinumber"));
            System.out.println("the Clinician Load data is done" );
            dataList.add(LoadData);
 
        }
 
 
        return dataList;
    }
*/
 
    public List LoadData3() {
        List actorList = new ArrayList();
        actorList.add(new ActorData("The Office3", "Michael Scott", "michael.scott@dundermifflin.com"));
        actorList.add(new ActorData("The Office3", "Dwight Schrute", "dwight.schrute@dundermifflin.com"));
        actorList.add(new ActorData("The Office3", "Jim Halpert", "jim.halpert@dundermifflin.com"));
        actorList.add(new ActorData("The Office3", "Pam Beesly", "pam.beesly@dundermifflin.com"));
        actorList.add(new ActorData("The Office3", "Andy Bernad", "andy.bernad@dundermifflin.com"));
        actorList.add(new ActorData("The Office3", "Angela Martin", "angela.martin@dundermifflin.com"));
        actorList.add(new ActorData("Friends3", "Rachel Green", "rachel.green@friends.com"));
        actorList.add(new ActorData("Friends3", "Monica Geller", "monica.geller@friends.com"));
        actorList.add(new ActorData("Friends3", "Phoebe Buffay", "phoebe.buffay@friends.com"));
        actorList.add(new ActorData("Friends3", "Joey Tribbiani", "joey.tribbiani@friends.com"));
        actorList.add(new ActorData("Friends3", "Chandler Bing", "chandler.bing@friends.com"));
        actorList.add(new ActorData("Friends3", "Ross Geller", "ross.geller@friends.com"));
        return actorList;
    }
 
    /**
     * @return the loaddata1
     */
    public List getLoaddata1() {
        return loaddata1;
    }
 
    /**
     * @param loaddata1 the loaddata1 to set
     */
    public void setLoaddata1(List loaddata1) {
        this.loaddata1 = loaddata1;
    }
 
    /**
     * @return the loaddata2
     */
    public List getLoaddata2() {
        return loaddata2;
    }
 
    /**
     * @param loaddata2 the loaddata2 to set
     */
    public void setLoaddata2(List loaddata2) {
        this.loaddata2 = loaddata2;
    }
 
    /**
     * @return the loaddata3
     */
    public List getLoaddata3() {
        return loaddata3;
    }
 
    /**
     * @param loaddata3 the loaddata3 to set
     */
    public void setLoaddata3(List loaddata3) {
        this.loaddata3 = loaddata3;
    }
}
 
 
Actor data
 
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package example;
 
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
 
/**
 *
 * @author eswar@vaannila.com
 */
public class ActorData implements Serializable  {
 
    private String tvShow;
    private String userName;
    private String emailId;
 
    public ActorData()
    {
        
    }
    
    public ActorData(String tvShow, String userName, String emailId)
    {
        this.tvShow = tvShow;
        this.userName = userName;
        this.emailId = emailId;
    }
 
 
 
    /**
     * @return the tvShow
     */
    public String getTvShow() {
        return tvShow;
    }
 
    /**
     * @return the userName
     */
    public String getUserName() {
        return userName;
    }
 
    /**
     * @return the emailId
     */
    public String getEmailId() {
        return emailId;
    }
  
}

Open in new window

error.bmp
0
 
LVL 20

Expert Comment

by:Venabili
ID: 24754516
You changed the if of your pane from test2 to test at one point. The JS is still searching test (I cannot see which line you have this error on and when exactly it happens but I guess this is it). Either fix the JS methods, or your tabbedPane ID.
0
 
LVL 1

Author Comment

by:pothireddysunil
ID: 24756551
Friend i changed the  tabbedpanel id to test and tried to execute it.But still nothing happens...
It shows error at the <s:tabbedpanel >  id ..i have changed id to test but still no luck
0
 
LVL 20

Accepted Solution

by:
Venabili earned 1500 total points
ID: 24757283
And what is the ID here:
var tabContainer = dojo.widget.byId('test2'); ?
If the tabbedPane ID is test, this one should also be test.

WHEN exactly do you see the error? On loading? When you press the button? When the temperature goes over 30 degrees Celsius? (the last one was a joke - do not get offended please)

Oh and change:
selectedTab="true">
to the ID of the panel that you need to be selected initially :) You do not have a panel with id true. I suspect that this is the error that you see
0
 
LVL 1

Author Comment

by:pothireddysunil
ID: 24759200
I got this working ..but i have to change the tabbed panel to dojo tabbed panel  
sx.tabbedpanel.

i have one request here....how can i get the selected tabs in the tabcontainer.
0
 
LVL 20

Expert Comment

by:Venabili
ID: 24761766
Yeah - you need them dojo type.
Get it from where? And isn't this a separate question basically? :)
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is the last of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers our test design approach and then goes through a simple test case example, how …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to implement Singleton Design Pattern in Java.
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.

927 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question