Trouble accessing object when created from function

M

mpm_three

My app builds a table dynamically from a javascript array and I'm using
WebFX's Sortable Table API to make it sortable. That all works fine.
What I added was the ability to rebuild the table with different
elements of my 'data' array. That works, but when I try and sort my
rebuilt table, the sort function can't seem to access the new table.

In general here is how it goes:

//Constructor
function SortableTable(table, sorttype) {
...
...
}
....
....
//Sorting function
SortableTable.prototype.sort = function (col, direction, sorttype) {
...
...
}

//Rebuild my Table
function makeTable(view) {

rebuild table (as a string) from data array
send it out using innerHTML

//construct new table object
var st = new SortableTable(document.getElementById(table-id));

}


//html
build a two row table for my headers
1st row onclick rebuilds table with different array elements
2nd row onclick calls sort function to sort by that column

//inline javascript (not a function) to build init table in global
scope
build init table as a string
send it out with document.write();
//construct new table object
var st = new SortableTable(document.getElementById(table-id));
//end inline javascript

//end html


When the page first loads the table is displayed and I can sort
by any column. I click on a different view and I get my rebuilt
table but no sorting capability. By inserting alerts within the
different functions I can verify that my new table object is
created with the current table-id, but the sorting function see's
only a blank/empty object. My feeling is it has to do with my
init table object being created with global scope and any new
table objects being created within a function. I'm very new
javascript especially involving OO stuff. Below is a sample.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sortable Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript"
src="http://webfx.eae.net/dhtml/sortabletable/js/sortabletable.js">
</script>


<style type="text/css">

..sort-table {

WIDTH: 275px;
TEXT-ALIGN: center;
PADDING: 2px 0px;
}

</style>

<script type="text/javascript">

function StringBuilder(sString) {

this.length = 0;
this.append = function (sString) {
this.length +=
(this._parts[this._current++] = String(sString)).length;
this._string = null;
return this;
};

this.toString = function () {
if (this._string != null)
return this._string;

var s = this._parts.join("");
this._parts = ;
this._current = 1;
this.length = s.length;

return this._string = s;
};

this._current = 0;
this._parts = [];
this._string = null;

if (sString != null)
this.append(sString);
}


var tData =
[['Table1Row0',256,148,'Table2Row0',456,987,'Table3Row0',345,356],
['Table1Row1',562,129,'Table2Row1',406,977,'Table3Row1',545,301],
['Table1Row2',976,443,'Table2Row2',956,981,'Table3Row2',845,213],
['Table1Row3',725,223,'Table2Row3',516,999,'Table3Row3',319,210],
['Table1Row4',125,929,'Table2Row4',156,229,'Table3Row4',499,121],
['Table1Row5',325,231,'Table2Row5',256,309,'Table3Row5',149,291]];



function makeTable(col) {

var tid = ['table-1','table-2','table-3'];

var sb = new StringBuilder();

var myDivId = document.getElementById("myDiv");


sb.append("<table id='"+tid[col]+"'class='sort-table' border='1'>");
sb.append("<tbody>");

var st = null;
var t = null;

if (col == 1) {
for (var j = 0; j < 6; j++) {
t = tData[j];
sb.append("<TR><TD WIDTH='95'>"+t[0]+"<TD WIDTH='90'>"+t[1]+
"<TD WIDTH='75'>"+t[2]+"</TR>");
}
} else if (col == 2) {
for (var j = 0; j < 6; j++) {
t = tData[j];
sb.append("<TR><TD WIDTH='95'>"+t[3]+"<TD WIDTH='90'>"+t[4]+
"<TD WIDTH='75'>"+t[5]+"</TR>");
}
} else {
for (var j = 0; j < 6; j++) {
t = tData[j];
sb.append("<TR><TD WIDTH='95'>"+t[6]+"<TD WIDTH='90'>"+t[7]+
"<TD WIDTH='75'>"+t[8]+"</TR>");
}
}

sb.append("</tbody></table>");

myDivId.innerHTML = sb;

var st = new SortableTable(document.getElementById(tid[col]));

}
</script>


</head>
<body>

<div id="divHead">
<TABLE class='sort-table' border="1">
<TR>
<TH WIDTH="111">
<A HREF="javascript:void(0)" onclick="makeTable(1)">Table1</A></TH>
<TH WIDTH="103">
<A HREF="javascript:void(0)" onclick="makeTable(2)">Table2</A></TH>
<TH WIDTH="82">
<A HREF="javascript:void(0)" onclick="makeTable(3)">Table3</A></TH>
</TR>
<TR>
<TH WIDTH="111">
<A HREF="javascript:void(0)" onclick=st.sort(0)>Sort0</A></TH>
<TH WIDTH="103">
<A HREF="javascript:void(0)" onclick=st.sort(1)>Sort1</A></TH>
<TH WIDTH="82">
<A HREF="javascript:void(0)" onclick=st.sort(2)>Sort2</A></TH></TR>
</TABLE></div>


<script type="text/javascript">

var tData
var sb = new StringBuilder();
sb.append("<div id='myDiv'>");
sb.append("<table id='table-1' class='sort-table' border='1'><tbody>");

var t = null;

for (var j = 0; j < 6; j++) {
t = tData[j];
sb.append("<TR><TD WIDTH='95'>"+t[0]+"<TD WIDTH='90'>"+t[1]+
"<TD WIDTH='75'>"+t[2]+"</TR>");
}
sb.append("</tbody></table></div>");

document.write(sb.toString());

var st = new SortableTable(document.getElementById("table-1"));

</script>

</body>
</html>


Any help would be greatly appreciated.

-Matt
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top