Link to home
Start Free TrialLog in
Avatar of pothireddysunil
pothireddysunil

asked on

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

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...
Avatar of pothireddysunil
pothireddysunil

ASKER

Please need urgent help....
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

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

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?
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
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.
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
ASKER CERTIFIED SOLUTION
Avatar of Venabili
Venabili
Flag of Bulgaria image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
Yeah - you need them dojo type.
Get it from where? And isn't this a separate question basically? :)