Not sure how to deal with hidden boxes.... 1

[reportingbuzz]

Hi,

Not sure if I have to post this question here.

I have an admin page which has a textbox followed by a submit button and a horizontal rule - <HR>. On load of the page, this is all the admin users see. Only after the submit button is clicked, then the users get to see the Employee_Report.asp below the <HR>.

Within the Employee_report.asp is a form which has 4 hidden input boxes and other visible controls.

My Javascript looks into the hidden textboxes to maintain the state of the browser.

So when I load the page as an admin user, since the button is not yet clicked and Employee_report.asp is not yet included, my Javascript errs with regards to the hidden boxes with the message

document.commission.hState.Value is either null or not an object

So within the Javascript, is there a way to conditionally call the function below only when employee_report.asp is displayed.

function do_onload()
{

	//Enact the client behavior by extracting the contents of the hState
	//and expanding back again so that the last selected employee is focused.

	openedItems = document.commission.hState.value

	if (openedItems != "")
	{
		//alert('Here b4 ' + openedItems + "'");
		var displayItems = openedItems.split("&");
		for (i=0; i<displayItems.length; i++)
		{
			if(displayItems[i].length != 0)
			{
				//Set the value to 'block'
				//alert(displayItems[i]);
				elID = 'UI_'+displayItems[i];
				obj = document.getElementById(elID).style;
				obj.display = 'block'
			}

		}
	}

	//Remember the last report clicked on. On load of the page, no value exists

	openedCrystalItem = document.commission.hCrystalRadio.value

	if (openedCrystalItem != "")
	{
		//alert(openedCrystalItem);
		for(i=0;i<document.commission.crystalradio.length;i++) {
			if (document.commission.crystalradio[i].value == openedCrystalItem) {
				document.commission.crystalradio[i].checked = true;
			}
		}
	}

	//Remember the last date clicked on. On load of the page, no value exists.

	openedDateItem = document.commission.hPeriod.value
	//alert(openedDateItem);
	for(i=0;i<document.commission.period.options.length;i++) {
		if (document.commission.period.options[i].value == openedDateItem) {
			document.commission.period.selectedIndex = i;
		}
	}
}

Hope I did not confuse you.

Thanks.

 

[reportingbuzz]

Then immediately after the above function, I have the following line:

window.onload = do_onload

so the function is called onLoad of the function.

Since it is only 1 HTML page with ASP include file, the function is searching for elements within the include file which is not yet loaded until the admin users emter an emp id in the textbox and then click on the submit button.

Any ideas?

 

[reportingbuzz]

Now that I am thinking more about this, is there a way in Javascript to see if a particular HTML object exists or not. Only if it exists, then call the window.onload = do_onload function.

Something like:

if (object exists)
{
window.onload = do_onload
}

Thanks.

 

[reportingbuzz]

Before calling a function, I would like to check if an object exists or now. If it does not, then do not call the function, else call the function.

I did something like this:

if (getElementById("hEmpID") == null && getElementById("hCrystalRadio") == null)
{
	//window.onload = do_onload
	alert("no objects exists");
}
else
{
	window.onload = do_onload
}

But I get an error "Object required".

Any ideas?

Thanks.

 

[reportingbuzz]

Sorry, I get the error message "object expected".

Thanks.

 

[monksnake]

You can't check to see if an object exists or not by the method you tried because it can't reference the object to compare it to NULL, but you can check it like this:

if (!getElementById("hEmpID") && !getElementById("hCrystalRadio"))
{
    //window.onload = do_onload
    alert("no objects exists");
}
else
{
    window.onload = do_onload
}

<.

 

[reportingbuzz]

I still get the error - Object expected.

 

[monksnake]

Hmm strange, I SWEAR I did something like that before, but I got an error too when I tested it.


Here's how I'd go about it:


Set a flag variable in Employee_report.asp server side equal to 1.
<%
aspFlag = 1;
%>
Set that same variable equal to 0 at the top of your main ASP page above the place in the code where Employee_report.asp gets included.

<%
var aspFlag = 0;
%>

Then check the value of that flag for the onload event:

if (!<%=aspFlag%>) {
    //window.onload = do_onload
    alert("no objects exists");
}
else
{
    window.onload = do_onload
}

<.

 

[reportingbuzz]

I tried that - apparently it never executes the else block of the function

<%
aspFlag = 0
%>

is what I have at the top of employee_report8.asp which is the main page.

<%
aspFlag = 1
%>

is what I have at the top of employee_report.asp which is the included file.

Now I do not get an errors, but the function do_onload() never gets executed. Actually it does not make a difference when I load the page fresh. It is when I come back to this page from another page, that I want my on_load function to execute. Now when I come back, do_onload function does not execute. I still see "No Objects exists" alert of the 1st block of the if statement.

if (!<%=aspFlag%>) {
    //window.onload = do_onload
    alert("No Objects exists");
    window.onload = do_onload
}
else
{
	alert("onload function will load now");
    //window.onload = do_onload
}

Any ideas?

Thanks.

 

[monksnake]

Yes do a parseInt on the variable aspFlag:

(![!]parseInt(<%=aspFlag%>, 10)[/!]) {
    //window.onload = do_onload
    alert("No Objects exists");
    window.onload = do_onload
}
else
{
    alert("onload function will load now");
    //window.onload = do_onload
}

<.

 

[reportingbuzz]

I guess parseint is looking for an integer.

if (!parseInt(0, 10)) {
    alert("no objects exists");
}
else
{
	alert("onload function will load now");
    //window.onload = do_onload
}

When I come back to this page from another page, I get the 1st alert message - "No Objects Exists"

Here is an HTML code just to give you a look and feel of what I am doing.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<HTML>
<HEAD>
<style type="text/css">
* {
   margin:0px;
   padding:0px;
}
body
{
font-family: Verdana, Arial, Helvetica, Sans-Serif;
/*color:#5a5b5e;*/
font-size: 12px;
background-color: #DDDDDC;
overflow: auto;
}
/*This div contains all the nested divs within it */
.div_Container
{
width:850px;
height: 650px;
background-color: #FFFFFF;
float: left;
margin-top: 0em;
}
.div_Container1
{
width:900px;
height: 650px;
background-color: #FFFFFF;
float: left;
margin-top: 0em;
}
/*This div contains Aspect Logo*/
.logo_div
{
background-color: #ffffff;
height: 50px;
width: 200px;
float: left;
}
/*This div contains Banner*/
.Banner_div
{
background-color: #0033AB;
height: 50px;
width: 330px;
float: left;
font-size: 15px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
}
/*This div contains Last Updated Information*/
.Updated_div
{
background-color: #0033AB;
height: 50px;
width: 320px;
float: left;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
text-align: right;
}
/* To display the important text in red */
.important
{
color: red;
font-weight: bold;
}
/* To display the Textarea text - new hires and president's club */
textarea
{
font-family: Verdana, Arial, Helvetica, sans-serif;
scrollbar-base-color: #C7D9E6;
}

* {
   border: 0;
   padding: 0;
   margin: 0;
}

#menu {
  padding:0;
  margin:0;
  }
#menu li {
  list-style-type:none;
  }

#menu ul {
padding: 0;
margin: 6px;
list-style-type: none;
}

a.a_style:link {color:#0000ff; text-decoration:none;}
a.a_style:visited {color:#0000ff; text-decoration:none;}
a.a_style:hover {color:#ff0000; text-decoration:underline;}
a.a_style:hover {color:#ff0000; text-decoration:underline;}

}
/*This holds the Org structure div */
.container1
{
background-color: #ffffff;
height: 40%;
BORDER-RIGHT: #78B3E0 1px solid;
width: 280px;
float: left;
margin-top: 1em;
}
/*This holds the Plans div */
.container2
{
background-color: #ffffff;
height: 40%;
BORDER-RIGHT: #78B3E0 1px solid;
width: 300px;
float: left;
margin-left: 0em;
margin-top: 1em;
}
/*This holds the President's Club, New Hires, and Other Information div */
.container3
{
background-color: #ffffff;
height: 40%;
width: 250px;
float: left;
margin-left: 0em;
margin-top: 1em;
}
.caption
{
height: 1em;
width: 6em;
margin-left: 5em;
margin-top: 1em;
TEXT-ALIGN: center;
font-size: 14px;
font-weight: bold;
}
.top_hire
{
background-color: #C7D9E6;
height: 8em;
width: 20em;
float: left;
margin-left: 1em;
margin-top: 0em;
text-align: center;
BORDER-BOTTOM: #78B3E0 1px solid;
}
.top_hire1
{
background-color: #C7D9E6;
height: 8em;
width: 20em;
float: left;
margin-left: 1em;
margin-top: 0em;
BORDER-BOTTOM: #78B3E0 1px solid;
text-align: left;
}
.body_caption
{
font-weight: bold;
font-size: 12px;
text-align: center;
}

label
{
text-align: left;
width: 75px;
padding-right: 20px;
font-size: 12px;
}
br
{
clear: left;
}
input.radio
{
text-align: left;
}

/*.btn {
    border: 1px solid: black;
    border-top-color: red;
    border-left-color: red;
    font-weight: bold;
}*/

input.btn
{
color:#5a5b5e;
font-weight:bold;
background-color:#C7D9E6;
border: 1px solid #000000;
}
/* Format the Textbox which accepts the employee ID */
.text
{
border: 1px solid #C7D9E6
}
/*Format the hr */
.hr
{
color: #C7D9E6
}
.logon
{
text-align: left;
font-weight: bold;
color:#5a5b5e;
font-size: 12px;
}
tr.footer
{
font-size: 12px;
text-decoration:none;
}
a
{
text-decoration:none;
font-size:12px;
font-weight: bold;
}

</style>
<Script type="text/JavaScript">

/*************************************************************
This Function validates that the users select the required
parameters to view the crystal reports
**************************************************************/
function ValidateData(f) {

	// Check to make sure Reporting Period is selected.
	if (f.period.value == "Select") {
		alert("Select a Reporting Period");
		f.period.focus();
		return false;
		}

	//Check to make sure a report is selected.
	// validate myradiobuttons
	myOption = -1;
	for (i=f.crystalradio.length-1; i > -1; i--) {
		if (f.crystalradio[i].checked) {
			myOption = i;
		}
	}
	if (myOption == -1) {
	alert("You must select a report to view");
	return false;
	}

	var jPeriod = f.period.value;
	f.hPeriod.value = jPeriod;
	//alert(jPeriod);

	for (i=f.empid.length-1; i>-1; i--)
	{
		if (f.empid[i].checked)
		{
			f.hEmpID.value = f.empid[i].value;
			//alert(f.hEmpID.value);
		}
	}

	for (i=f.crystalradio.length-1;i>-1;i--)
	{
		if (f.crystalradio[i].checked)
		{
			f.hCrystalRadio.value = f.crystalradio[i].value;
			//alert(f.hCrystalRadio.value);
		}
	}

	//window.onload = do_onload
}

/**********************************************************
Function to expand and collapse the Hierarchial tree
**********************************************************/

function s_Hide(el){
	elID = 'UI_'+el;
	//alert(elID);
	obj = document.getElementById(elID).style;
	(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
	//Need to store the current state in a string in a text field.
	var uniqueStr = '&' + el + '&'
	//var uniqueStr = '&' + elID + '&'
	var openedItems = document.commission.hState.value ; //Added 2/9/07
	if (obj.display == 'block')
	{
	  // add it to the string openedItems
	  //alert("Add '" + uniqueStr + "'");
	  openedItems = openedItems.concat(uniqueStr);
	}
	else
	{
	  // remove it from the string openedItems
	  //alert("Remove '" + uniqueStr + "'");
	  openedItems = openedItems.replace(uniqueStr, '');
	}
	//alert('s_hide - LastAlert:'+openedItems);

	//Store the openedItems info in the hState hidden text box.
	document.commission.hState.value = openedItems;
}

/*******************************************************************
do_onload() Function to extract contents of the hidden textboxes
and re-enact the client behavior when the user comes back to this page.
********************************************************************/

function do_onload()
{

	//Enact the client behavior by extracting the contents of the hState
	//and expanding back again so that the last selected employee is focused.

	openedItems = document.commission.hState.value

	if (openedItems != "")
	{
		//alert('Here b4 ' + openedItems + "'");
		var displayItems = openedItems.split("&");
		for (i=0; i<displayItems.length; i++)
		{
			if(displayItems[i].length != 0)
			{
				//Set the value to 'block'
				//alert(displayItems[i]);
				elID = 'UI_'+displayItems[i];
				obj = document.getElementById(elID).style;
				obj.display = 'block'
			}

		}
	}

	//Remember the last report clicked on. On load of the page, no value exists

	openedCrystalItem = document.commission.hCrystalRadio.value

	if (openedCrystalItem != "")
	{
		//alert(openedCrystalItem);
		for(i=0;i<document.commission.crystalradio.length;i++) {
			if (document.commission.crystalradio[i].value == openedCrystalItem) {
				document.commission.crystalradio[i].checked = true;
			}
		}
	}

	//Remember the last date clicked on. On load of the page, no value exists.

	openedDateItem = document.commission.hPeriod.value
	//alert(openedDateItem);
	for(i=0;i<document.commission.period.options.length;i++) {
		if (document.commission.period.options[i].value == openedDateItem) {
			document.commission.period.selectedIndex = i;
		}
	}
}

//window.onload = do_onload

/**********************************************************************************
First check if the object exists or not. Only if it exists, then
call the window.onload statement. This is because when an admin user logs in
then the hidden textboxes, radio group - crystalradio, selectbox - period
does not yet exist on load of the page. It can also show an error message
when the user is not an authenticated user because it just displays a message that
there is no such NT ID in the database.
************************************************************************************/
/*
if (!getElementById("hPeriod") &&
      !getElementById("hCrystalRadio") &&
      !getElementById("hState") &&
      !getElementById("period"))
{
	//window.onload = do_onload
	alert("no objects exists");
}
else
{
	window.onload = do_onload
}
*/
if (!parseInt(0, 10)) {
    alert("no objects exists");
}
else
{
	alert("onload function will load now");
    //window.onload = do_onload
}


/*******************************************************************
AJAX Function to dynamically show the reports based on the employee selected
********************************************************************/
var xmlHttp

function showReports(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}

var url="getReports1.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

/***********************************************************************
The stateChanged() function executes every time the state of the XMLHTTP object changes.
When the state changes to 4 (or to "complete"), the content of the showReports placeholder
is filled with the response text.
************************************************************************/

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
//Populate the Div ID by the name of "showReports" with the reports
document.getElementById("showReports").innerHTML=xmlHttp.responseText
}
}

/************************************************************************
Function to get the XmlHTTPObject required to active AJAX
*************************************************************************/

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest) //Safari, Mozilla browers
{
	objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject) //IE browsers
{
	objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

</script>
<TITLE>View Commissions Reports</TITLE>
</HEAD>

<body>
<!-- This is the top most level which holds all the content divs -->

<form name="admin" action="" method="post">
<center>Enter Employee ID: <input type="text" name="EID" class="text">&nbsp;&nbsp;<input type="submit" name="Go" id="Go" value="GO"></center>
</form>
<hr class="hr">
<br>

<form name="commission" id="commission" action="ViewReports8.asp" method="post" onSubmit="return ValidateData(this);">

			<!-- Use the hidden textbox to store the state of the browser -->
			<input type="hidden" name="hEmpID" id="hEmpID" value="">
			<input type="hidden" name="hCrystalRadio" id="hCrystalRadio" value="">
			<input type="hidden" name="hPeriod" id="hPeriod" value="">
			<input type="hidden" name="hState" id="hState" value="">


	<!-- Display the Org Tree -->
	<div class="container1">
		   <div class="caption">Organization</div>
		   <br><br>

				    <ul id="menu">
				    	<li>
							<input type="radio" checked ="checked" value="40104" name="empid" onClick="showReports(this.value)">
							<a href="#" class="a_style" onclick="s_Hide('1234'); return false;">Top Level Manager</a>&nbsp;
							<font size=1>(1234)</font>
							<ul id="UI_1234" style="display: none">

					<li>
						<input type="radio" value="40150" name="empid">Mgr1&nbsp;<font size=1>(5678)</font>
					</li>



					<li>
						<input type="radio" value="2345" name="empid">Mgr2&nbsp;<font size=1>(2345)</font>
	                </li>



							</ul>
						</li>
					</ul>

	<!-- The Script took 1 second/s to load. -->
	</div> <!-- End of Container1 Div which holds OrgStructure -->

	<!-- Reports Display Begins -->

	<div class="container2">
		<div class="caption">Reports</div>
		<br><br>
		<div id="showReports">


Select Plan (Monthly Reports)
<br>

			<input type=radio name="crystalradio" id="crystalradio0"checked="checked" value="Report1">Report1<br>
			<input type=radio name="crystalradio" id="crystalradio1" value="Report2">Report2<br>
			<input type=radio name="crystalradio" id="crystalradio2" value="Report3">Report3<br>
			<input type=radio name="crystalradio" id="crystalradio3" value="Report4">Report4<br>
			<input type=radio name="crystalradio" id="crystalradio4" value="Report5">Report5<br>
	<br><br>

	<!-- display this div only when Commission or Payment option buttons are clicked -->

	<div id="commpay">
		Select Reporting Parameters
		<br><br>
		<label>Period:</label>
				<select name="period" id="period" SIZE="1">

						<option VALUE="12/31/2006">December - 2006</option>

						<option VALUE="11/30/2006">November - 2006</option>

						<option VALUE="10/31/2006">October - 2006</option>
		</select>
		<br>
	</div>

	<br><br><br>
	<center><input type="submit" value="Request Reports" class="btn"></center>

		</div>
	</div> <!-- End of Container2 Div which holds Reports and Submit Button -->

	<!-- reports Display Ends -->

	<div class="container3">
		<div class="top_hire">
			<font class="body_caption">President's Club</font>
			<br><br>

			<textarea readonly="readonly" rows=5 cols=30>

			</textarea>
			<br>

		</div>

		<div class="top_hire">
			<font class="body_caption">New Hires (December)</font>
			<br>
			<br>

			<textarea rows=5 cols=30 readonly="readonly">

			</textarea>
			<br>

		</div>


	</div>

</form>




</div> <!-- End of the Div_Container -->

</body>

</html>

 

[reportingbuzz]

This is how the code looks in the page source:

if (!parseInt(0, 10)) {
    //window.onload = do_onload
    alert("no objects exists");
}
else
{
	alert("onload function will load now");
    //window.onload = do_onload
}

Is that how the 1st line should look?

Thanks.

 

[monksnake]

That is how the 1st line should look if your variable <%=aspFlag%> is equal to 0.

Ok I see what your problem is:


The check

if (!parseInt(0, 10)) {
    //window.onload = do_onload
    alert("no objects exists");
}
else
{
    alert("onload function will load now");
    //window.onload = do_onload
}

will show a zero value for <%=aspFlag%> no matter if it gets changed to 1 or not. It won't get changed into a 1 until after <%=aspFlag%> gets 0 stored at this point in time.

The fix is to put that check AFTER the place where the file
Employee_Report.asp gets included.
For ease of finding this code, I'd put it just after your </body> tag:

</body>
<script type="text/javascript">
if (!parseInt(<%=aspFlag%>, 10)) {
    //window.onload = do_onload
    alert("no objects exists");
}
else
{
    alert("onload function will load now");
    //window.onload = do_onload
}
</script>

<.

 

[trollacious]

If you use Firefox to view pages, you'll find a LOT better Javascript error reporting than in IE.

Lee

 

[reportingbuzz]

That did it. It made my script work.

But why did it work...I did not understand. If possible, could you elaborate. I could apply this concept again, if need be.

Thanks.

 

[monksnake]

When you first load up a page, it essentially does all the server side code first, all the ASP.

It does all the server side code from top to bottom of the page.

So at the top of the page you have a variable named aspFlag, which gets set to value = 0.

Before the ASP code (meaning above it in the file) that contains the statement aspFlag = 1, you HAD a javascript check.

if (!parseInt(<%=aspFlag%>, 10)) {
    //window.onload = do_onload
    alert("no objects exists");
}
else
{
    alert("onload function will load now");
    //window.onload = do_onload
}

Since the javascript code contained a reference to a server side variable (aspFlag), and this variable was set to 0 at this point in the code, a value of 0 gets placed in the Javascript code.

It isn't until farther down in the code on the server side where aspFlag gets assigned the value of 1.

Any server or client side reference to that variable AFTER the value gets set to 1 will return a 1.

I hope that's clear, I have a hard time explaining this.


<.