We Keep Coding

Using OnClientClick and onClick Shouldn't Refresh the Page

I'm trying to use onclientclick with onclick. The problem is that the page refreshes before any javascript code is run. I'm trying to integrate my javascript code into someone else's code. I know there's a lot of bad coding practices on his code, but I'm required to work with it. If you want me to isolate the code more, I can do that also. I've tried removing onclick and onclientclick. The page still refreshes.
aspx file
Online Checks
<center>
<h2>
Alvey Quality Monitoring Scheme</h2></center>
<div>
<h3>
Every 1/2 hour, check a unit from each line for the following:
Line 1 Global ID
Line 2 Global ID
Lines Running </h3>
<h3>
<asp:DropDownList ID="DropdownList1" runat="server" Height="20px" Width="85px" AutoPostBack="True" DataSourceID="SqlDataSource1" DataTextField="intSKU" DataValueField="strSpec" AppendDataBoundItems="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Text="Select" Value="0" />
</asp:DropDownList><asp:TextBox ID="TextBox1" runat="server" Height="20px" Width="63px" ReadOnly="True"></asp:TextBox><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Nestle1ConnectionString2 %>"
SelectCommand="SELECT [intSKU], [strSpec] FROM [lkpSKUInfo] ORDER BY [intSKU]"></asp:SqlDataSource>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="DropdownList1"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="DropdownList2"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="DropDownList3"></asp:RequiredFieldValidator>
<asp:DropDownList ID="DropdownList2" runat="server"
Height="20px" Width="85px" AutoPostBack="True" DataSourceID="SqlDataSource1" AppendDataBoundItems="true" DataTextField="intSKU" DataValueField="strSpec" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">
<asp:ListItem Text="Select" Value="0" />
</asp:DropDownList><asp:TextBox ID="TextBox2" runat="server" Height="20px" Width="63px" ReadOnly="True"></asp:TextBox>
Line 1
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged1" Checked="True" />
Line 2 <asp:CheckBox ID="CheckBox2" runat="server" OnCheckedChanged="CheckBox2_CheckedChanged" AutoPostBack="True" Checked="True" />
</h3>
<h3>
<asp:Label ID="Label1" runat="server" Height="28px" Text="Line 1 Label View " Width="148px"></asp:Label>
<asp:Label ID="Label2" runat="server" Height="28px" Text="Line 2 Label View" Width="148px"></asp:Label></h3>
<p>
<asp:Image ID="Image1" runat="server" Height="155px" Width="670px" />
<asp:Image ID="Image2" runat="server" Height="155px" Width="670px" /></p>
<h3>
<asp:Label ID="Label3" runat="server" Height="28px" Text="Line 1 Print Apply View"
Width="219px"></asp:Label>
<asp:Label ID="Label4" runat="server" Height="28px" Text="Line 2 Print Apply View"
Width="207px"></asp:Label> </h3>
<h3>
<asp:Image ID="Image3" runat="server" Height="155px" Width="670px" />
<asp:Image ID="Image4" runat="server" Height="155px" Width="670px" />
</h3>
<h3>
<asp:Label ID="Label6" runat="server" Height="17px" Text="CASE CODE: " Width="133px"></asp:Label>
<asp:Label ID="Label9" runat="server" Height="17px" Text="Line 1"
Width="108px"></asp:Label>
<asp:Label ID="Label10" runat="server" Height="17px" Text="Line 2"
Width="108px"></asp:Label></h3>
<h3>
<asp:Label ID="Label5" runat="server" Height="39px" Text="Case code must match the line and hour from the can code"
Width="904px"></asp:Label>
<asp:CheckBox ID="CheckBox3" runat="server" Text="OK/Defective" OnCheckedChanged="CheckBox3_CheckedChanged" Checked="True" />
<asp:CheckBox ID="CheckBox4" runat="server" Text="OK/Defective" OnCheckedChanged="CheckBox4_CheckedChanged" Checked="True" /></h3>
<h3>
<asp:Label ID="Label7" runat="server" Height="17px" Text="SHRINK FILM" Width="122px"></asp:Label> </h3>
<h3>
<asp:Label ID="Label8" runat="server" Height="39px" Text="Shrink Film must be intact, tightly covering the entire case, and have bullseyes that are tight and will not allow a can to fall out" Width="904px"></asp:Label>
<asp:CheckBox ID="CheckBox5" runat="server" Text="OK/Defective" OnCheckedChanged="CheckBox5_CheckedChanged" Checked="True" />
<asp:CheckBox ID="CheckBox6" runat="server" Text="OK/Defective" OnCheckedChanged="CheckBox6_CheckedChanged" Checked="True" /></h3>
<h3>
<asp:Label ID="Label11" runat="server" Height="17px" Text="LABELS"
Width="122px"></asp:Label> </h3>
<h3>
<asp:Label ID="Label12" runat="server" Height="39px" Text="Labels must be correct for SKU scheduled to be produced, be applied correctly to the cans with no loose, crooked or upside-down labels" Width="904px"></asp:Label>
<asp:CheckBox ID="CheckBox7" runat="server" Text="OK/Defective" OnCheckedChanged="CheckBox7_CheckedChanged" Checked="True" />
<asp:CheckBox ID="CheckBox8" runat="server" Text="OK/Defective" OnCheckedChanged="CheckBox8_CheckedChanged" Checked="True" /></h3>
<h3>
<asp:Label ID="Label13" runat="server" Height="17px" Text="TRAYS"
Width="122px"></asp:Label></h3>
<h3>
<asp:Label ID="Label14" runat="server" Height="39px" Text="Trays must match product produced, no double case, no loose flaps and no damaged cases" Width="904px"></asp:Label>
<asp:CheckBox ID="CheckBox9" runat="server" Text="OK/Defective" OnCheckedChanged="CheckBox9_CheckedChanged" Checked="True" />
<asp:CheckBox ID="CheckBox10" runat="server" Text="OK/Defective" OnCheckedChanged="CheckBox10_CheckedChanged" Checked="True" /></h3>
<h3>
<asp:Label ID="Label15" runat="server" Height="17px" Text="PRINT & APPLY"
Width="166px"></asp:Label></h3>
<h3>
<asp:Label ID="Label16" runat="server" Height="39px" Text="Print & Apply stickers must match SKU produced, Julian Date, Best Before Date, Line and Time. Must be legible and applied correctly to the case. Stickers must match DIS ticket (except Australia)" Width="904px"></asp:Label>
<asp:CheckBox ID="CheckBox11" runat="server" Text="OK/Defective" OnCheckedChanged="CheckBox11_CheckedChanged" Checked="True" />
<asp:CheckBox ID="CheckBox12" runat="server" Text="OK/Defective" OnCheckedChanged="CheckBox12_CheckedChanged" Checked="True" /></h3>
<h3>
<asp:Label ID="Label17" runat="server" Height="17px" Text="DIS TAG"
Width="166px"></asp:Label></h3>
<h3>
<asp:Label ID="Label18" runat="server" Height="39px" Text="Tags must match schedule and product produced" Width="904px"></asp:Label>
<asp:CheckBox ID="CheckBox13" runat="server" Text="OK/Defective" OnCheckedChanged="CheckBox13_CheckedChanged" Checked="True" />
<asp:CheckBox ID="CheckBox14" runat="server" Text="OK/Defective" OnCheckedChanged="CheckBox14_CheckedChanged" Checked="True" /></h3><br />
<h3>
Comments:
Operator Number
<asp:DropDownList ID="DropDownList3" runat="server" AppendDataBoundItems="true" Height="20px" Width="72px" DataSourceID="SqlDataSource2" DataTextField="intOperatorNumber" DataValueField="strLast">
<asp:ListItem Text="Select" Value="No Operator Selected" />
</asp:DropDownList><asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:Nestle1ConnectionString2 %>"
SelectCommand="SELECT [intOperatorNumber], [strLast] FROM [tblOperators] ORDER BY [intOperatorNumber]">
</asp:SqlDataSource>
Shift <asp:Label ID="Label" runat="server" Height="20px" Width="53px"></asp:Label>
</h3>
</div>
<asp:TextBox ID="TextBox3" runat="server" Height="81px" Width="381px"></asp:TextBox>
<asp:Label ID="lbl" runat="server" Height="20px" Width="80" BorderWidth="0px" Font-Names="Verdana"></asp:Label>
<input type="text" id="clock" style="border: 0px; width: 80px; height: 20px;" value="" readonly="readonly" />
Specific part of code not working
<!-- the button I'm clicking-->
<asp:Button ID="Button3" Font-Size="15" runat="server" Text="Send Data" Height="40px" Width="245px" OnClientClick="delayer();return false;" OnClick="Button3_Click" />
<asp:Button ID="Button4" Font-Size="15" runat="server" Text="Back" Height="40px" Width="245px" OnClick="Button4_Click" />
</form>
<script type="text/javascript">
</script>
<script type="text/javascript">
/*
var executionTime;
var initialTime = localStorage.getItem("initialTime");
function foo()
{
if(!(initialTime === null)){
executiontime = 5000-(new Date()).getTime() - parseInt(initialTime, 10);
if (executionTime<0) executionTime = 0;
showPopUp(executionTime);
}
}
*/
function showPopUp( var executionTime){
/* if(initialTime=== null)
{
executionTime = 5000;
}
localStorage.setItem("initialTime", (new Date()).getTime());
setTimeout(function() {alert("Warning");
localStorage.setItem("initialTime", null);}, executionTime);
*/
alert("warning");
}
function delayer(){
showPopUp();
}
// constants to define the title of the alert and button text.
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";
// over-ride the alert method only if this a newer browser.
// Older browser will see standard alerts
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt); //overrides alert method
}
}
function createCustomAlert(txt) {
// shortcut reference to the document object
d = document;
// if the modalContainer object already exists in the DOM, bail out.
if(d.getElementById("modalContainer")) return;
// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";
// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if(false) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;
// create an anchor element to use as the confirmation button.
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function() { removeCustomAlert();return false; }
}
// removes the custom alert from the DOM
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
</script>
</body>
</html>

You need to return false from delayer function, and also add return to OnClientClick event.
<asp:Button ID="Button3" runat="server" Text="Send Data"
OnClientClick="return delayer();" OnClick="Button3_Click" />
function delayer(){
showPopUp();
return false;
}

Color of output doesn't change

I have this C# event handler that suppose to change the color of the text based on the values of the List View
Here is the code:
protected void YourListView_Load(object sender, EventArgs e)
{
Label theTWALabel;
int theTWAValue;
foreach (ListViewItem item in YourListView.Items)
{
theTWALabel = (Label)item.FindControl("TWALabel");
theTWAValue = Convert.ToInt32(theTWALabel.Text);
if (theTWAValue >= 0)
{
if (theTWAValue < 90)
theTWALabel.ForeColor = System.Drawing.ColorTranslator.FromHtml("YellowThis");
else
theTWALabel.ForeColor = System.Drawing.Color.Red;
}
}
}
and here is the list view line:
<asp:ListView id="YourListView" runat="server" DataSourceID="SqlDataSource3" OnLoad="YourListView_Load" EnableViewState="False">
and here is my list view code:
<asp:ListView id="YourListView" runat="server" DataSourceID="SqlDataSource3" OnLoad="YourListView_Load" EnableViewState="False">
<ItemTemplate>
Plant Name:
<asp:Label id="PlantLabel" runat="server" Text='<%# Eval("Plant") %>' />
<br />
Department #:
<asp:Label id="column1Label" runat="server" Text='<%# Eval("column1") %>' />
<br />
Department Name:
<asp:Label id="GroupLabel" runat="server" Text='<%# Eval("Group") %>' />
<br />
Job Code:
<asp:Label id="Job_CodeLabel" runat="server" Text='<%# Eval("Job_Code") %>' />
<br />
TWA:
<asp:Label id="TWALabel" runat="server" Text='<%# Eval("TWA") %>' />
<br />
Job Classification:
<asp:Label id="Job_ClassificationLabel" runat="server" Text='<%# Eval("Job_Classification") %>' />
<br />
Job Function:
<asp:Label id="Job_FunctionLabel" runat="server" Text='<%# Eval("Job_Function") %>' />
<br />
Job Description:
<asp:Label id="Job_DescriptionLabel" runat="server" Text='<%# Eval("Job_Description") %>' />
<br />
<br />
</ItemTemplate>
<LayoutTemplate>
<div id="itemPlaceholderContainer" runat="server" style="font-family: Verdana, Arial, Helvetica, sans-serif; text-align:center; border:3em; border-color:black;">
<span runat="server" id="itemPlaceholder" />
</div>
</LayoutTemplate>
</asp:ListView>
The Problem is that while it will output my listview values correctly, none of the colors change, and I don't why. Any help would be excellent
Edit: Could it be because of my layout template as that controls all the styling?

ModalPopupExtender inside DataList show up onclick of ImageButton inside datalist item

I have a datalist filled with items from database and each item has an image button onclick of which I want to show a modalpopup containing the Description of the particular Item. Below is what I have dine so far but fail:
<asp:DataList ID="DataList1" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="100%">
<ItemTemplate>
<table width="228px">
<tr>
<td width="20px" > </td>
<td width="160px" align="center">
<asp:Label ID="pID" runat="server" Visible="false" Text='<%# Eval("id") %>'></asp:Label><asp:Label ID="Label1" runat="server" Text='<%# Eval("ProductName") %>' Font-Size="8pt" ForeColor="#336699" Width="100%" />
</td>
<td align="right">
<asp:ImageButton ID="SpecificBtn" ImageUrl="images/SmallCallout.png" OnClick="SpecificBtn_Click" CommandArgument='<%# Eval("Id") %>' runat="server" />
<ajaxToolkit:ModalPopupExtender ID="mdl" runat="server" PopupControlID="pnl" TargetControlID="SpecificBtn" Enabled="True" CancelControlID="btn" DropShadow="true" Drag="True" ></ajaxToolkit:ModalPopupExtender>
</td>
</tr>
</table>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "GetImage.aspx?id=" + Eval("id") %>' /><br />
<table align="center" style="position:relative; left:2px;" cellspacing="0" cellpadding = "0" width="228px">
<tr>
<td style="background-color:Black;" colspan=2>
<div >
<asp:Image ID="Image2" ImageUrl="/images/cart.png" runat="server" />
<asp:Button CommandName="AddToCart" CssClass="anchor" OnClick="addProduct" CausesValidation="false" CommandArgument='<%# Eval("Id") %>' ID="addToHire" runat="server" Text=" Add To Cart " BackColor="Black" BorderColor="Black" BorderStyle="None" ForeColor="#F8CD20" Height="24" Font-Bold="true" Font-Size="10" />
</div>
</td>
</tr>
</table>
<br /><br />
</ItemTemplate>
<ItemStyle CssClass="dataListItemStyle" HorizontalAlign="Center" VerticalAlign="Top" />
</asp:DataList>
<asp:Panel ID="pnl" runat="server" visible="false" Width="300px" Height="300px" BackColor="red">
<asp:Label ID="Label2" runat="server" Text="Specification"></asp:Label>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("Specification") %>'></asp:Label>
<asp:Button ID="btn" runat="server" Text="cancel" />
</asp:Panel>
Code behind:
protected void SpecificBtn_Click(object sender, EventArgs e)
{
DataListItem dli = (DataListItem)((ImageButton)sender).Parent;
ModalPopupExtender ModalPopupExtender2 = (ModalPopupExtender)dli.FindControl("mdl");
pnl.Visible = true;
ModalPopupExtender2.Show();
}
Can somebody tell me how to acheive this and where I went wrong. Thanks.

use jquery..
function onimagebuttonclick()
{
$find('BehaviorIDofmodelpopupextender').show();
}
i hope this solves your problem..

how do i reference a listview control that is nested in the itemtemplate of another listview control?

I have a listview control that is nested in the item template of another listview control that i'm trying to reference in codebehind using the .FindControl() method, but it keeps returning null. After get this to work, I'll need to reference a ComboBox inside of the inner listview. Here is where I am so far:
ListView lsvTickets
ItemTemplate
Listview lsvActions
ItemTemplate
ComboBox cboAssignees
I'm using the following code to attempt the reference in code behind:
var actions = (RadListView)lsvTickets.FindControl("lsvActions");
But this is returning null. I thought I would only have to do something like this to achieve the final desired result:
var assignees = (RadComboBox)lsvTickets.FindControl("lsvActions").FindControl("cboAssignees")
Can anyone help? What am I doing wrong here? Here's the full layout for those of you it would help:
<rad:RadListView runat="server" ID="lsvTickets">
<ItemTemplate>
<div id="divContainer" class="divContainer">
<div id="divTicketHeader" class="divTicketHeader">
<asp:Table runat="server" ID="tblTicketHead" Width="100%" CellSpacing="0" CellPadding="5" HorizontalAlign="Center">
<asp:TableRow HorizontalAlign="Center">
<asp:TableCell Width="25%">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Subject") %>' Font-Bold="true" />
</asp:TableCell><asp:TableCell Width="25%">
<asp:Label ID="Label2" runat="server" Text='<%#Eval("Status.Key") %>' />
</asp:TableCell><asp:TableCell Width="25%">
<asp:Label ID="Label3" runat="server" Text='<%#Eval("Ticket.Reported_By") %>' />
</asp:TableCell><asp:TableCell Width="25%">
<asp:Label ID="Label4" runat="server" Text='<%#Eval("DateOpened") %>' />
</asp:TableCell></asp:TableRow></asp:Table></div>
<div id="divTicketBody" class="divComments">
<rad:RadListView runat="server" ID="lsvActions" DataSource='<%#Eval("TicketActions") %>'>
<ItemTemplate>
<center>
<div id="divAddComment" style="width: 500px;">
<div id="divCommentControls" style="margin: 8px 0px 8px 0px;">
<rad:RadComboBox runat="server" ID="cboStatus" DataSource='<%#GetStatuses() %>' DataTextField="Status" DataValueField="ID" /> <rad:RadComboBox runat="server" ID="cboAssignTo" DataSource='<%#GetAssignees() %>' DataTextField="Key" DataValueField="Value" />
</div>
<rad:RadTextBox runat="server" ID="txtComment" TextMode="MultiLine" Width="500" Height="100" CssClass="commentBox" /><br />
<div style="height: 35px;">
<div style="float:left"><asp:CheckBox ID="cbMakeITTicket" runat="server" Text="Convert to IT Support Ticket" /></div>
<div style="float:right; margin: 3px 0 0 0; "><rad:RadButton runat="server" ID="btnSubmit" Text="Submit" CssClass="buttonTag" /></div>
</div>
</div>
</center>
<div id="divComment" class="divComment">
<asp:Table runat="server" ID="tblComment" CellPadding="5">
<asp:TableRow>
<asp:TableCell Width="15%" HorizontalAlign="Center">
<rad:RadBinaryImage runat="server" ID="imgCommenter" Width="50" Height="50" /><br />
<asp:Label ID="Label5" runat="server" Text="[action author]" CssClass="commenterText" /><br />
<asp:Label ID="Label6" runat="server" Text='<%#Eval("Action_Date", "{0:MMM d, yyy hh:mm}") %>'
CssClass="commenterText"/><br />
</asp:TableCell><asp:TableCell>
<asp:Label ID="Label7" runat="server" Text='<%#Eval("Description") %>' />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</ItemTemplate>
</rad:RadListView>
</div>
</div>
</ItemTemplate>
</rad:RadListView>
</asp:Content>

You're looking for a combobox in a control that potentially has many lines (thus rows of combobox instances ) - it doesn’t know which one you’re looking for.
Obviously I don’t know what you need to do to the combobox but you should look at
alternate approaches.
Take a look at using the OnItemDataBound event of lsvActions
Then add code such as …
protected void lsvActions_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item is GridDataItem)
{
GridDataItem item = (GridDataItem)e.Item;
RadComboBox myCBO = (RadComboBox)item.FindControl("cboStatus")
myCBO.Visible = false;
}
}
...also, just a general tip, I usually find using OnNeedDataSource to load RadGrids and ListViews saves a lot of headaches.
Hope that helps.

Jquery pop up window

I'm trying to load a hover page over the current default page. So far the hover pop up window fads in but then in fades out right away. I’m not sure what I’m doing wrong below. Any help would be appreciated.
Js File
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
aspx page
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<center>
<img src="Pictures/6.jpg" alt="my image des" />
<div id="button">
<input type="submit" value="Press me please!" /></div>
</center>
<div id="popupContact">
<a id="popupContactClose">x</a>
<p id="contactArea">
Rules:
1) Items with "*" are required fields to be filled out.
<br />
</p>
<asp:Label ID="lblEmail" runat="server" Text="*Your Email: "></asp:Label><asp:TextBox
ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtEmail"
ErrorMessage="You must enter your email address."></asp:RequiredFieldValidator>
<br />
<asp:Label ID="lblUserName" runat="server" Text="*Name: "></asp:Label>
<asp:TextBox ID="txtName" runat="server" Width="157px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtName"
ErrorMessage="You must enter a username."></asp:RequiredFieldValidator>
<br />
<asp:Label ID="lblCity" runat="server" Text="*City: "></asp:Label>
<asp:TextBox ID="txtCity" runat="server" Width="168px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtCity"
ErrorMessage="You must enter your location."></asp:RequiredFieldValidator>
<br />
<asp:Label ID="lblState" runat="server" Text=" State: "></asp:Label>
<asp:TextBox ID="txtState" runat="server" Width="168px"></asp:TextBox><br />
<asp:Label ID="lblAge" runat="server" Text="*Age: "></asp:Label>
<asp:TextBox ID="txtAge" runat="server" Width="165px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtAge"
ErrorMessage="Please enter your age to continue."></asp:RequiredFieldValidator>
<br />
<asp:Label ID="lblSex" runat="server" Text="*Gender: "></asp:Label>
<asp:RadioButton ID="rdMale" runat="server" GroupName="Gender" Text="Male" />
<asp:RadioButton ID="rdFemale" runat="server" GroupName="Gender" Text="Female" />
<asp:Label ID="RadialLBL" runat="server"></asp:Label>
<br />
<br />
<asp:Label ID="lblYahoo" runat="server" Text="Yahoo ID: "></asp:Label>
<asp:TextBox ID="YahooID" runat="server"></asp:TextBox>
<br />
<asp:Label ID="lblMSN" runat="server" Text="MSN ID: "></asp:Label>
<asp:TextBox ID="MSNID" runat="server" Width="133px"></asp:TextBox>
<br />
<br />
<asp:Label ID="lblMyspaceLink" runat="server" Text="Your Myspace Link: "></asp:Label>
<asp:TextBox ID="MyspaceLink" runat="server" Width="255px"></asp:TextBox>
<br />
<asp:Label ID="lblFaceBookLink" runat="server" Text="Your FaceBook Link: "></asp:Label>
<asp:TextBox ID="FaceBooklink" runat="server" Width="244px"></asp:TextBox>
<br />
<asp:Label ID="lblUploadpic" runat="server" Text="*Upload your picture."></asp:Label>
<asp:FileUpload ID="FileUpload1" runat="server" Height="22px" Width="217px" /><br />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label><br />
<br />
<asp:Label ID="lblDesctiption" runat="server" Text="*User Bio: "></asp:Label><br />
<asp:TextBox ID="txtDescription" runat="server" MaxLength="240" Width="390px" Height="73px"
Rows="3" TextMode="MultiLine"></asp:TextBox><br />
<br />
<asp:Button ID="btnRegister" runat="server" Text="Register" OnClick="btnRegister_Click" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtDescription"
ErrorMessage="Enter a bio or description of yourself."></asp:RequiredFieldValidator>
<br />
<asp:Label ID="EnterAll" runat="server"></asp:Label>
<asp:Label ID="Displayme" runat="server" Text=""></asp:Label>
<br />
<br />
</div>
<div id="backgroundPopup">
</div>

A good first step is to ensure that your click events are being properly handled to prevent unwanted bubbling. You can do this with each of the click handling functions:
$("#button").click(function(e){
e.preventDefault();
//centering with css
centerPopup();
//load popup
loadPopup();
});
That may cause the problem to stop happening, and even if it doesn't, it's a good idea to prevent weird behavior from happening in the future. You can read more about preventDefault here: http://api.jquery.com/event.preventDefault/