I want to ask you all for some advice on integrating JavaScript and Server-Side Scripting. Be it PHP, Perl, ASP, JSP and so on and so on. The server-side language can be any of the many out there. Because what I want to work mainly on is grabbing server-side output and using it with client-side JavaScript. We would also be using a database. Now here goes …
Ok, let us start by making a database. Here is the database we will be pulling from. It’s called XYZ_DB and the table name is user_info
user_info
Id --- f_name --- l_name --- fav_color
1 ----- Paul ------ Hope ------ Blue
1 ----- John ------ Paul ------ Green
>>> ------------There are a total of on hundred names in the table-------------- <<<
Ok that’s the table we will be pulling from. Now we will grab the info that we need from the database with server-side scripting
Pseudocode
-------Note –$ sign denotes Variable ---------
include (connection_script.inc);
// Put into a variable the SQL command
$sql_grab = “select * from user_info“;
// Execute the SQL command
$grab_info = execute_query( $sql_grab );
// Use a while loop to grab the info off of the database
WHILE ($get_info = grab_all_object_from_db ($grab_info))
{
----- Here we get all the info and put it into variables using a while loop -----
}
That is the basics of the server-side script. After we grab the info we need, we want to put it into a JavaScript function. This function will grab the info from row one of the database table and put it into an array. Then it will grab that array that holds all the info for row one and put it into another array. It will repeat the process over and over again till it has gotten all the info it needs from the table and has put it all in arrays.
Pretty much doing this
Pseudocode
ArrayVarOne[0] = “Info for line one in database table”;
ArrayVarOne[1] = “Info for line two in database table”;
-----------And so on--------------
ArrayVarTwo = ArrayVarOne;
Something like that. This is the part that’s gets confusing for me.
Why I need to do this is because I will be displaying all the info from the user_info database table into an HTML Table that is dynamically made. I can do this with just server-side scripting but my employer does not want me to put too much strain on the server. So we thought of grabbing the info with server-side and outputting it into client-side that way the server-side script is executed once per hit and the info it needs is displayed through JavaScript.
Hope this isn’t too confusing. :)
Thanks
CJ
So your server-side script grabs the data, then prints the JS code necessary to build a table with the data. How is this kinder to the server than just printing the table directly?
Or have I misunderstood?
I also investigated XML & XSLT for this - but at the mo it ain't up to doing this kind of thing.... look at date sorting, and anything a little out of the ordinary.
It becomes server friendly when you do lots of sorting and filtering client side. (sorting included... filter - exercise for the reader).
Erm - caveats - not sure if it works on NN - I used it on Intranet contracts, don't have the time to make it generic atm. Will take lots of fiddling to get working.
If anyone does get it going in a generic please post here... improvements and suggestions appreciated.
WARNING: The code below needs a lot to make it work ... no copying and pasting. Also -- I've been bad and chucked pseudo code and perl and javascript all in one place...
[perl]
# © Gethan - use this as seen fit but post any
# enhancements back to WebmasterWorld ;)
### In perl.
print "var header= new Array();\n";
print "header[0] = new Array('Name', 'Date', 'NumDate');\n";
# Title of column
print "header[1] = new Array('0','2','2');\n";
# On click sort on this column.
print "header[2] = new Array('0','0','0');\n";
# Sorted asc or desc
my @header3 = ('0','0','1');
# numeric sorts = 1
print "header[3] = new Array('1','1','0')";
# Display the column or not . 1 display 0 don't.
print "header[4] = new Array('/cgi-bin/fullinfo.pl?name=','0');\n";
# Link or not ... 0 = not anything else is the href
print "header[5] = new Array('0','0','0');\n";
# Use this value as the $key in the link.
print "header[6] = new Array('0','0','1');\n";
# Is this field numeric? (also means align right)
# Data
print "array = new Array();
foreach ($rows) {
print "array[$count] = new Array($_[0],$_[1],$_[2])";
# etc.
}
## Then javascipt.
# Remember to call the script which generates the data as a
# link to a javascript source
function displaytable(array,header) {
var i = 0; var j = 0;
var contents = "<table border=1 cellpadding=2 cellspacing=0 bgcolor='#eeffee'><tr>"; // Do the headings (i=0)
var inputs = '<tr>';
while (header[i][j]) {
if (header[3][j] == 1) {
contents = contents + "<th><a href='javascript:sortArrayNum(array,header,"+header[1][j]+")' onClick='this.style.cursor=\"wait\"'>"+header[i][j]+"</a></th>";
inputs += '<td><input type=text size=4 name=fil'+j+' onChange=\'displaytable(array,header)\'></td>';
}
j++;
}
contents = contents+"</tr>";
i = 0;
while (array[i]) {
line = '';
keep = 1;
j=0;
if (i % 2) {bg= '#f0f0fa';} else {bg = '#ffffda'}
line = line+"<tr bgcolor="+bg+">";
while (array[i][j]) {
//eval("re = new RegExp(test.elements["+j+"].value,'i');");
//if (array[i][j].search(re) = 0) {keep = 1};
val = array[i][j];
if (val == '-1') {val = ' ';}
if (header[3][j] == 1) {
// now do the link if applicable.
if (header[4][j] == '0') {
if (header[6][j] == '0') {
line = line + "<td>"+val+"</td>";
} else {
line = line + "<td align=right>"+val+"</td>";
}
} else {
href = header[4][j];
key = array[i][header[5][j]];
line = line + "<td><a href='"+href+key+"'>"+val+"</a></td>";
}
}
j++;
}
line = line+"</tr>";
i++;
if (keep) {contents = contents + line;}
}
contents = contents + "</table>";
document.all("contents").innerHTML = contents;
}
function compareNum(a,b) {
if ((a[col] - b[col]) == 0) {
if (header[6][lastcol] == '1') {x = compareNum2(a,b);}
else {x = compare2(a,b);}
return x;
} else {
return a[col] - b[col];
}
}
function compare(a,b) {
if (a[col] < b[col]) { return -1;}
if (a[col] > b[col]) { return 1;}
if (header[6][lastcol] == '1') {
x = compareNum2(a,b);
} else {
x = compare2(a,b);
}
return x;
}
//Custom sort method that takes a column number and sorts the top array based on this -- headers.. hmm. works with numbers eg 10 is greater than 2.
function sortArrayNum(array,header,n) {
lastcol = col;
col = n;
//alert('Header[1]['+col+'] = '+header[1][col]);
if (header[6][col] == '1') {
array.sort(compareNum);
} else {
//alert('Header[1]['+col+'] = '+header[1][col]);
array.sort(compare);
}
if (header[2][col] % 2) {array.reverse();}
header[2][col]++;
displaytable(array,header);
}
[/perl]
Sugarkane, yep you've got it right. The reason it's better this way is cause it does not have to keep asking the server to keep pulling info from the DB and the client doesn't have to keep waiting every time it goes back to get the info. We use a content management server named Eprise and for some reason or another when you ask it to search for info, be it on a db or on a Excel sheet or whatever it may be. It takes it's sweet time to do it. This way you don't need to wait that long because the client lready has it client-side and it only took him once to wait a few seconds.
Oh, thanks Gethan for the code. But would you be able to explain the bolded areas a little more.
function displaytable(array,header) {
Why are we giving them 0 values
var i = 0; var j = 0;
var contents = "<table border=1 cellpadding=2 cellspacing=0 bgcolor='#eeffee'><tr>"; // Do the headings (i=0)
var inputs = '<tr>';
Also if you could explain this a bit as well
while (header[i][j]) {
Here as well
if (header[3][j] == 1) {
contents = contents + "<th><a href='javascript:sortArrayNum(array,header,"+header[1][j]+")' onClick='this.style.cursor=\"wait\"'>"+header[i][j]+"</a></th>";
inputs += '<td><input type=text size=4 name=fil'+j+' onChange=\'displaytable(array,header)\'></td>';
}
j++;
}
Thanks and sorry to bother you so much :)
Just the way I code - in JS could be skipped (too much use strict ;))
> while (header[i][j]) {
header[0] is the array for the column headings. (i = 0 above). So while we have values build up the heading row.
> if (header[3][j] == 1) {
The 3 row in the header array indicates whether it should be shown or just available for sorting on. So if the array is not 1 don't bother doing anything.
> inputs += '<td><input type=text size=4 name=fil'+j+' onChange=\'displaytable(array,header)\'></td>';
This whole line can get dropped ! .. its for the filtering system that I haven't got round to finishing yet. Said it was rough and ready ;)
Basically the javascript renders an array of arrays - I used two arrays to do this. The header array is used to control the formating, sorting, naming etc and the array array holds the data.
I hope you find it useful even in its current form... a bundle of snippets.
Thanks :)
