ninerloyal
Programmer
I am trying to create a program that allows customers of a lighting store to go online to make lighting selections. The parameters I have to work with, however, make this project very difficult:
1. Most customers build with a contractor - who only wants them to select from a certain set of lights.
2. In order to be useful, the program must allow the non-techie lighting store employees to create AND publish the selection pages that their customers will use to make selections.
3. Each customer's home is different, so the lighting store wants to be able to make a customized list of the lights that each customer must select for thier home, and then have that list put out onto the web for their customers to use.
4. The use of anything server-side is very limited...so this must be done, for the most part in HTML and Javascript. Although, once the selections are made, we have access to some server-side resources that will email the customers selection to the lighting store employees. We also have the ability to upload as many html and js files TO the server as we need.
What I was thinking is that I would use Microsoft Excel as the user interface for the lighting store employees (just put the code in hidden cells and then lock the sheets, and have only the cells that they need to enter info into are editable - I then have them save the file as a tab delimited file with a .html or a .js extension) and I have gotten that part figured out, but the thing that is really throwing me off is figuring out how to create an HTML file that opens up a child window (where the customer will make thier selections) and then when they make a selection, it will write that info BACK to the parent window.
One wrinkle is that I have to have the child window be written BY a javascript. The reason being that each Contractor that has customers using this will want their customers to select from a limited set of lights...so to do that I was going to create an excel file (similar to the one described above) that the lighting employees can use to input the lights that each Contractor wants to have available to their customers...and then have them save each one as a .js file that can be called from the customer window.
So, for example, if I have a Contractor named ABCbuilders, and they have the Jones family as a customer, I would create an HTML page (using excel as the GUI) named jones.html for the Jones job. I would also have created a javascript named ABCbuilders.js that would contain the code that could be used by any of the ABC customer pages (of which jones.html would be one) to "write" the page that the customers would use to select lights from. The jones.html page would need to have a list of all of the rooms that were needing lighting selections, it would need to open up a child window that had all of the contractors approved lighting options in it (as written by the ABCbuilders.js file) and it would then need to pass the customer's selection BACK to the parent window when the customer clicks it - keeping in mind that it will need to pass it back to the proper room.
Here is what I have gotten so far:
### PARENT WINDOW - CUSTOMER SELECTION PAGE ###
<HTML>
<HEAD>
<TITLE>Hansen Lighting, Inc.</TITLE>
<!-- START of "global" style sheet -->
<LINK REL="StyleSheet" href="styles1.css" TYPE="text/css">
<!-- End of "global" style sheet -->
<SCRIPT>
function makeSelections(capName)
{
var windowFeatures = 'directories=yes,location=yes,width=800, left=15, top=15,menubar=yes,status=yes,titlebar=yes,toolbar=yes,resizable=yes,scrollbars=yes';
var newWin = open('', 'myDoc', windowFeatures);
\\THIS IS THE SCRIPT THAT WILL "WRITE" THE CHILD WINDOW
newWin.document.writeln("<SCRIPT SRC='writepage.js'><\/SCRIPT>");
newWin.document.writeln("<SCRIPT>writePage();<\/SCRIPT>");
}
</script>
</HEAD>
<BODY BGCOLOR='#776745' TEXT='#000000' LINK='#0000FF' VLINK='#0000FF' ALINK='#FF0000'>
<TABLE ALIGN='center' BORDER='0' CELLSPACING='0' CELLPADDING='0' WIDTH='800' BGCOLOR='#433F22'><TR><TD WIDTH='177'><IMG SRC=' BORDER='0' WIDTH='186' HEIGHT='177'></TD>
<TD> </TD>
<TD><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5">
<TR><TD><FONT CLASS="header">Contractor:</FONT></TD><TD><FONT CLASS="header1">ABC Builders</FONT></TD></TR>
<TR><TD><FONT CLASS="header">Lighting Sales Rep:</FONT></TD><TD><FONT CLASS="header1">Jeff Robert (801) 225-4459</FONT></TD></TR>
<TR><TD><FONT CLASS="header">Customer Name:</FONT></TD><TD><FONT CLASS="header1">Johnson, Fred</FONT></TD></TR>
<TR><TD><FONT CLASS="header">Lighting Allowance:</FONT></TD><TD><FONT CLASS="header1">$1,500.00</FONT></TD></TR>
<TR><TD><FONT CLASS="header">Construction Address:</FONT></TD><TD><FONT CLASS="header1">2138 N. Mockingbird Falls Superior Lane - Spanish Fork, Utah</FONT></TD></TR></TABLE></TD></TR></TABLE>
<TABLE ALIGN='center' BORDER='0' CELLSPACING='0' CELLPADDING='15' WIDTH='800' BGCOLOR='#FFFFFF'>
<FORM NAME="ItemSelections">
<TR>
<TD><FONT CLASS="text">ROOM: </FONT><INPUT TYPE="Text" SIZE="30" VALUE="Room Name"></TD>
<TD WIDTH="300"><FONT CLASS="text">ITEM: </FONT>
<INPUT TYPE="Text" VALUE="Item Not Yet Selected" MAXLENGTH="150" NAME="room1" SIZE="30"></TD>
<TD><INPUT TYPE="Submit" VALUE="Edit Selection" onclick="makeSelections(document.ItemSelections.room1.value)">
</TD>
</TR>
<TR><TD COLSPAN="3" BACKGROUND="linedot.gif"></TD></TR>
<TR>
<TD><FONT CLASS="text">ROOM: </FONT><INPUT TYPE="Text" SIZE="30" VALUE="Room Name"></TD>
<TD WIDTH="300"><FONT CLASS="text">ITEM: </FONT><INPUT TYPE="Text" VALUE="Item Not Yet Selected" MAXLENGTH="150" SIZE="30"></TD>
<TD><INPUT TYPE="Submit" VALUE="Edit Selection">
</TD>
</TR>
<TR><TD COLSPAN="3" BACKGROUND="linedot.gif"></TD></TR>
<TR>
<TD><FONT CLASS="text">ROOM: </FONT><INPUT TYPE="Text" SIZE="30" VALUE="Room Name"></TD>
<TD WIDTH="300"><FONT CLASS="text">ITEM: </FONT><INPUT TYPE="Text" VALUE="Item Not Yet Selected" MAXLENGTH="150" SIZE="30"></TD>
<TD><INPUT TYPE="Submit" VALUE="Edit Selection">
</TD>
</TR>
<TR><TD COLSPAN="3"><HR></TD></TR>
<TR><TD COLSPAN="3" ALIGN="RIGHT">
<TABLE>
<TR><TD ALIGN="RIGHT" COLSPAN="3">
<FONT CLASS="text">ORDER SUB-TOTAL: </FONT><INPUT TYPE="Text" SIZE="15" VALUE="$0">
</TD></TR>
<TR><TD ALIGN="RIGHT" COLSPAN="3">
<FONT CLASS="text">DELIVERY: </FONT><INPUT TYPE="Text" SIZE="15" VALUE="$0">
</TD></TR>
<TR><TD ALIGN="RIGHT" COLSPAN="3">
<FONT CLASS="text">SALES TAX: </FONT><INPUT TYPE="Text" SIZE="15" VALUE="$0">
</TD></TR>
<TR><TD ALIGN="RIGHT" COLSPAN="3">
<FONT CLASS="text">TOTAL: </FONT><INPUT TYPE="Text" SIZE="15" VALUE="$0">
</TD></TR>
</TABLE>
</TD></TR>
<TR><TD COLSPAN="3"><HR></TD></TR>
<TR><TD COLSPAN="3"><CENTER><FONT CLASS="Text">Please Type Your Name Here: </FONT><INPUT TYPE="Text" MAXLENGTH="150" SIZE="50"> <INPUT TYPE="Submit" VALUE="Submit Order"></CENTER></TD></TR>
<TR><TD COLSPAN="3"><HR></TD></TR>
<TR><TD COLSPAN="3"><CENTER><FONT CLASS="terms-head">Terms & Conditions</FONT></CENTER><BR><FONT CLASS="terms">...</FONT></TD></TR>
</FORM>
</TABLE>
</BODY>
</HTML>
### CHILD WINDOW JAVASCRIPT SAVED AS writepage.js AND CALLED BY THE ABOVE PARENT PAGE###
function writePage()
{
document.write("<HTML>");
document.write("<HEAD>");
document.write(" <TITLE>Hansen Lighting</TITLE>");
document.write("<script langauge='javascript'>");
document.write("function sendSelection(btn)");
document.write("$#123");
document.write("var selection=unescape(btn.name);");
document.write("opener.document.ItemSelections.room1.value = selection;");
document.write("self.close();");
document.write("$#125");
document.write("function back()");
document.write("$#123");
document.write("self.close();");
document.write("}");
document.write("<\/script>");
document.write("</HEAD>");
document.write ("<BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF VLINK=#800080 ALINK=#FF0000>");
document.write ("<FORM NAME='itemForm'>");
document.write ("<input type='submit' name='XYZ-123/ORB' value='Select This Fixture' onclick='sendSelection(this)'>");
document.write ("<input type='submit' name='1Shacka' value='Select This Fixture' onclick='sendSelection(this)'>");
document.write("<input type='submit' value='Close' name='submit' onclick='back()'>");
document.write ("</FORM>");
document.write ("</BODY>");
document.write ("</HTML>");
}
###########
The problems:
1. I can't seem to get the child window to write back to the parent window.
2. If they push the "edit selection" button in the parent window AFTER they have made a selection, it erases the selection and defaults back to the input value which is ITEM NOT YET SELECTED. The problem here is that they may go out and look at possibly changing selections, only to decide to stick with what they originally had...but when they hit the "Cancel" button in the child window it takes them back to the parent window and the original selection is erased.
BTW - If anyone knows of a better way to do this...by all means...let me know (I'm admittedly a novice coder).
Thanks
1. Most customers build with a contractor - who only wants them to select from a certain set of lights.
2. In order to be useful, the program must allow the non-techie lighting store employees to create AND publish the selection pages that their customers will use to make selections.
3. Each customer's home is different, so the lighting store wants to be able to make a customized list of the lights that each customer must select for thier home, and then have that list put out onto the web for their customers to use.
4. The use of anything server-side is very limited...so this must be done, for the most part in HTML and Javascript. Although, once the selections are made, we have access to some server-side resources that will email the customers selection to the lighting store employees. We also have the ability to upload as many html and js files TO the server as we need.
What I was thinking is that I would use Microsoft Excel as the user interface for the lighting store employees (just put the code in hidden cells and then lock the sheets, and have only the cells that they need to enter info into are editable - I then have them save the file as a tab delimited file with a .html or a .js extension) and I have gotten that part figured out, but the thing that is really throwing me off is figuring out how to create an HTML file that opens up a child window (where the customer will make thier selections) and then when they make a selection, it will write that info BACK to the parent window.
One wrinkle is that I have to have the child window be written BY a javascript. The reason being that each Contractor that has customers using this will want their customers to select from a limited set of lights...so to do that I was going to create an excel file (similar to the one described above) that the lighting employees can use to input the lights that each Contractor wants to have available to their customers...and then have them save each one as a .js file that can be called from the customer window.
So, for example, if I have a Contractor named ABCbuilders, and they have the Jones family as a customer, I would create an HTML page (using excel as the GUI) named jones.html for the Jones job. I would also have created a javascript named ABCbuilders.js that would contain the code that could be used by any of the ABC customer pages (of which jones.html would be one) to "write" the page that the customers would use to select lights from. The jones.html page would need to have a list of all of the rooms that were needing lighting selections, it would need to open up a child window that had all of the contractors approved lighting options in it (as written by the ABCbuilders.js file) and it would then need to pass the customer's selection BACK to the parent window when the customer clicks it - keeping in mind that it will need to pass it back to the proper room.
Here is what I have gotten so far:
### PARENT WINDOW - CUSTOMER SELECTION PAGE ###
<HTML>
<HEAD>
<TITLE>Hansen Lighting, Inc.</TITLE>
<!-- START of "global" style sheet -->
<LINK REL="StyleSheet" href="styles1.css" TYPE="text/css">
<!-- End of "global" style sheet -->
<SCRIPT>
function makeSelections(capName)
{
var windowFeatures = 'directories=yes,location=yes,width=800, left=15, top=15,menubar=yes,status=yes,titlebar=yes,toolbar=yes,resizable=yes,scrollbars=yes';
var newWin = open('', 'myDoc', windowFeatures);
\\THIS IS THE SCRIPT THAT WILL "WRITE" THE CHILD WINDOW
newWin.document.writeln("<SCRIPT SRC='writepage.js'><\/SCRIPT>");
newWin.document.writeln("<SCRIPT>writePage();<\/SCRIPT>");
}
</script>
</HEAD>
<BODY BGCOLOR='#776745' TEXT='#000000' LINK='#0000FF' VLINK='#0000FF' ALINK='#FF0000'>
<TABLE ALIGN='center' BORDER='0' CELLSPACING='0' CELLPADDING='0' WIDTH='800' BGCOLOR='#433F22'><TR><TD WIDTH='177'><IMG SRC=' BORDER='0' WIDTH='186' HEIGHT='177'></TD>
<TD> </TD>
<TD><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5">
<TR><TD><FONT CLASS="header">Contractor:</FONT></TD><TD><FONT CLASS="header1">ABC Builders</FONT></TD></TR>
<TR><TD><FONT CLASS="header">Lighting Sales Rep:</FONT></TD><TD><FONT CLASS="header1">Jeff Robert (801) 225-4459</FONT></TD></TR>
<TR><TD><FONT CLASS="header">Customer Name:</FONT></TD><TD><FONT CLASS="header1">Johnson, Fred</FONT></TD></TR>
<TR><TD><FONT CLASS="header">Lighting Allowance:</FONT></TD><TD><FONT CLASS="header1">$1,500.00</FONT></TD></TR>
<TR><TD><FONT CLASS="header">Construction Address:</FONT></TD><TD><FONT CLASS="header1">2138 N. Mockingbird Falls Superior Lane - Spanish Fork, Utah</FONT></TD></TR></TABLE></TD></TR></TABLE>
<TABLE ALIGN='center' BORDER='0' CELLSPACING='0' CELLPADDING='15' WIDTH='800' BGCOLOR='#FFFFFF'>
<FORM NAME="ItemSelections">
<TR>
<TD><FONT CLASS="text">ROOM: </FONT><INPUT TYPE="Text" SIZE="30" VALUE="Room Name"></TD>
<TD WIDTH="300"><FONT CLASS="text">ITEM: </FONT>
<INPUT TYPE="Text" VALUE="Item Not Yet Selected" MAXLENGTH="150" NAME="room1" SIZE="30"></TD>
<TD><INPUT TYPE="Submit" VALUE="Edit Selection" onclick="makeSelections(document.ItemSelections.room1.value)">
</TD>
</TR>
<TR><TD COLSPAN="3" BACKGROUND="linedot.gif"></TD></TR>
<TR>
<TD><FONT CLASS="text">ROOM: </FONT><INPUT TYPE="Text" SIZE="30" VALUE="Room Name"></TD>
<TD WIDTH="300"><FONT CLASS="text">ITEM: </FONT><INPUT TYPE="Text" VALUE="Item Not Yet Selected" MAXLENGTH="150" SIZE="30"></TD>
<TD><INPUT TYPE="Submit" VALUE="Edit Selection">
</TD>
</TR>
<TR><TD COLSPAN="3" BACKGROUND="linedot.gif"></TD></TR>
<TR>
<TD><FONT CLASS="text">ROOM: </FONT><INPUT TYPE="Text" SIZE="30" VALUE="Room Name"></TD>
<TD WIDTH="300"><FONT CLASS="text">ITEM: </FONT><INPUT TYPE="Text" VALUE="Item Not Yet Selected" MAXLENGTH="150" SIZE="30"></TD>
<TD><INPUT TYPE="Submit" VALUE="Edit Selection">
</TD>
</TR>
<TR><TD COLSPAN="3"><HR></TD></TR>
<TR><TD COLSPAN="3" ALIGN="RIGHT">
<TABLE>
<TR><TD ALIGN="RIGHT" COLSPAN="3">
<FONT CLASS="text">ORDER SUB-TOTAL: </FONT><INPUT TYPE="Text" SIZE="15" VALUE="$0">
</TD></TR>
<TR><TD ALIGN="RIGHT" COLSPAN="3">
<FONT CLASS="text">DELIVERY: </FONT><INPUT TYPE="Text" SIZE="15" VALUE="$0">
</TD></TR>
<TR><TD ALIGN="RIGHT" COLSPAN="3">
<FONT CLASS="text">SALES TAX: </FONT><INPUT TYPE="Text" SIZE="15" VALUE="$0">
</TD></TR>
<TR><TD ALIGN="RIGHT" COLSPAN="3">
<FONT CLASS="text">TOTAL: </FONT><INPUT TYPE="Text" SIZE="15" VALUE="$0">
</TD></TR>
</TABLE>
</TD></TR>
<TR><TD COLSPAN="3"><HR></TD></TR>
<TR><TD COLSPAN="3"><CENTER><FONT CLASS="Text">Please Type Your Name Here: </FONT><INPUT TYPE="Text" MAXLENGTH="150" SIZE="50"> <INPUT TYPE="Submit" VALUE="Submit Order"></CENTER></TD></TR>
<TR><TD COLSPAN="3"><HR></TD></TR>
<TR><TD COLSPAN="3"><CENTER><FONT CLASS="terms-head">Terms & Conditions</FONT></CENTER><BR><FONT CLASS="terms">...</FONT></TD></TR>
</FORM>
</TABLE>
</BODY>
</HTML>
### CHILD WINDOW JAVASCRIPT SAVED AS writepage.js AND CALLED BY THE ABOVE PARENT PAGE###
function writePage()
{
document.write("<HTML>");
document.write("<HEAD>");
document.write(" <TITLE>Hansen Lighting</TITLE>");
document.write("<script langauge='javascript'>");
document.write("function sendSelection(btn)");
document.write("$#123");
document.write("var selection=unescape(btn.name);");
document.write("opener.document.ItemSelections.room1.value = selection;");
document.write("self.close();");
document.write("$#125");
document.write("function back()");
document.write("$#123");
document.write("self.close();");
document.write("}");
document.write("<\/script>");
document.write("</HEAD>");
document.write ("<BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF VLINK=#800080 ALINK=#FF0000>");
document.write ("<FORM NAME='itemForm'>");
document.write ("<input type='submit' name='XYZ-123/ORB' value='Select This Fixture' onclick='sendSelection(this)'>");
document.write ("<input type='submit' name='1Shacka' value='Select This Fixture' onclick='sendSelection(this)'>");
document.write("<input type='submit' value='Close' name='submit' onclick='back()'>");
document.write ("</FORM>");
document.write ("</BODY>");
document.write ("</HTML>");
}
###########
The problems:
1. I can't seem to get the child window to write back to the parent window.
2. If they push the "edit selection" button in the parent window AFTER they have made a selection, it erases the selection and defaults back to the input value which is ITEM NOT YET SELECTED. The problem here is that they may go out and look at possibly changing selections, only to decide to stick with what they originally had...but when they hit the "Cancel" button in the child window it takes them back to the parent window and the original selection is erased.
BTW - If anyone knows of a better way to do this...by all means...let me know (I'm admittedly a novice coder).
Thanks
