Hi!

I need some help with the DHTML. Any ideas how to make this work or am i
trying to do something that can't be done ?!

Here's the picture what i try to do:
There's this ASP-script page which get a data from the database and then
genered this included clientsize page. A page may include 1-3 tables with
the different data, different numbers of rows and columns.
Now i try to do some table columns sorting WITHOUT reloading a page or going
back to the server and the database. So sorting should happen in a browser
with DHTML and it should work with IE4+ and NS4+. This way it should be
faster sorting than generating page again from the beginning(?).

Client can click the table's columns name and table is sorted to new order
with this column's data.
This page code is just the sample from the orginal page and there is some
checkbox, dropdowns, etc and client can make some choices and then click
"Remove"-button to transfer data to the next ASP-page.

This code almost works with IE4.01 SP2, IE501 and NS4.08 (NS6 is not
working, but i'll try to make it work and any help is welcome) but i have
some problems that i need some help with.
1. When "init()"-function is finished in a NS, there is no vertical
scrollbar to scroll the page down. When you resize the browser then a
scrollbar comes visible, but then table's layout is changed.
2. In a NS "Remove"-submit button is invisible
3. If you take off alert-function from "check_position"-function then a IE
don't move <div>-tags to right position (IE5 only moves "databHead"-block to
its right position, IE4 don't even do that). NS works ok.
May be this is some timing problem ?

Can anybody help me ?

Regards,
Joel Matto

---page code----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 file://EN">
<!-- hopsriv.asp -->
<!-- Joel Matto 27.4.2000 -->
<html>

<head>
<meta name="AUTHOR" CONTENT="Novo Group Oy">
<meta NAME="GENERATOR" Content="Microsoft FrontPage 3.0">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>ZZZZ / YYYYYYYYYYYYYYYY / xxxxxxxxxxxxxxxxx</title>
<script language="javascript1.2">
<!--
file://1.table
var arrKurssi = new Array();
arrKurssi[0]= new Array("x","-","-","-","-","-","-");
arrKurssi[1] = new Array("x","FYSL0002","4","1","1","1","a/c");
arrKurssi[2] = new Array("x","J0011","3","1","1","1","a/c");
arrKurssi[3] = new Array("x","J0012","2","1","1","3","v/b");
arrKurssi[4] = new Array("x","J0015","2","1","1","1","e/v");
arrKurssi[5] = new Array("x","J0020","3","1","1","1","s/c");
arrKurssi[6] = new Array("x","J0027","2","1","1","1","d/c");
arrKurssi[7] = new Array("x","J0028","2","1","1","1","z/z");
arrKurssi[8] = new Array("x","J0033","2","1","1","1","a/a");
arrKurssi[9] = new Array("x","J0036","2","1","1","1","b/b");
arrKurssi[10] = new Array("x","J0045","2","1","1","1","d/d");
arrKurssi[11] = new Array("x","J0054","2","1","1","1","x/a");
arrKurssi[12] = new Array("x","J0055","2","1","1","1","a/x");
arrKurssi[13] = new Array("x","KIEL0001","2","1","1","1","/");
arrKurssi[14] = new Array("x","KIEL0002","1","1","1","1","/");
arrKurssi[15] = new Array("x","KIEL0006","2","1","1","1","/");
arrKurssi[16] = new Array("x","KIEL0007","2","1","1","1","/");
arrKurssi[17] = new Array("x","KIEL0011","2","1","3","1","/");
arrKurssi[18] = new Array("x","KIEL0012","2","1","3","1","/");
arrKurssi[19] = new Array("x","MATL0003","2","1","1","1","/");
arrKurssi[20] = new Array("x","T0002","2","1","1","1","/");
arrKurssi[21] = new Array("x","T0006","2","1","1","1","/");
arrKurssi[22] = new Array("x","T100302","3","1","1","1","/");
arrKurssi[23] = new Array("x","T100303","3","1","1","1","/");
arrKurssi[24] = new Array("x","T100304","3","1","1","1","/");
arrKurssi[25] = new Array("x","T100305","3","1","1","1","/");
arrKurssi[26] = new Array("x","T200","480","1","1","1","/");
arrKurssi[27] = new Array("x","TIEL0001","3","1","1","1","/");
arrKurssi[28] = new Array("x","TIEL0002","2","1","1","1","/");



file://2.table
var arrKurssi2 = new Array();
arrKurssi2[0] = new Array("x","-","-","-","-","-","-");
arrKurssi2[1] = new Array("x","FYSl002","4","1","1","1","a/a");
arrKurssi2[2] = new Array("x","J0011","3","1","6","1","c/c");
arrKurssi2[3] = new Array("x","J0020","2","2","3","2","v/v");
arrKurssi2[4] = new Array("x","KAYTT","2","3","3","3","b/b");
arrKurssi2[5] = new Array("x","SASSU","1","2","5","1","f/f");
arrKurssi2[6] = new Array("x","YRITYS","5","2","3","4","z/v");



file://table special cells:
// (x,0)= sorting; y=not used, x=used
// (0,x)= sorting order; 0=down, 1=up

ns4 = (document.layers)? true:false
ns6 = (document.getElementById)? true:false
ie = (document.all)? true:false
if (ie) ns6=false

var html2= '';
html2 += '<table border="0" cellpadding="0" cellspacing="0" width="100%">'
html2 += '<tr><td width="3%">&nbsp;New table</td>'
html2 += '<td><font size="2">Klick "Remove"-button to remove
items.</font></td></tr>'
html2 += '<tr><td width="3%">&nbsp;</td></tr>'
html2 += '<tr><td width="3%">&nbsp;</td>'
html2 += '<td><input type="submit" value="Remove" id="submit1"
name="RemoveItems"></td></tr>'
html2 += '<tr><td width="3%">&nbsp;</td>'
html2 += '<td width="47%">Something to say!?</td></tr></table>'


// Let's start
//

function doTableData(arr) {
var tbhead = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\"
width=\"100\%\">"
var tbfoot = "</table>"
var tbtrbeg = "<tr>"
var tbtrend = "</tr>"
var tbtdbeg = "<td valign=\"top\" bgcolor=\"#D3CEF0\"
align=\"left\"><font size=\"2\">"
var tbtdend = "</font></td>"

file://alert("doTableData/arr=" + arr.join() + "/length=" + arr.length +
"\n1:lengt=" + arr[1].length + "!");

var data = ""
for (var i=1; i < arr.length; i++){
data += tbtrbeg;
for (var j=1; j< arr[i].length; j++){
data += tbtdbeg;
data += arr[i][j];
data += tbtdend;
}
data += tbtrend;
}
var str = tbhead + data + tbfoot
file://alert ("doTableData stringi:" + str + "!");
return str
}


function makeTableNS6(id, html) {
if (document.getElementById) {
var l = document.getElementById(id);
var r = document.createRange();
r.setStartAfter(l);
var docFrag = r.createContextualFragment(html);
while (l.hasChildNodes())
l.removeChild(l.firstChild);
l.appendChild(docFrag);
}
}


function makeTable(id,nestref,text) {
if (ns4) {
var lyr = (nestref)? eval('document.'+nestref+'.document.'+id+'.document')
: document.layers[id].document
lyr.open()
lyr.write(text)
lyr.close()
}
else if (ie) document.all[id].innerHTML = text
}


function sorting(nro,btype,arr,table){
file://param: nro=col number
// btype; true=numeric, false = ascii
// arr= table data array

var orgOrder = new Array();

for (i=1;i<arr.length; i++){
orgOrder[i-1] = arr[i][nro];
arr[i][0]="y";
}

var order = arr[0][nro];
file://alert("orgOrder=" + orgOrder.join() + "!");
if (order=="0"){
if (btype){
orgOrder.sort(compareNumbers);
orgOrder.reverse();
}else{
orgOrder.reverse();
}
arr[0][nro]="1";
}else {
if (btype){
orgOrder.sort(compareNumbers);
}else{
orgOrder.sort();
}
arr[0][nro]="0";
}

var newData = new Array();
for (z=0;z<arr[0].length;z++){
newData[z] = arr[0][z];
}
file://alert("newData=" + newData.join() + "!" + "\n" + "arr=" +
arr.join() + "!");
var x=1;
for (i=0; i<orgOrder.length; i++){
for (j=1;j<arr.length;j++){
if (orgOrder[i]==arr[j][nro] & arr[j][0]=="y"){
arr[j][0]="x";
newData[x] = new Array();
for (z=0;z<arr[j].length;z++){
newData[x][z] = arr[j][z];
}
x++;
}
}
}
file://alert("newData=" + newData.join() + "!" + "\n" + "arr=" +
arr.join() + "!");

var str = doTableData(newData);
if (ns4 || ie) makeTable(table,null,str);
if (ns6) makeTableNS6(table,doTableData(newData));
}


function compareNumbers(a,b){
return a -b
}


function init(){
alert ("How's it look?")

if (ns4 || ie) makeTable("data",null,doTableData(arrKurssi));
if (ns6) makeTableNS6("data",doTableData(arrKurssi));

if (ns4 || ie) makeTable("datab",null,doTableData(arrKurssi2));
if (ns6) makeTableNS6("datab",doTableData(arrKurssi2));

check_position("data","databHead",100);
check_position("databHead","datab",20);

if (ns4 || ie) makeTable("data2",null,html2);
if (ns6) makeTableNS6("data2",html2);

check_position("datab","data2",100);

}


function check_position(id1,id2,dif){
alert ("Check position!(" + id1 + "/" + id2 + ")");
var id1_top = (ns4) ? document.layers[id1].top :
document.all[id1].offsetTop;
var id1_height = (ns4) ? document.layers[id1].document.height
:document.all[id1].offsetHeight;
var id2_top = id1_top + id1_height + dif;
file://alert ("id1: top=" + id1_top + "/height="+ id1_height + "\n" +
"id2:top=" + id2_top + "!");
if (ie){
document.all[id2].style.posTop = id2_top;
}else{
document.layers[id2].moveToAbsolute(40,id2_top);
}
}

file://-->
</script>
</head>

<body bgcolor="#FFFFFF" onload="init();">

<p align="center"><br>
<br>
</p>

<form action="hopsvah.asp" method="POST" name="hopsvah">
<input type="hidden" name="rbRajaus" value="rbOpjaksot"><table border="0"
cellpadding="0"
cellspacing="0" width="90%">
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="3%"></td>
<td bgcolor="#D3CEF0"><font size="4"><strong>FFFFFFFFFFFFFFF /
DDDDDDDDDDDDDDDDDDDDDDDDDDD</strong></font></td>
<td bgcolor="#D3CEF0" align="right"><font
size="1">dddddddddddddddddddd</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="3%"></td>
</tr>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="3%"></td>
<td>Here is the data from DB</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="3%"></td>
</tr>
<tr>
<td width="3%"></td>
</tr>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="3%"></td>
<td bgcolor="#D3CEF0" align="left"><font size="2"><strong><a

href="javascript:sorting('1',false,arrKurssi,'data');">COL1</a></strong></fo
nt></td>
<td bgcolor="#D3CEF0" align="left"><font size="2"><strong><a

href="javascript:sorting('2',true,arrKurssi,'data');">COL2</a></strong></fon
t></td>
<td bgcolor="#D3CEF0" align="left"><font size="2"><strong><a

href="javascript:sorting('3',true,arrKurssi,'data');">COL3</a></strong></fon
t></td>
<td bgcolor="#D3CEF0" align="left"><font size="2"><strong><a

href="javascript:sorting('4',true,arrKurssi,'data');">COL4</a></strong></fon
t></td>
<td bgcolor="#D3CEF0" align="left"><font size="2"><strong><a

href="javascript:sorting('5',true,arrKurssi,'data');">COL5</a></strong></fon
t></td>
<td bgcolor="#D3CEF0" align="left"><font size="2"><strong><a

href="javascript:sorting('6',false,arrKurssi,'data');">COL6</a></strong></fo
nt></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="3%"></td>
</tr>
<tr>
<td><div id="data" style="position: absolute; top:150px;
left:40px;"><table border="0"
cellpadding="0" cellspacing="1" width="100%">
<tr>
<td></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td width="3%"></td>
</tr>
<tr>
<td width="3%"></td>
</tr>
<tr>
<td><div id="databHead" style="position: absolute; top:200px;
left:40px;"><table
border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="3%"></td>
<td bgcolor="#D3CEF0" align="left"><font size="2"><strong><a

href="javascript:sorting('1',false,arrKurssi2,'datab');">COL1</a></strong></
font></td>
<td bgcolor="#D3CEF0" align="left"><font size="2"><strong><a

href="javascript:sorting('2',true,arrKurssi2,'datab');">COL2</a></strong></f
ont></td>
<td bgcolor="#D3CEF0" align="left"><font size="2"><strong><a

href="javascript:sorting('3',true,arrKurssi2,'datab');">COL3</a></strong></f
ont></td>
<td bgcolor="#D3CEF0" align="left"><font size="2"><strong><a

href="javascript:sorting('4',true,arrKurssi2,'datab');">COL4</a></strong></f
ont></td>
<td bgcolor="#D3CEF0" align="left"><font size="2"><strong><a

href="javascript:sorting('5',true,arrKurssi2,'datab');">COL5</a></strong></f
ont></td>
<td bgcolor="#D3CEF0" align="left"><font size="2"><strong><a

href="javascript:sorting('6',false,arrKurssi2,'datab');">COL6</a></strong></
font></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td width="3%"></td>
</tr>
<tr>
<td><div id="datab" style="position: absolute; top:250px;
left:40px;"><table border="0"
cellpadding="0" cellspacing="1" width="100%">
<tr>
<td></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td width="3%"></td>
</tr>
<tr>
<td width="3%"></td>
</tr>
<tr>
<td><div id="data2" style="position: absolute; top:400px;
left:40px;"><table border="0"
cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="3%">&nbsp;init table</td>
<td><font size="2">Ddddddddddddddddd kkkkkkkkkkkkkkkkk
DDdddddddddddddddddddddd
kkkkkkkkkkkkkkkkkk jjjjjjjjjjjjjjjjjjj
Ddddddddddddddddd</font></td>
</tr>
<tr>
<td width="3%"></td>
</tr>
<tr>
<td width="3%"></td>
<td>&nbsp; <input type="submit" value="Remove" id="submit1"
name="RemoveItems"></td>
</tr>
<tr>
<td width="3%"></td>
<td width="47%">asdfkasdljfk lkajsdflkj lkjas dlfj
lasdfsdafdsf</td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td width="3%"></td>
</tr>
</table>
</form>
</body>
</html>
-------------------end----------------------------------