July 6, 2008 07:05pm pdt

1. rrz@871311 106,600
2. Kuldeepc... 55,240
3. mrcoffee365 39,785
4. CEHJ 35,224
5. cmalakar 31,268
6. mohammedf 29,775
7. summerian 23,300
8. objects 22,643
9. asanga_su 21,025
10. contactk... 20,000
11. hielo 19,900
12. araim 16,580
13. girionis 14,810
14. logudotcom 11,250
15. TimYates 10,400

1. bloodredsun 1,155,574
2. objects 619,756
3. TimYates 598,746
4. rrz@871311 473,695
5. Kuldeepc... 361,630
6. kennethxu 357,436
7. mrcoffee365 212,643
8. boonleng 201,140
9. jaggernat 197,407
10. fargo 190,519
11. actonwang 189,622
12. suprapto45 155,308
13. cheekycj 109,407
14. CEHJ 80,543
15. shivaspk 78,767

04.03.2008 at 09:01AM PDT, ID: 23293264

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

8.1

Add radio buttons to rows in a table generated dynamically from DB and capture selection

Zones: Java Server Pages (JSP), JavaScript, Dynamic HTML (DHTML)

Tags: JSP JavaScript HTML, IE6, IE7, Tomcat 4.1.31 datagrid datalist

NOTE: For further background on my project, you can refer to these questions:

http://www.experts-exchange.com/Programming/Languages/Java/J2EE/JSP/Q_23211660.html
and
http://www.experts-exchange.com/Programming/Languages/Java/J2EE/JSP/Q_23248964.html

I don't believe there is anything there relevent to this question, but I never assume.

ENVIRONMENT: I am integrating a legacy billing system and a web based help desk application on separate database. I am going to be calling JSP pages from the help desk to lookup data from the billing system and then return this to a web form on the help desk. The web app uses Tomcat 4.1.31 as the container. I have the data from my lookup being displayed in an HTML table for user confirmation. We have the results filtered as far as we can before they are displayed and the user must then select one of rows.

PROBLEM: The results table is generated programatically using the getColumnName() and getColumnCount() from ResultSetMetaData. I need to insert a radio button as the first element in each row and then be able to capture all the remaining elements in the row when it is selected.

I've tried to simply add the <INPUT type="radio"> inside the loop, but it keeps throwing off (shifting) the formatting OR it causes the loop to break by not finding the iterator.

I've tried searching for similar solutions here on EE and eleswhere, but they either don't apply because the table isn't generated in a similar way or they use datagrid / datalist packages which require a later version of Tomcat.

I think I can write a JavaScript function to capture the results once I have the group of buttons available, but this is a part of the question as well and points will be awarded based on the best complete answer or split / graded accordingly.

Attached is my entire code. The function in question is formatResult() but I am open to alternate approaches so please reference the relevent section if you propose one.

TIA,

'Breeze

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:

           
           
             <%-- Import libaries required for sql and parameter lists --%>
<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>
 
<HTML>
 
<HEAD> <TITLE> The Billing Code JSP  </TITLE>
</HEAD>
 
<BODY BGCOLOR=white>
 
<%-- Hard code connection string to DEVL for now --%>
    <%
        connStr = "jdbc:<host>:1521:<SID>";
    %>
 
 
    <B>Enter a Billing Code:</B>
    <FORM METHOD=post>
 
        <%= BCQuery(connStr) %>
        <INPUT TYPE="submit" VALUE="Enter Billing Code");
        <BR>
        <% String searchCondition = request.getParameter("cond");
        if (searchCondition != null) { %>
            <H3> Search results for Billing Code : <I> <%= searchCondition %> </I> </H3>
            <%= runQuery(connStr,searchCondition) %>
            <HR><BR>
        <% }  %>
     </FORM>
    <HR>
 
  <%-- Show parameter names and values - remove after testing --%>
    <B>Form Content</B><BR>
    <TABLE>
    <%  Enumeration parameters = request.getParameterNames();
        while(parameters.hasMoreElements()){
            String parameterName = (String)parameters.nextElement();
            String parameterValue = request.getParameter(parameterName); %>
    <TR>
        <TD><%=parameterName%></TD>
        <TD><%=parameterValue%></TD>
    </TR>
    <%  }   %>
 
</BODY>
</HTML>
 
<%-- Query and result formatting funtions --%>
<%!
private String BCQuery(String connStr) throws SQLException {
    Connection conn = null;
    Statement stmt = null;
    ResultSet rset = null;
    try {
        DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
        conn = DriverManager.getConnection(connStr,
                "user", "pwd");
 
        stmt = conn.createStatement();
 
        rset = stmt.executeQuery("SELECT ROLLUP_LEVEL3 FROM CWOF_ROLLUP_LEVEL3_VW ORDER BY ROLLUP_LEVEL3 ASC");
        return (htmlSelect(rset));
    } catch (SQLException e) {
        return ("<P> SQL error: <PRE> " + e + " </PRE> </P>\n");
    } finally {
        if (rset!= null) rset.close();
        if (stmt!= null) stmt.close();
        if (conn!= null) conn.close();
    }
}
 
private String runQuery(String connStr, String cond) throws SQLException {
    Connection conn = null;
    Statement stmt = null;
    ResultSet rset = null;
    try {
        DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
        conn = DriverManager.getConnection(connStr,
                "user", "pwd");
        stmt = conn.createStatement();
 
        rset = stmt.executeQuery("SELECT ROLLUP_LEVEL3 \"Billing Code\", DESCRIPTION \"Description\", ITEM_CODE \"Item Code\", INCOME_ACCOUNT \"Income Account\" FROM CWOF_BILLING_CODE_VW "+
                (cond.equals("") ? "" : "WHERE ROLLUP_LEVEL3=" +"'"  + cond + "'"));
        return (formatResult(rset));
    } catch (SQLException e) {
        return ("<P> SQL error: <PRE> " + e + " </PRE> </P>\n");
    } finally {
        if (rset!= null) rset.close();
        if (stmt!= null) stmt.close();
        if (conn!= null) conn.close();
    }
}
 
private String formatResult(ResultSet rset) throws SQLException {
    StringBuffer sb = new StringBuffer();
    ResultSetMetaData metaData = rset.getMetaData();
    int columnCount = metaData.getColumnCount();
 
    sb.append("<table border=\"1\" cellpadding=\"5\">");
    sb.append("<tr>");
        for (int i = 1; i <= columnCount; i++)
            sb.append("<td><b>" + metaData.getColumnName(i) + "</td>");
        sb.append("</tr>");
 
        while (rset.next()){
            sb.append("<tr>");
            for (int i = 1; i <= columnCount; i++)
                sb.append("<td>" + rset.getString(i) + "</td>");
        }
        sb.append("</tr>");
        sb.append("</TABLE>");
        return sb.toString();
}
 
 
private String htmlSelect(ResultSet rset ) throws SQLException {
    StringBuffer sb = new StringBuffer();
    if(rset.next()){
        sb.append("<SELECT NAME='cond' SIZE='1'>");
        do {
            sb.append("<OPTION>" + rset.getString(1) +   "</OPTION>");
        } while (rset.next());
        sb.append("</SELECT>");
    }
    return sb.toString();
}
 
%>

           
         

Start your free trial to view this solution

Question Stats

Zone: Programming

Question Asked By: shadowbreeze

Solution Provided By: nschafer

Participating Experts: 2

Solution Grade: A

Translate:

Loading Advertisement...

Microsoft

Internet Protocols
Applications

Development
OS

Hardware
Windows Security

Apple

Operating Systems
Hardware

Programming
Networking

Software

Internet

Search Engines
File Sharing
WebTrends / Stats
Spy / Ad Blockers

Web Browsers
New Net Users
Web Development
Chat / IM

Anti Spam
Web Servers
Anti-Virus
Email Clients

Gamers

Tips
Online / MMORPG
Puzzle
Emulators

Action / Adventure
Role Playing
Consoles
Game Programming

Strategy
Sports
Misc
Computer Games

Digital Living

Hardware
New Net Users
New Users

Software
Digital Music
Gaming World

Home Security
Apple
Networking Hardware

Virus & Spyware

Vulnerabilities
IDS
Encryption
Anti-Virus

Operating Systems Security
Software Firewalls
WebApplications
Cell Phones

Operating Systems
Internet
Hardware Firewalls

Hardware

Handhelds / PDAs
Displays / Monitors
Components
Networking Hardware

Peripherals
Laptops/Notebooks
Storage
Servers

Desktops
New Users
Misc
Apple

Software

System Utilities
Industry Specific
Network Management
Photos / Graphics
Page Layout
VMWare
Misc
Web Development

OS
CYGWIN
Voice Recognition
Message Queue
Quality Assurance
Security
Firewalls
MultiMedia Applications

Development
Database
Office / Productivity
Business Management
OS/2 Apps
Server Software
Internet / Email

ITPro

OS
Storage
Encryption
Operating Systems Security
Apple Hardware
Laptops & Notebooks
Servers
Networking Hardware
Peripherals

Devices
Displays / Monitors
WebTrends / Stats
Search Engines
Firewalls
WebApplications
IDS
Vulnerabilities
Email Clients

File Sharing
Spy / Ad Blockers
Web Browsers
Web Servers
Networking
Anti-Virus
Chat / IM
Anti Spam

Developer

Web Servers
Web Browsers
Game Programming
Dev Tools
Industry Specific
Office / Productivity

Database
CYGWIN
Web Development
Search Engines
File Sharing
WebTrends / Stats

Programming
Content Management
Application Servers
Protocols

Storage

Removable Backup Media
Storage Technology
Servers

Grid
Remote Access
Backup / Restore

Misc
Hard Drives

Miscellaneous
Security
Development
Linux
VMWare

MainFrame OS
Unix
Apple
OS / 2
AS / 400

BeOS
Microsoft
VMS / OpenVMS

Database

Oracle
Miscellaneous
MySQL
Software
Sybase
Contact Management
PostgreSQL
Data Manipulation
Clarion
InterSystems Cache

Siebel
MUMPS
OLAP
SQLBase
SAS
GIS & GPS
4GL
Berkeley DB
DB2
Informix

Interbase / Firebird
FoxPro
Reporting
LDAP
Filemaker Pro
MS SQL Server
dBase
MS Access

Security

Misc
Web Browsers
Software Firewalls
Operating Systems Security
File Sharing

Spy / Ad Blockers
Vulnerabilities
WebApplications
IDS
Anti-Virus

Encryption
Anti Spam
Email Clients
VPN
Chat / IM

Programming

Editors IDEs
Installation
Handhelds / PDAs
Multimedia Programming
System / Kernel

Algorithms
Game
Signal Processing
Project Management
Open Source

Database
Misc
Languages
Processor Platforms
Theory

Web Development

Scripting
Blogs
Web Servers
Software
Search Engines
Web Graphics
Images

Internet Marketing
Images and Photos
Components
Document Imaging
Web Languages/Standards
Illustration
WebApplications

Fonts
WebTrends / Stats
Authoring
Digital Camera Software
Miscellaneous

Networking

Protocols
Apple Networking
Network Management
Message Queue
Application Servers
Content Management
File Servers
Email Servers
Misc
Java Editors & IDEs

Wireless
Networking Hardware
Backup / Restore
System Utilities
ISPs & Hosting
Web Servers
Storage Technology
Removable Backup Media
Servers
Broadband

Grid
OS / 2
Novell Netware
Unix Networking
Windows Networking
Security
Telecommunications
Operating Systems
Linux Networking

Other

Community Advisor
Lounge
Community Support
New Net Users

Philosophy / Religion
Math / Science
Miscellaneous
URLs

Expert Lounge
Politics
Puzzles / Riddles

Community Support

Suggestions
New to EE
New Topics
Community Advisor

CleanUp
Announcements
General

Feedback
Input
EE Bugs

04.03.2008 at 09:38AM PDT, ID: 21274360

ravs:

I have given a simplistic solution - changes marked by comments prefixed with Ravs. Is this what you tried and caused the formatting to break up?

Ravs

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:

           
           
             private String formatResult(ResultSet rset) throws SQLException {
    StringBuffer sb = new StringBuffer();
    ResultSetMetaData metaData = rset.getMetaData();
    int columnCount = metaData.getColumnCount();
 
    sb.append("<table border=\"1\" cellpadding=\"5\">");
    sb.append("<tr>");
 
    // Ravs - append header column for radio button
    sb.append('<td>Check</td>');
 
        for (int i = 1; i <= columnCount; i++)
            sb.append("<td><b>" + metaData.getColumnName(i) + "</td>");
        sb.append("</tr>");
 
        while (rset.next()){
            sb.append("<tr>");
            // Ravs - append radio button
            sb.append('<td><input type="radio"...></td>');
            for (int i = 1; i <= columnCount; i++)
                sb.append("<td>" + rset.getString(i) + "</td>");
        }
        sb.append("</tr>");
        sb.append("</TABLE>");
        return sb.toString();
}
           
         

Open in New Window

Assisted Solution

04.03.2008 at 09:42AM PDT, ID: 21274398

Rank: Guru

nschafer:

Let me start by saying I don't know JSP so I'll not go into any of your server-side code. It seems strange that addeing the <input type="radio"...> would break your loop, as that would be the most common method to do what you are asking. So for a pure javascript solution, do the following:

1. Add an id to your table. In my code I'm assuming the table id is "table1", but you can of course make it whatever you want.
2. I am assuming you want the radio button in its own column. If this is not the case, and you just want it at the beginning of the first column, that can be done too, I just have to guess which you prefer.
3. Add onload="addRadio();" to your <body> tag i.e. <body onload="addRadio();" >

I'll attach the javascript code.

Hope this helps,
Neal.

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:

           
           
             <script type="text/javascript">
function addRadio() {
  var tbl = document.getElementById("table1")
  tbl.rows[0].insertCell(0);  // add cell to beginning of header row
  for (i=1;i<tbl.rows.length;i++) { 
    theRow = tbl.rows[i];
    theRow.insertCell(0);  // add cell to beginning of each row
    theRow.cells[0].innerHTML = "<input type='radio' name='radioSel' id='radio" + i + "' onclick='radioClick(this);' />"; // insert the radio button
  }
}
 
function radioClick(obj) {
  //unhighlight all rows
  var tbl = document.getElementById("table1")
  for (i=1;i<tbl.rows.length;i++) {
    tbl.rows[i].style.backgroundColor = "";
  }
  // highlight the selected row
  tbl.rows[obj.id.substr(5)].style.backgroundColor="yellow";
}  
</script>

           
         

Open in New Window

Accepted Solution

04.03.2008 at 10:07AM PDT, ID: 21274637

shadowbreeze:

Neal:

The addition of the radio buttons works perfectly. I kept looking at trying to format within the function. I was just researching DOM as you were posting, but could not have put 2 and 2 together anytime soon!

As to the second part, it works as well (and is just plain cool), but what I need is to capture the values of each element in the row (with their label/column name if possible) - not just highlight the selected row. I will continue to research using your code as an example, but any examples would be appreciated in the interest of time.

04.03.2008 at 10:33AM PDT, ID: 21274880

shadowbreeze:

Ravs:

Yes. Your commented suggestion does apparently work. I reverted my code back to base, but I was putting it inside the for loop because i wanted to give it a value based on it's row (for later retreival). It looked something like this:

while (rset.next()){
sb.append("<tr>");
for (int i = 1; i <= columnCount; i++) {
sb.append("<td><input type=\"radio\" name=\"radios\" value=\"radio\" + i>");
sb.append("<td>" + rset.getString(i) + "</td>");
}
}

but this shifted the values so they no longer lined up under their headings.

So you comments work for the first part of the problem, but now how to I capture the values of the elements in the row when after the user selects the radio button for that row? Everything I've read so far assumes that each button has a unique value (which is what I was trying to accomplish with the above code).

04.03.2008 at 10:34AM PDT, ID: 21274886

Rank: Guru

nschafer:

Capture in what way? Do you want to store them to form variables?

04.03.2008 at 10:41AM PDT, ID: 21274948

shadowbreeze:

Neal:

I will be adding this table to a form with a submit button. These values will be returned to the parent window which called this page and placed in readonly text boxes.

'Breeze

04.03.2008 at 12:53PM PDT, ID: 21276292

Rank: Guru

nschafer:

OK, so this is running in a pop-up or in an iframe?
Will the form already have variables for the values?
I'd probably do something like the attached code. This will will in a form field in the parent page. The field name I used is "tbldata" you can change this as you wish. I am parsing all of the data into a single string, that you can then separate out using server-side code when you submit the page. The values are parsed as follows:
Header1:data1~Header2:data2~Header3:data3 etc...
so to parse it back out we split the string on the ~ symbol to get an array of fields which we then split on the : to separate the field name from the field data. This will work regardless of the number of fields, however I'm pretty sure there is a max size to a string in a hidden form field (I'm not sure what it is, but I'm fairly certain it exists. So long as you don't exceed that size though this will send all of the data when you submit.

Hope this helps,
Neal.

PS you will probably want to remove the alert from the function. I just included it so you can see the information being transferred.

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:

           
           
             function radioClick(obj) {
  //unhighlight all rows
  var tbl = document.getElementById("table1");
  var theRow = tbl.rows[obj.id.substr(5)];
  for (i=1;i<tbl.rows.length;i++) {
    tbl.rows[i].style.backgroundColor = "";
  }
  // highlight the selected row
  theRow.style.backgroundColor="yellow";
  // compile the selected data
  var sValue = "";
  for (i=1;i<theRow.cells.length;i++) {
    if (i>1) sValue += "~";
    sValue += tbl.rows[0].cells[i].innerHTML + ":" + theRow.cells[i].innerHTML;
  }
  alert(sValue);
  // copy the data to the parent frames 
  parent.document.forms[0].tbldata.value = sValue;
}

           
         

Open in New Window

Assisted Solution

04.03.2008 at 01:37PM PDT, ID: 21276714

shadowbreeze:

Neal:

This looks very close, but I have to leave and setup shop back at the hotel before I can test. Question: doesn't innerHTML get the formatting of the header as well? So, I'll have to parse the header format characters out at the same time I'm get the label/value pairs?

This was sort of the reason I was trying to use the compactness of the metadata methods in my original code.

I'll let you know when I get back on-line.

'Breeze

04.03.2008 at 02:04PM PDT, ID: 21276954

Rank: Guru

nschafer:

»doesn't innerHTML get the formatting of the header as well?
Yes it does, but if you put your formatting into the <td> tag using style= then you won't' have that problem.

Example
<td style='font-weight:bold;'>Data</td>
will give the same look as
<td><b>Data</b></td>

Neal.

20080236-EE-VQP-29 / EE_QW_2_20070628