Solved

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

Posted on 2009-06-28
10
5,540 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
Comment Utility
Please need urgent help....
0
 
LVL 20

Expert Comment

by:Venabili
Comment Utility
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
Comment Utility
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
 
LVL 20

Expert Comment

by:Venabili
Comment Utility
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
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 20

Expert Comment

by:Venabili
Comment Utility
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
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Yeah - you need them dojo type.
Get it from where? And isn't this a separate question basically? :)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
instanceof  operator in java 26 70
scoresAverage challenge 8 74
array6 challenfge 6 62
word0 challenge 4 52
Introduction This article is the first of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article explains our test automation goals. Then rationale is given for the tools we use to a…
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.

763 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now