PDA

View Full Version : Need Help with Simple 'If', 'Then' JavaScript


Clicken
04-22-2011, 10:52 AM
I have a table with two columns. The left column is the caption for the db value in the right column. The purpose of the script is to have an empty caption <td> if the db value <td> is empty.

As is, it doesn't work. Could someone please help.

script in the <head> section


<script type="text/javascript">
if{
(infovalue==null)
then
(infocaption==null)
};
</script>



HTML


<table id="listingdetailinfo">
<tr>
<td class="infocaption">Type</td>
<td class="infovalue">{listing_field_style_value}</td>
</tr>...
weegillis
04-22-2011, 12:02 PM
JavaScript

if{
(infovalue==null)
then
(infocaption==null)
};


// following this syntax


if (condition)
{ do this }
else
{ do this }


// will read


if (!infovalue)
{
infocaption=NULL;
}
weegillis
04-22-2011, 12:11 PM
SEGUE

You could use a conditional assignment, something like this:
JavaScript

infocaption = (!infovalue) ? NULL : "some string value";

// OR likewise,

infocaption = (!infovalue) ? NULL : -1; // as in a REAL NUMBER value;



The condition (!something) is read as, NOT something, which is the same as NULL, '', "", and 0 (zero)

So (!something) is equivalent to (something==[any of the above])

SPECIAL NOTE: An assignment is always made with a single = (equal operator).

Comparisons are made with == or ===. Check your manual for further explanation of the difference.
weegillis
04-22-2011, 01:44 PM
FURTHER SEGUE:

Let's first create a fragment element, and position it in the HTML document flow (within applicable parent element).

<div id="types"></div>

We can stipulate that a table exists in the server-side DB that has been queried for particular keys, which returned values we have stored in a volatile client side array.

Eg.

types[y] = [infovalue, infocaption] // assumes both values are returned in the query;

types[y] = [infovalue] // assumes only one value is returned.


Hook on to id="types".

Consider the possibilities:

1) no data in the array
2) data in the array

If (1)
{
create <p/p> element;
append text node "No data available" to <p/p>;
append <p/p> to id="types" and EXIT;
}
ELSE
{
create <table/table> element.

Now we cycle through the array to retrieve each row.

FOR ()
{
Consider the possibilities:
1) infovalue is NULL
2) infovalue is not NULL

if (2)
{
create <tr/tr> element;
create <td/td> element;
create text node from infovalue and append to <td/td>;
append <td/td> to <tr/tr>;
create <td/td> element;
create text node from or for infocaption and append to <td/td>;
append <td/td> to <tr/tr>;
append <tr/tr> to <table/table>;
toggle background;
}
proceed to next row in array;
}
append <table/table> to id="types";
}
EXIT.


REASONING:

In so doing, we only display a table if there is data, and we only display a row if there is data. It is not incumbent that we know how many rows to include in the final HTML. The table will extend indefinitely if we don't set limits or page breaks, but will have no empty rows.

Assuming it is not a huge table, it can fit snugly in a normal screen page, without having to reserve the space, and it can inherit most of its CSS from the BODY on down to its parent. The DOM script will insert the table markup or paragraph, as apply.

Since rows are script generated, it is possible to toggle the background color on each row.
Clicken
04-22-2011, 05:29 PM
That looks very interesting!!.. (makes me think)

However the 'caption' in my table is just text on the page. Only the 'value' is being retrieved from the db.

I tried the two following methods and neither worked.




<script type="text/javascript">
if (!infovalue)
{infocaption==NULL;
}
</script>

and, this one...

<script type="text/javascript">
if (infovalue==NULL)
{infocaption==NULL;
}
</script>



Should there be a function included? Something like...



function (remove text .infocaption)

if (.infovalue==NULL)
{remove text from .infocaption
}
weegillis
04-22-2011, 07:05 PM
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table generator</title>
<style type="text/css">
.even {background-color:#eee;}
</style>
</head>

<body>
<div id="wrapper">
<h1>Types</h1>
<div id="types"></div>
</div>
<script type="text/javascript">
var xy = [];
xy[0] = [0,''];
xy[1] = [1,'One'];
xy[2] = [0,''];
xy[3] = [2,'Two'];
xy[4] = [3,'Three'];
xy[5] = [0,''];
xy[6] = [4,'Four'];
xy[7] = [0,''];
xy[8] = [5,'Five'];
xy[9] = [6,'Six'];

var e = document.getElementById('types');

if(!xy.length)
{
pGen(e);
}
else
{
tableGen(e,xy);
}

function pGen(e)
{
var p = document.createElement('p');
p.appendChild(document.createTextNode("No data available"));
e.appendChild(p);
}

function tableGen(e,xy)
{
var t = document.createElement('table');
t.setAttributeNode(attr('summary','Types of something something'));
for (var i = 0, f = 0, n = xy.length; i < n; i++)
{
if(xy[i][0])
{
var r = document.createElement('tr');
if(f % 2) r.setAttributeNode(attr('class','even'));
var d = document.createElement('td');
d.innerHTML = xy[i][0];
r.appendChild(d);
d = document.createElement('td');
d.innerHTML = xy[i][1];
r.appendChild(d);
t.appendChild(r);
f = f + 1;
}
}
e.appendChild(t);
}

function attr(x,y)
{
var z = document.createAttribute(x);
z.nodeValue = y;
return z;
}
</script>
</body>
</html>
weegillis
04-22-2011, 07:19 PM
What does the data look like when the page first comes down?

Remember, assignments use only a single equals operator.

A function would be useful to contain a loop, but not absolutely necessary. It makes your source more modular, and the logic easier to follow.
Clicken
04-22-2011, 10:46 PM
That is an awesome concept that goes way beyond my capabilities.

I put your code on a page but I have no idea how to get the reguired info into it. I am saving it for possible use later when I learn a little more js.

Isn't there a simple way to remove the text in the first column if the data base doesn't have a value to put in the second column?

The text in the first column is just text that I entered, it is not coming from the data base.
weegillis
04-23-2011, 12:16 AM
Yes, there is a way. I was wondering if the data is already written into a table. Again, though, if there are going to be empty rows in the completed table, I would still go with something like the above proof of concept.

Let's consider this, just to see if I have the right idea...

If the HTML table already exists, we can run a DOM script to parse and evaluate it. I would still use the code above, but with a slight twist... It would be overwriting the initial table with the generated one. First we would hook on to the table proper, then build our 'xy' array from its contents, regardless how many cells are empty (NULL), '', "", or zero.

Considering that empty table data cells (both TH and TD) don't have any calculable dimensions when left as empty tags, we would need to test for SPACE values in literal (" ") and various entities such as & #32; or unicode \u0020. We must look for the non-breaking space, &nbsp; and &#160; and unicode \u00a0 as these are also typically used to give dimensions to cells. Of course, this measure is intended to make the code more portable (reusable) and shareable in other documents on other sites. If you know and trust your method for filling cells is consistent, then test just for that.

Our div, then, is going to be populated with TABLE data at load time. I'm assuming that the table is generated server-side with PHP and MySQL. The value entered in empty cells would be coded into the template. We could determine this value from the PHP. But with our intention to create portable code, it matters not, as long we cover all the bases. Some of the data cells are empty at page load.

We still need a hook for either our wrapper div (#types) or the table itself. I'm going to assume that there will never be an empty table, so the "No data available" condition is moot. This is still a worthwhile rescue option, though, so if there is a chance that all the rows will end up empty, then the rescue would take effect. We'll therefore leave the condition and method in place.

I would like to comment on your believing you don't know enough, though. You know enough to try, and better still, to ask when you have problems. That's more than most people will ever do. By the time we have your problem solved, you'll understand the solution.
Clicken
04-23-2011, 02:47 AM
The table(s) are already on the page with the data. And, I now see your point about needing to consider the rows and not just the caption TD.

I tested the page with the captions removed on the fields that I knew wouldn't have values returned. The result was a shorter table however there was irregular spacing between the rows.

So, thank-you, and, this is one of the tables.

Since there are four of them on the page do we need to use a unique DIV wrapper for each?



<div class="listdetailsubcolumnbox">
<p class="labelsubcolumbox">Structure Info</p>

<table id="listingdetailinfo1">
<tr>
<td class="infocaption">Type</td>
<td class="infovalue">{listing_field_style_value}</td>
</tr> <tr>
<td class="infocaption">Construction</td>
<td class="infovalue">{listing_field_construction_value}</td>
</tr>
<tr>
<td class="infocaption">Foundation</td>
<td class="infovalue">{listing_field_foundation_value}</td>
</tr>
<tr>
<td class="infocaption">Roofing</td>
<td class="infovalue">{listing_field_roof_value}</td>
</tr>
<tr>
<td class="infocaption">Exterior Finish</td>
<td class="infovalue">{listing_field_exterior_finish_value}</td>
</tr>
<tr>
<td class="infocaption">Flooring</td>
<td class="infovalue">{listing_field_flooring_value}</td>
</tr>
<tr>
<td class="infocaption">Fireplace/Stove Types</td>
<td class="infovalue">{listing_field_fireplace_types_value}</td>
</tr>
<tr>
<td class="infocaption">HVAC</td>
<td class="infovalue">{listing_field_heating_value}</td>
</tr>
<tr>
<td class="infocaption">Sanitation</td>
<td class="infovalue">{listing_field_waste_disposal_value}</td>
</tr>
<tr>
<td class="infocaption">Substructure</td>
<td class="infovalue">{listing_field_basement_type_value}</td>
</tr>
<tr>
<td class="infocaption">Garage</td>
<td class="infovalue">{listing_field_parking_spaces_value}</td>
</tr>
<tr>
<td class="infocaption">Subdivision</td>
<td class="infovalue">{listing_field_complex_value}</td>
</tr>
<tr>
<td class="infocaption">Latitude</td>
<td class="infovalue">{listing_field_latitude_value}</td>
</tr>
<tr>
<td class="infocaption">Longitude</td>
<td class="infovalue">{listing_field_longitude_value}</td>
</tr>
</table>
</div><!-- eof listdetailsubcolumnbox -->
weegillis
04-23-2011, 05:53 PM
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table re-generator</title>
<style type="text/css">
body {text-align: center; font: normal 1em "Trebuchet MS", sans-serif;}
h1 {font-size: 1.3em;}
h2 {font-size: 1.1em;}
table {border-collapse: collapse; width: 100%;}
td {width: 50%; text-align: left;}
.data {width: 60%; margin: 0 auto;}
.even {background-color:#eee;}
</style>
</head>
<body>
<div id="wrapper">
<h1>Regenerated Tables</h1>
<h2>Types</h2>
<div id="types" class="data">
<table>
<tr><td> </td><td>&#160;</td></tr>
<tr><td>1</td><td>One</td></tr>
<tr><td> </td><td> </td></tr>
<tr><td>2</td><td>Two</td></tr>
<tr><td>3</td><td>Three</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>4</td><td>Four</td></tr>
<tr><td></td><td></td></tr>
<tr><td>5</td><td>Five</td></tr>
<tr><td>6</td><td>Six</td></tr>
</table>
</div>
<h2>Sizes</h2>
<div id="sizes" class="data">
<table>
<tr><td> </td><td> </td></tr>
<tr><td>1</td><td>S</td></tr>
<tr><td></td><td></td></tr>
<tr><td>2</td><td>M</td></tr>
<tr><td>3</td><td>L</td></tr>
<tr><td> </td><td>&#160;</td></tr>
<tr><td>4</td><td>T</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>5</td><td>XL</td></tr>
<tr><td>6</td><td>XXL</td></tr>
</table>
</div>
<h2>Colors</h2>
<div id="colors" class="data">
<table>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>1</td><td>Red</td></tr>
<tr><td> </td><td>&#160;</td></tr>
<tr><td>2</td><td>Orange</td></tr>
<tr><td>3</td><td>Yellow</td></tr>
<tr><td></td><td></td></tr>
<tr><td>4</td><td>Green</td></tr>
<tr><td> </td><td> </td></tr>
<tr><td>5</td><td>Blue</td></tr>
<tr><td>6</td><td>Violet</td></tr>
</table>
</div>
<h2>Null Test</h2>
<div id="nulls" class="data">
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td>&#160;</td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>
</div>
<script type="text/javascript"><!--
tableRead('types','List by type');
tableRead('sizes','List by size');
tableRead('colors','List by color');
tableRead('nulls','List by nulls');

function tableRead(e,s)
{
var reg = /\S\w*/;
var arr = [];
var ser = document.getElementById(e).getElementsByTagName('t d');
for(var i = 0, n = ser.length, tmp, x, y; i < n; i++)
{
tmp = ser[i].childNodes[0];
tmp = (typeof tmp == "undefined") ? "" : ser[i].childNodes[0].nodeValue;
tmp = (reg.test(tmp)) ? tmp : "";
x = i % 2;
y = i/2 - x * 0.5;
if(!x) arr[y] = new Array(2);
arr[y][x] = tmp;
}
tableGen(e,arr,s);
}

function tableGen(e,arr,s)
{
var parent = document.getElementById(e);
var table = document.createElement('table');
table.setAttributeNode(attr('summary',s));
for (var i = 0, f = 0, n = arr.length, row, col; i < n; i++)
{
if(arr[i][1]!="")
{
row = document.createElement('tr');
if(f % 2) row.setAttributeNode(attr('class','even'));
col = document.createElement('td');
col.innerHTML = (arr[i][0]);
row.appendChild(col);
col = document.createElement('td');
col.innerHTML = arr[i][1];
row.appendChild(col);
table.appendChild(row);
f = f + 1;
}
}
parent.innerHTML = "";
if(!f) {
noDataGen(parent);
}
else
{
parent.appendChild(table);
}
}

function noDataGen(parent)
{
var par = document.createElement('p');
par.appendChild(document.createTextNode("No data available"));
parent.appendChild(par);
}

function attr(x,y)
{
var z = document.createAttribute(x);
z.nodeValue = y;
return z;
}
//--></script>
</body>
</html>
weegillis
04-23-2011, 05:59 PM
@Clicken: copy the code into your favorite editor and save as .html. The results will explain themselves.

The above example is SANS filter for white space. At present it only looks for empty TD cells, and this at the time it reads them in to construct the working array. Any cells that are found to be undefined are treated as "". A filter could be inserted at this point that checks all defined content. The working array would contain only data and "" in the cells when it is passed to tableGen().

<update>The script is amended to include a white space filter.</update>
weegillis
04-23-2011, 07:15 PM
This is the module that reads the downloaded document table container.


JavaScript

function tableRead(e,s)
{

// regular expression for 'not white space alone'
var reg = /\S\w*/;

// working array
var arr = [];

// serial array of td objects in element id e
var ser = document.getElementById(e).getElementsByTagName('t d');

// cycle through serial array one node at a time
for(var i = 0, n = ser.length, tmp, x, y; i < n; i++)
{

// copy individual node to temporary variable
tmp = ser[i].childNodes[0];

// reduce to node value only, if defined, else set to empty string
tmp = (typeof tmp == "undefined") ? "" : ser[i].childNodes[0].nodeValue;

// apply regex filter
tmp = (reg.test(tmp)) ? tmp : "";

// x-index
// range is [0,1] result is two columns
x = i % 2;

// y-index
// the equation yields a second iteration of the y-index i/2 rounded down
// domain is [0,..,i/2] result is half as many rows as serial array
y = i/2 - x * 0.5;

// when x-index is even create new row on working array
if(!x) arr[y] = new Array(2);

// store node value in working array by y and x
arr[y][x] = tmp;

}

// hand off working array for further evaluation and output
tableGen(e,arr,s);

}
weegillis
04-23-2011, 08:45 PM
This is the module that further evaluates the working table. A new table is generated that will overwrite the existing one in the download document. If no data is present, a "No data available" message is written in place of the table.


JavaScript

function tableGen(e,arr,s)
{

// hook on to parent element id e
var parent = document.getElementById(e);

// create a fresh table element
var table = document.createElement('table');

// set unique summary attribute on table element
table.setAttributeNode(attr('summary',s));

// cycle through working array one row at a time
for (var i = 0, f = 0, n = arr.length, row, col; i < n; i++)
{

// second column does not contain a null string so create row
if(arr[i][1]!="")
{

// create new tr element
row = document.createElement('tr');

// add class attribute if row count is even
if(f % 2) row.setAttributeNode(attr('class','even'));

// create column one table data element
col = document.createElement('td');

// populate td element with data from working array
col.innerHTML = (arr[i][0]);

// append element to row
row.appendChild(col);

// create column two table data element
col = document.createElement('td');

// populate td element with data from working array
col.innerHTML = arr[i][1];

// append element to row
row.appendChild(col);

// append row to table
table.appendChild(row);

// increment row counter
f = f + 1;

}

}

// clear contents of parent element
parent.innerHTML = "";

// test for row count of zero
if(!f)
{

// jump to 'No data' method
pGen(parent);

}
else
{

// append table to parent element
parent.appendChild(table);

}
}

function pGen(parent)
{
var par = document.createElement('p');
par.appendChild(document.createTextNode("No data available"));
parent.appendChild(par);
}
weegillis
04-24-2011, 01:46 AM
Javscript

function attr(x,y)
{
// create document attribute name x
var z = document.createAttribute(x);

// create node value y
z.nodeValue = y;

// return completed attribute node
return z;

}


This is code library fodder at its best. People who write code a thousand lines at a time have accumulated hundreds of this kind of 'primitive'. It's what most protocol libraries are made of. Nothing new though. It's also this kind of primitive that gave us BASIC.

Essentially, we are taking a chunk of code out of the logic flow, since it's basically moot, anyway. Coders have made this primitive part of their code arsenal and it is probably written into most frameworks.

The objective is to create an attribute with text node on a given element, a repetitive process when generating HTML code with script.
weegillis
04-24-2011, 02:33 AM
@Clicken: Intuitive based coding is no different from planning a week at the cottage. It comes down to what can you do with what you have, and what can you extend once you get there.

The last thing I would want to do is put you off the mechanics of the DOM. It is why I have kept to "proof of concepts" during this thread. I'm going by the seat of my pants, as we speak; hope upon hope someone will come alone to put this under fire. The tempering will be the better of it.

It goes back to my earlier comment that we need not shy away from something just because we think we're being scrutinized. Truth is we're not. Our work is. We can always do better.
Clicken
04-24-2011, 03:28 AM
wOw,..!!!


copy the code into your favorite editor and save as .html. The results will explain themselves.The results were very shy at first; but eventually, after intense study, contenplation, and a shot of 'Royal Crown' it finally spoke to me!

I will let you know what happens once I get it on the page and running...


The last thing I would want to do is put you off the mechanics of the DOM.I have no idea what you are talking about..
Clicken
04-24-2011, 05:23 AM
Just a note here:

Before applying the code onto the intended page I created a test page to see it in the browser. I noticed that it didn't create the class '.even' colored rows.

I do not want colored rows so that is fine for me but just thought I would report my findings.
weegillis
04-24-2011, 12:01 PM
Just a note here:

Before applying the code onto the intended page I created a test page to see it in the browser. I noticed that it didn't create the class '.even' colored rows.

I do not want colored rows so that is fine for me but just thought I would report my findings.

It could mean that the script is not running its full course. The bars should be present. Once you're sure the script is executing fully, you can always turn the color bar off, but for now I would keep them.


// to turn off color bar, comment out the line
// add class attribute if row count is even
// if(f % 2) row.setAttributeNode(attr('class','even'));


Everything working in Firefox. My filter isn't working properly in IE, like that's any surprise. Will need to keep digging into that problem. To make sure the filter works for you, we will need to know exactly what to filter. Obviously the variable placeholders aren't in the downloaded document. What exactly is in the 'empty' TDs?

If you have Firebug, you can view the generated code. Web Developer tools also has a View Generated Source option. This is where you need to look to see the actual code that the browser is seeing.
weegillis
04-24-2011, 01:16 PM
I have no idea what you are talking about..

The mechanics of DOM: Whether it's CSS, HTML or ECMA script (of which JavaScript is a subset), it all has to conform to the Document Object Model, the inner workings of the web browser. This is where we get the term DOM script.
weegillis
04-24-2011, 01:23 PM
Error checking: Again, you will need Firebug or some helper program that can report console errors. Open the inspector to Console and refresh the page to see if any errors are reported. If so, the script is not running to completion and the original document content is displaying. If the script runs its course, it overwrites the original, in which case the generated source code will show less rows (assuming some were ignored) and will show the .even class on every other TR.
weegillis
04-25-2011, 01:06 AM
This improves upon concept 2, with filters that do work in a range of browsers including IE for the conditions tested. Presentation and behavior have been separated from the document, and load (and are listed here) separately.



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Table re-generator</title>
<link href="css/tablegen.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<h1>Regenerated Tables</h1>
<h2>Types</h2>
<div id="types" class="data">
<table>
<tr><td> </td><td>&#160;</td></tr>
<tr><td>1</td><td>One</td></tr>
<tr><td> </td><td> </td></tr>
<tr><td>2</td><td>Two</td></tr>
<tr><td>3</td><td>Three Three Three</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>4</td><td>Four</td></tr>
<tr><td></td><td></td></tr>
<tr><td>5</td><td>Five</td></tr>
<tr><td>6</td><td>Six</td></tr>
</table>
</div>
<h2>Sizes</h2>
<div id="sizes" class="data">
<table>
<tr><td> </td><td> </td></tr>
<tr><td>1</td><td>S</td></tr>
<tr><td></td><td></td></tr>
<tr><td>2</td><td>M</td></tr>
<tr><td>3</td><td>L</td></tr>
<tr><td> </td><td>&#160;</td></tr>
<tr><td>4</td><td>T</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>5</td><td>XL</td></tr>
<tr><td>6</td><td>XXL</td></tr>
</table>
</div>
<h2>Colors</h2>
<div id="colors" class="data">
<table>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>1</td><td>Red</td></tr>
<tr><td> </td><td>&#160;</td></tr>
<tr><td>2</td><td>Orange</td></tr>
<tr><td>3</td><td>Yellow</td></tr>
<tr><td></td><td></td></tr>
<tr><td>4</td><td>Green</td></tr>
<tr><td> </td><td> </td></tr>
<tr><td>5</td><td>Blue</td></tr>
<tr><td>6</td><td>Violet</td></tr>
</table>
</div>
<h2>Null Test</h2>
<div id="nulls" class="data">
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td>&#160;</td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</div>
</div>
<script src="behaviors/dhtml.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function()
{
tableRead('types','List by type');
tableRead('sizes','List by size');
tableRead('colors','List by color');
tableRead('nulls','List by nulls');
}
</script>
</body>
</html>



tablegen.css

body {text-align:center;font:normal 1em "Trebuchet MS", sans-serif;color:#000;background:#fff;}
h1 {font-size: 1.3em;}
h2 {font-size: 1.1em;}
table {border-collapse: collapse; width: 100%;}
td {width: 50%; text-align: left;}
.data {width: 60%; margin: 0 auto;}
.even {background-color:#eee;}



dhtml.js

function tableRead(e,s)
{
var arr = [];
var ser = document.getElementById(e).getElementsByTagName('t d');
for(var k = 0, n = ser.length, tmp, x, y; k < n; k++)
{
tmp = ser[k].childNodes[0];
tmp = (typeof tmp == "undefined") ? "" : ser[k].childNodes[0].nodeValue;
tmp = (/\S\w*/.test(tmp)) ? tmp : "";
tmp = tmp.replace(String.fromCharCode(160),""); // added for IE
x = k % 2;
y = (k-x)/2;
if(!x) arr[y] = new Array(2);
arr[y][x] = tmp;
}
tableGen(e,arr,s);
}

function tableGen(e,arr,s)
{
var parent = document.getElementById(e);
var table = document.createElement('table');
table.setAttributeNode(attr('summary',s));
for (var i = 0, f = 0, n = arr.length, row, col; i < n; i++)
{
if(arr[i][1]!="")
{
row = document.createElement('tr');
if(f % 2) row.setAttributeNode(attr('class','even'));
col = document.createElement('td');
col.innerHTML = (arr[i][0]);
row.appendChild(col);
col = document.createElement('td');
col.innerHTML = arr[i][1];
row.appendChild(col);
table.appendChild(row);
f += 1;
}
}
parent.innerHTML = "";
if(!f) {
noData(parent);
}
else
{
parent.appendChild(table);
}
}

function noData(parent)
{
var par = document.createElement('p');
par.appendChild(document.createTextNode("No data available"));
parent.appendChild(par);
}

function attr(name,value)
{
var attribute = document.createAttribute(name);
attribute.nodeValue = value;
return attribute;
}
Clicken
04-25-2011, 02:53 AM
Firebug was downloaded but I wasn't sure how to use it. My administrator can help me with it, but later. Meanwhile...


You have already started to answer my next question(s).

This tableRead script below the table...
<script src="bahviors/dhtml.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function()
{
tableRead('types','List by type');
tableRead('sizes','List by size');
tableRead('colors','List by color');
tableRead('nulls','List by nulls');
}
</script> ... needs to stay on the page with the table and before the closing body tag.

It also calls the external javascript. Can the js be called from the <head> like other scripts are called or does it have to be called here? For now it is staying the way you have it but I am curious to know.

>>
I have copied the code for Proof of Concept 3, separated the css and javascripts to external files. Next I will apply it to the tables on a page and let you know how it went. Of course I have made a back up of my page, just in case!
weegillis
04-25-2011, 11:51 AM
This tableRead script below the table ... needs to stay on the page with the table and before the closing body tag.

It also calls the external javascript. Can the js be called from the <head> like other scripts are called or does it have to be called here? For now it is staying the way you have it but I am curious to know.

In this particular instance, the script is loaded after the page loads. The import tag can go in the HEAD. As it appears here (a 'window.onload' event) the inline script could go either in the head or where it is positioned at the end of the body. It's my habit to defer any script that absolutely does not need to be present at page load; ergo, placement of the script as such.

Since there can be only one 'window.onload' event in any one document, this might conflict with any other scripts that are firing at load time. Can you please supply us with a snippet from your document that shows us what other scripts are loading? This one may have to be added to an already existing list of load events.

The inline script can be left where it is, written like POC #2 (without the 'window.load' function). It will still fire after the page (and other scripts). If not written as a function, it has to be at the bottom of the page.

ADD: The order of the two script elements is important. The IMPORT must come first, else tableRead() will be 'undefined' when the inline script fires. We need our tools to be present when we call for them.
Clicken
04-25-2011, 08:50 PM
These tags are on the page.

In the HEAD...
'load_js' this loads the index.php - when I open it, this is all that's there - // Blank file to stop directory browsing.

'script type="text/javascript" src=".../search.js"> - this calls a 'function toggleLayer( whichLayer )'


And just before the closing body is this tag...

'load_js_last' - This is for the maps.


>>> Progress Report<<<

Created a DIV around my table with the id 'features' and the class 'data'.
Changed the tableRead to ('features','list by features')
removed the TD classes from my table.
Followed the POC 3 method for scripts.

Result: Nothing happed.


Comments: Thinking... What to try next.

Changed to POC 2 script @ bottom of page... Waa Laa, We Have a Regenerated table!!!!


:clapping hands:


<big smile>


:victory dance:


Thank-you weegillis, you are awesome!!!
weegillis
04-25-2011, 10:19 PM
Note that the JS and CSS files in POC #3 are in separate folders, in the same directory as the HTML. If you want them all together, then remove their folder paths in the HTML.

The POC #3 script should just drop right in where the POC #2 is, though it would be preferred it not be embedded in an HTML document. #3 is just cleaner, and more complete.

It's not much different except I used more explicit naming for variables and simplified the math. The biggest difference is the added filter for IE. You will need it if you are to filter & nbsp ; and & #160 ; from the source data in those browsers. All other browsers are perfectly happy with the filter in POC #2.
weegillis
04-25-2011, 11:23 PM
@Clicken: Forgot to toss this in last post:



<script src="behaviors/dhtml.js" type="text/javascript"></script>
<script type="text/javascript">
tableRead('types','List by type');
tableRead('sizes','List by size');
tableRead('colors','List by color');
tableRead('nulls','List by nulls');
</script>


tableRead('types','List by type'); reads, tableRead('Table parent id','Table summary text');. This is what gives you the ability to have several tables in the same document. The summary is a basic requirement to conform with WAIG 1.0 recommendations for data tables.

Use the #3 script in external file, but #2 inline in the document at /body. I fixed the folder path typo (supposed to read, 'behaviors'). Or just drop the script in with the HTML file.
weegillis
04-25-2011, 11:41 PM
And oh, you're very welcome. It was a fun project that dealt with multiple challenges. I'll be able to add this one to the keepers. Ciao!