Solved

sorting html table within a form

Posted on 2003-11-02
7
439 Views
Last Modified: 2008-02-01
i have a html table. When the user clicks heading of a column the rows get sorted. The problem is when i use this in a form. First, all the form elemets disappear after sorting, second, it gives incorrect results.
Here is my code

<%@ page language="java" import="java.sql.*" %>
<%@ page  import="java.util.*" %>
<meta http-equiv="Page-Enter" content="revealtrans(duration=1,transition=8)">
<html>
<head>
  <META HTTP-EQUIV="Content-Style-Type" CONTENT="text-css" >
  <LINK REL="STYLESHEET" HREF="cssApproval.css" >
<style type="text/css">

th
      {
      color: #000080;
    }
</style>

<script type="text/javascript">
function validate(objForm)
{
          var bChecked=false;
          for (var i=0; i<objForm.elements.length;i++)
              { // check all the form elements
               if(objForm.elements[i].type == 'radio' && objForm.elements[i].checked)
                           { // is it a radio button and is it selected
                   bChecked=true; // if radio button has been selected then set variable to true
                   }
          }
         if(!bChecked)
             {
                 alert("Please select a Radio Button"); // no radio button selected, output appropriate error message
         }
     return bChecked; // return the value defined above
}

currentCol = 0
previousCol = -1

function CompareAlpha(a, b) {
      if (a[currentCol] < b[currentCol]) { return -1; }
      if (a[currentCol] > b[currentCol]) { return 1; }
      return 0;
}

function CompareAlphaIgnore(a, b) {
      strA = a[currentCol].toLowerCase();
      strB = b[currentCol].toLowerCase();
      if (strA < strB) { return -1; }
      else {
            if (strA > strB) { return 1; }
            else { return 0; }
      }
}

function CompareDate(a, b) {
      // this one works with date formats conforming to Javascript specifications, e.g. m/d/yyyy
       
      datA = new Date(a[currentCol]);
      datB = new Date(b[currentCol]);
      if (datA < datB) { return -1; }
      else {
            if (datA > datB) { return 1; }
            else { return 0; }
      }
}

function CompareDateEuro(a, b) {
      // this one works with european date formats, e.g. d.m.yyyy
      strA = a[currentCol].split("-");
      strB = b[currentCol].split("-")
      datA = new Date(strA[0], strA[1], strA[2]);
      datB = new Date(strB[0], strB[1], strB[2]);
      if (datA < datB) { return -1; }
      else {
            if (datA > datB) { return 1; }
            else { return 0; }
      }
}
function CompareTime(a, b) {

      strA = a[currentCol].split(":");
      strB = b[currentCol].split(":")
      datA = new Date(strA[0], strA[1], strA[2]);
      datB = new Date(strB[0], strB[1], strB[2]);
      if (datA < datB) { return -1; }
      else {
            if (datA > datB) { return 1; }
            else { return 0; }
      }
}


function CompareNumeric(a, b) {
      //window.alert ("CompareNumeric");
      numA = a[currentCol]
      numB = b[currentCol]
      if (isNaN(numA)) { return 0;}
      else {
            if (isNaN(numB)) { return 0; }
            else { return numA - numB; }
      }
}

function TableSort(myTable, myCol, myType)
      {
    var tblEl = document.getElementById(myTable);
      var oldDsply = tblEl.style.display;
//   tblEl.style.display = "none";

      // Create a two-dimensional array and fill it with the table's content
      var mySource = document.all(myTable);
      var myRows = mySource.rows.length;
      var myCols = mySource.rows(0).cells.length;
      currentCol = myCol
      myArray = new Array(myRows)
      for (i=0; i < myRows; i++) {
            myArray[i] = new Array(myCols)
            for (j=0; j < myCols; j++) {
                  myArray[i][j] = document.all(myTable).rows(i).cells(j).innerText
            }
      }

      if (myCol == previousCol) {
            myArray.reverse(); // clicked the same column as previously - reverse the sort
      }
      else { // clicked on a new column - sort as indicated
            switch (myType) {
                  case "a":
                        myArray.sort(CompareAlpha);
                        break;
                  case "ai":
                        myArray.sort(CompareAlphaIgnore);
                        break;
                  case "d":
                        myArray.sort(CompareDate);
                        break;
                  case "de":
                        myArray.sort(CompareDateEuro);
                        break;
                  case "n":
                        myArray.sort(CompareNumeric);
                        break;
                  default:
                        myArray.sort()
            }
      }

      // Re-write the table contents
      for (i=0; i < myRows; i++) {
            for (j=0; j < myCols; j++) {
                  mySource.rows(i).cells(j).innerText = myArray[i][j]
            }
      }
    tblEl.style.display = oldDsply;
      previousCol = myCol; // remember the current sort column for the next pass
      return 0;

}
</script>
</head>
<body>
<FORM NAME="form1" action="traceClosedCapital.jsp" onSubmit="return validate(this)">  
 <TABLE CLASS=tableMain>      
  <thead>
      <TR>
       <TH class=tableHead></TH>
             <TH onclick="TableSort('inventory1', 0, 'n')">Indent No. </TH>
             <TH  onclick="TableSort('inventory1', 1, 'ai')"> Item</TH>
             <TH  onclick="TableSort('inventory1', 2, 'ai')"> Category</TH>
      <TH  onclick="TableSort('inventory1', 3, 'ai')"> Specification</TH>
             <TH  onclick="TableSort('inventory1', 4, 'ai')" >Qty Ordered</TH>
             <TH  onclick="TableSort('inventory1', 5, 'ai')">Qty Received</TH>
            <TH onclick="TableSort('inventory1', 6, 'de')"> Delivery Date</TH>
            <TH  onclick="TableSort('inventory1', 7, 'ai')"> Cost</TH>
            <TH onclick="TableSort('inventory1', 8, 'ai')"> Vendor</TH>
            <TH  onclick="TableSort('inventory1', 9, 'ai')"> Replacement</TH>
           <TH  onclick="TableSort('inventory1', 10, 'ai')"> Details</TH>
           <TH  onclick="TableSort('inventory1', 11, 'de')"> Closed On</TH>
           <TH  onclick="TableSort('inventory1', 12, 'ai')"> Closed By</TH>
           <TH onclick="TableSort('inventory1', 13, 'ai')"> Dept</TH>
    </TR>
</thead>
<tbody id="inventory1">
<% while(some condition)
      {
               %>
       
         <TR>
           <TD><INPUT TYPE="radio" NAME="r" value="<%=indentno%>"></TD>
          <TD><%=indentno%></TD>
          <TD><%=name%></TD>
          <TD><%=category%></TD>
          <TD><%=specification%></TD>
          <TD><%=noofitems%></TD>
          <TD><%=qtyReceived%></TD>
         <TD><%=deliveryDate%></TD>            
         <TD><%=curr%><%=cost%></TD>
         <TD><%=vendor%></TD>
         <TD><%=replacement%></TD>
        <TD><%=details%></TD>
        <TD><%=currentDate%>/<%=currentTime%></TD>
        <TD><%=user%></TD>
       <TD><%=dept_name%></TD>
     </TR>
       <%  
             
      }
%>
  </tbody>
  </TABLE>
  <table>
 </table>
</form>
</body>
</html>

The problem with this code is that all the radio buttons disappear and it returns incorrect result. Same code when used without form tag and elements works fine.
Please Help.
0
Comment
Question by:zenid123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
7 Comments
 

Author Comment

by:zenid123
ID: 9669005
The reason for incorrect result is that there is an extra comma before the indentno column.
If I display alert in any function "a" or "b". I get an extra comma before the indentno column. It is because of the radio button I am using.
Plz suggest How to resolve this
0
 
LVL 10

Accepted Solution

by:
NetGroove earned 250 total points
ID: 9669166
Use instead of innerText the attribute innerHTML.

Like this:


function TableSort(myTable, myCol, myType)
     {
...
               myArray[i][j] = document.all(myTable).rows(i).cells(j).innerHTML
...
               mySource.rows(i).cells(j).innerHTML = myArray[i][j]
}

Good luck,
NetGroove

0
 

Author Comment

by:zenid123
ID: 9669274
The problem for radio button is solved. But it's still giving incorrect results. Same code in another page without form tag is working fine. I don't know if its a problem with form tag or something else.
Thanks
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 11

Assisted Solution

by:Zontar
Zontar earned 75 total points
ID: 9669275
COmpatibility note: MSIE and Opera support innerText; Mozilla and other browsers don't. Use innerHTML or DOM element/node methods.
0
 

Author Comment

by:zenid123
ID: 9669282
It seems as if the middle row keeps stationery and other rows move.
0
 

Author Comment

by:zenid123
ID: 9669308
Figured Out the problem . Its because of the radio buttons . I removed the first column which contains the radio button and its working fine. I don't know why is this problem and how to resolve it
0
 

Author Comment

by:zenid123
ID: 9669352
thanks .
Solved the problem. Started indexing from the frist column and noe its working fine
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SharePoint and CAML query help 4 26
Word Press Fixes to Google Speed Test Issues 2 50
Ajax success not firing alert 6 44
Submit button if clicked twice submits twice 1 24
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 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