ModalPopup Not Showing in ASP.Net - asp.net

I've done everything. Deleted the code and dragged new controls from the toolbox, renamed, tried from javascript -- I just can't get this freakin' modalpopupextender to show. Wasted 3 days.
I'm trying to show it via VB code-behind in the on-click even of the login button. Everything else executes in the button's code, just not this line:
Me.ModalPopupExtender2.Show()
But no matter what I try, it likes to stay hidden.
Any ideas would be welcome!!! Thanks,
Jason
PS -- here's the aspx coding
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Login.aspx.vb" Inherits="LetterWriterASP.Login" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="Head2"><meta http-equiv="Expires" content="-1" /><title>
Anchor General Insurance Agency, Inc.
</title><meta http-equiv="Expires" content="-1" /><link rel="shortcut icon" href="Images/favicon.ico" /><link href="App_Themes/Default/Calendar.css" type="text/css" rel="stylesheet" /><link href="App_Themes/Default/Default.css" type="text/css" rel="stylesheet" />
</head>
<style type="text/css">
.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
}
.HellowWorldPopup
{
min-width:200px;
min-height:100px;
background:white;
border-color:Silver;
border-style:ridge;
border-width:medium;
}
.HeaderStyle
{
color:Black;
background-color:Black;
border-style:solid;
}
.PopupHeader
{
color:Black;
background-color: Black;
}
</style>
<body leftmargin="0" topmargin="0"
background="Images/tile-grey-stripe.jpg">
<form id="Form1" runat="server">
<table width="1000" height="99" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="35" background="../Images/a_ag01.jpg"></td>
<td width="524"><img src="Images/a_ag1.jpg" alt="" width="524" height="99" border="0" align="top" /></td>
<td width="389">
<table border="0" cellspacing="0" cellpadding="0" width="389">
<tr>
<td width="218"><img id="imgHeader" src="Images/text_title_producer1.jpg" style="height:99px;width:218px;border-width:0px;" /></td>
<td width="111"><img id="imgHeadr2" src="Images/text_title-TILE.jpg" style="height:99px;width:171px;border-width:0px;" /></td>
</tr>
</table>
</td>
<td width="19" align="right"><img src="Images/a_ag4_end.jpg" width="19" height="99" alt="" /></td>
<td align="right" width="33" background="Images/a_ag5.jpg"></td>
</tr>
</table>
<!--end of the header table -->
<table height="702" width="1000" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="50" background="Images/b_ag1_lefttile.jpg"> <!-- This is the left wall of the form !-->
</td>
<td width="900" valign="top" bgcolor="#FFFFFF">
<!-- Text, controls, buttons, etc goes below this comment. !-->
<script type="text/javascript">
function InvalidLogin()
{
alert("Invalid user name or password. Please try again.");
window.location = "../Login.aspx";
}
function ShowModal()
{$find('ModalPopupExtender2').show();}
</script>
<br /><br /><br /><br /><br /><br /><br />
<center><table border="2" cellpadding="4" cellspacing="0"
style="border-collapse:collapse;">
<tr>
<td>
<table border="0" cellpadding="0" style="height:172px;width:278px;">
<tr>
<td align="center" colspan="2"
style="color:White;background-color:#5D7B9D;font-size:0.9em;font-weight:bold;">
Log In</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User
Name:</asp:Label>
</td>
<td>
<asp:TextBox ID="UserName" Width="150" name="UserName" runat="server" Font-Size="0.8em"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server"
ControlToValidate="UserName" ErrorMessage="User Name is required."
ToolTip="User Name is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
</td>
<td>
<asp:TextBox ID="Password" Width="150" runat="server" Font-Size="0.8em" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordRequired" runat="server"
ControlToValidate="Password" ErrorMessage="Password is required."
ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="center" colspan="2" style="color:Red;">
<asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="LoginButton" runat="server" BackColor="#FFFBFF"
BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" CommandName="Login"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775"
onclick="LoginButton_Click1" Text="Log In" ValidationGroup="Login1" />
</td>
</tr>
</table>
</td>
</tr>
</table> </center>
<!-- Text, controls, buttons, etc goes above this comment. !-->
<!--"#E6E2D8" "Black"-->
</td>
<td width="50" background="Images/b_ag1_righttile.jpg"> <!-- This is the right wall !-->
</td>
</tr>
</table>
<!--end of content table -->
<table height="75" width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="80" background="Images/c_ag1_leftcorner.jpg"></td>
<td width="840" align="center" valign="top" background="Images/c_ag1_center-piece.jpg" class="contents">
<span id="lblFooter"><center>Copyright © 2006 Anchor General Insurance Agency, Inc. All rights reserved. <br />For questions, please call: (800) 542-6246</center></span>
</td>
<td width="80" background="Images/c_ag1_rightcorner.jpg"></td>
</tr>
</table>
<!-- Popup Form -->
<asp:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server" EnablePageMethods="true">
</asp:ToolkitScriptManager>
<asp:button id="Button3" name="Button3" runat="server" text="Button" style="display: none;" />
<asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server"
targetcontrolid="Button3" popupcontrolid="PopupPanel"
popupdraghandlecontrolid="PopupHeader2" drag="true"
backgroundcssclass="ModalPopupBG">
</asp:ModalPopupExtender>
<asp:Panel ID="PopupPanel" style="display: none" runat="server">
<div class="HellowWorldPopup">
<div class="PopupHeader" id="PopupHeader2"> </div>
<div class="Controls">
<center><table border=0 cellpadding=0 cellspacing=0><tr><td><img src="Images/ajax-loader.gif" /></td><td> Please Wait...</td></tr></table></center>
</div>
</div>
</asp:Panel>
</form>
</body>
</html>

Come to find out (after a VERY long process of trial and error), there's a little something everybody should know about.
You cannot copy
<ToolkitScriptManager>
code from one aspx page to another. You MUST drag it from the toolbox onto your page. I guess it does some stuff we don't see or know about. Same probably goes for ModalPopupExtender.
Hope that helps somebody out there!

Related

Not able to see radio button list in my screen

I am unable to see the radio button list yes or NO in my screen I am getting the values from XML file.
Following code in aspx page:
<asp:Panel ID="pnlAction" runat="server" Width="100%" Visible="false">
<table cellpadding="0" cellspacing="0" border="0" width="99%">
<tr style="height: 20px;">
<td style="width: 25px;">
<hr />
</td>
<td class="secHeading frmlblBold"" style="width: 80px;" align="center">
Action
</td>
<td>
<hr />
</td>
</tr>
</table>
<table style="font-weight:normal" width="100%" border="0" cellpadding="2" cellspacing="2">
<tr>
<td style="width:250px;"></td>
<td style="width:350px;"></td>
<td style="width:250px;"></td>
<td style="width:350px;"></td>
</tr>
<tr>
<td class="frmlblBold" style="text-align:right;vertical-align:top">Action </td>
<td><asp:DropDownList ID="ddlAction" runat="server" CssClass="DropDown" DataSourceID="dsAction" DataValueField="CODE" DataTextField="CDDesc" AutoPostBack = "False" Width="342px"></asp:DropDownList></td>
</tr>
<tr>
<td class="frmlblBold" style="text-align:right;vertical-align:top">Service Agreement Clause </td>
<td style="vertical-align:top" style="width: 350px;">
<%-- <fieldset id="fldSLA" runat="server" style="width: 280px;">--%>
<asp:RadioButtonList ID="radSLA" runat="server" RepeatDirection="Horizontal" DataValueField="SLAID" DataTextField="SLADESC" DataSourceID="dsSLA" visible = "true">
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="rfvSLA" runat="server" ControlToValidate="radSLA" ErrorMessage="Please select if service agreement is applicable or not."
Enabled="true" Display="none"></asp:RequiredFieldValidator>
<%-- </fieldset>--%>
</td>
</tr>
<tr>
<td class="frmlblBold" style="text-align:right;vertical-align:top">Comments </td>
<td style="vertical-align:top">
<asp:TextBox runat="server" ID="txtActionComments" MaxLength="500" TextMode="MultiLine" width="95%" Rows="5" /> </td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" CssClass="btnOther" />
</tr>
</asp:Panel>
<asp:XmlDataSource ID="dsSLA" runat="server" EnableCaching="false" DataFile="~/XML/VisaTracking.xml"
XPath="BVILetter/SLA/ITEM" />
Code in .cs file:
if (!IsPostBack)
{
base.PageLoad();
GetReqPndActTknByMe(base.LogShortID);
radSLA.DataBind();
radSLA.SelectedValue = "Yes";
BindDataToDropdownListAction();
}
I am able to see the row count of radSLA.DataBind(); as '2'
My XML code:
<BVILetter>
<SLA>
<ITEM SLAID ="Yes" SLADESC ="Yes" />
<ITEM SLAID ="No" SLADESC ="No" />
</SLA>
</BVILetter>
But I am not able to see the radio buttons in my screen:
Please help me.
Please Check the Binding function clearly. If binding not happened properly then RadioBottonList does not appear.RadioBottonList apear only when when listItem bind properly

how to use the img tag

i am a student working in an simple application and i do not know how to use the img tag and i have tryed one such code but while executing the code the image is not showing plz see the code and help me to saw what is the wrong in the code.
code is:
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 100%;
height: 100%;">
<tr style="width: 100%; height: 300px;">
<td valign="middle" align="center">
<img alt="" src="C:\Documents and Settings\temp.intern1\My Documents\My Pictures\images4.jpg" />
</td>
</tr>
<tr style="height: 65%; vertical-align: top;">
<td style="width: 90%;" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="height: 20px">
</td>
</tr>
<tr>
<td align="center" valign="middle" width="100%" style="height: 100%">
<div id="Panel1" style="background-color: #87BDEF; height: 300px; width: 600px;">
<table cellpadding="0" cellspacing="0" style="height: 400px" width="600px">
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="height: 200px" width="600px">
<tr>
<td align="right" style="padding-left: 5px; width: 50%;">
<asp:Label ID="lblUserName" runat="server" Text="USER NAME :"></asp:Label>
</td>
<td align="left" style="padding-left: 5px; width: 50%;">
<br />
<asp:TextBox ID="txtUserName" runat="server" Width="70%"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvUserName" ErrorMessage="Please enter Username"
ControlToValidate="txtUserName" runat="server" Width="70%" ForeColor="red" Style="margin-left: 0px;" />
</td>
</tr>
<tr>
<td>
<br />
</td>
<td>
<br />
</td>
</tr>
<tr>
<td align="right" style="width: 50%;">
<asp:Label ID="lblPassword" runat="server" Text="PASSWORD :"></asp:Label>
</td>
<td align="left" style="padding-left: 5px; width: 50%;">
<br />
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="70%"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvPassword" ErrorMessage="Please enter Password"
ControlToValidate="txtPassword" runat="server" Width="70%" ForeColor="red" Style="margin-left: 0px" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<span id="lblInValid" style="color: #C00000; font-family: Verdana; font-size: Small;">
</span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<table width="50%">
<tr>
<td align="left" style="padding-left: 5px; width: 50%;">
<asp:Button ID="btnSubmit" runat="server" Text="SUBMIT" OnClick="btnSubmit_Click" />
<br />
<br />
<br />
</td>
<td align="left" style="padding-left: 5px; width: 50%;">
<asp:Button ID="btnClear" runat="server" Text="CLEAR" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<br />
</td>
<td>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="180px">
<br />
</td>
</tr>
<tr>
<td>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Content>
plz some one help me on this code...,
Your image should be in the folder accessible to your web server. Try including your image into your solution file (assuming you are using Visual Studio), and use relative path, such as "/images/image4.jpg"
Go to some web site (like www.cnn.com), view source for any page and see how they set path to img tags.
You can also use ASP.Net image tag, check out MSDN for examples and usage.
The problem is that you are using an address to an image on your computer, so that will only work when you view the page from that specific computer.
You should copy the image into the web application, for example into a folder named images, then you use that address in the image tag:
<img alt="" src="images/images4.jpg" />

IE 8 not displaying page

My page is not displaying in IE8. It works fine if I debug in IE and change it to IE7 standards under Internet Explorer 8 browser mode. I'm not sure what is wrong. If I add a meta tag with IE7 specified, it loads the page, and then looks like it forwards it to a blank page. All of the html is there in the debug information, and it works fine in IE7 browser mode, or in Firefox. Any ideas? Here is my header:
Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site2.master.cs" Inherits="Site2" %>
<%# Register TagPrefix="uc" TagName="Header" Src="~/Controls/Header.ascx" %>
<%# Register TagPrefix="uc" TagName="Footer" Src="~/Controls/Footer.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="Styles/Site.css" rel="Stylesheet" type="text/css" />
<script src="<%= ResolveClientUrl("Scripts/jquery-1.4.1.js") %>" type="text/javascript" > </script>
<script src="<%= ResolveClientUrl("Scripts/Jquery.min.js") %>" type="text/javascript" > </script>
<script src="<%= ResolveClientUrl("Scripts/menu.js") %>" language="javascript" type="text/javascript" > </script>
<script src="<%= ResolveClientUrl("Scripts/jquery-ui-1.8.10.custom.min.js") %>" type="text/javascript" > </script>
<script src="<%= ResolveClientUrl("Scripts/EasyConfirm.js") %>" type="text/javascript" > </script>
<link href="<%= ResolveClientUrl("Styles/jquerySmoothness.css") %>" rel="stylesheet" type="text/css" />
</head>
<body >
<form id="form1" runat="server" enctype="multipart/form-data" method ="post" >
<asp:ScriptManager ID="ScriptManager1" AjaxFrameworkMode="Enabled" EnablePartialRendering="true" runat="server" />
<div class="container">
<uc:Header runat="server" ID="headerTest" Title="RTSC SCM" Subtitle="Logistics SOS" />
<div class="content2 " style ="position:relative; padding-bottom: 10px" >
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"/>
<%--</asp:ContentPlaceHolder>--%>
<!-- end .content --></div>
<uc:Footer runat="server" ID="footer" TeamName="RTSC Logistics SOS Tool Support Team" />
<!-- end .container --></div>
</form>
</body>
</html>
Page:
<%# Page Title="RTSC SOS - Storage Request View" Language="C#" MasterPageFile="~/Site2.master" AutoEventWireup="true" CodeFile="StorageRequest.aspx.cs" Inherits="Forms_StorageRequest" ContentType="IE7" %>
<%# Register TagPrefix="uc" TagName="EmployeeSearch" Src="~/Controls/TinyEmployeeSearch.ascx" %>
<%# Register Src="~/Controls/AdditionalInfo.ascx" TagPrefix="R" TagName="AddInfo" %>
<%# Register Src="~/Controls/LamEditComments.ascx" TagPrefix="R" TagName="StorageLocation" %>
<%# Register Src="~/Controls/RequestHeader.ascx" TagPrefix="R" TagName="reqheader" %>
<%# Register Src="~/Controls/HandlingUnitInfo.ascx" TagPrefix="R" TagName="handlingView" %>
<%# Register Src="~/Controls/DocumentGrid.ascx" TagPrefix="R" TagName="docView" %>
<%# Register Src="~/Controls/EmailGrid.ascx" TagPrefix="R" TagName="emailView" %>
<%# Register src="~/Controls/RequestInfo.ascx" tagname="requestinfo" tagprefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<script type ="text/javascript" src="../Forms/FormsJS/StorageRequest.js"></script>
<script type ="text/javascript" src="../Scripts/ajaxfileupload.js"></script>
<div id="input" runat ="server" style="width: 960px" >
<R:reqheader id="m_reqHeaderCtr" runat="server" />
<r:docView ID="docView" runat="server" Visible = "true" />
<r:emailView ID="emailView" runat="server" Visible = "true"/>
<uc1:requestinfo ID="requestinfo1" runat="server" Visible = "false" />
<%-- Request Edit Information --%>
<fieldset id="RequestEdit" runat ="server" style="border-color: #CCC; width: 960px;" >
<legend style="border-style: none;font-size:small; color: Blue;">Request Information</legend>
<div style="margin: 0px; padding: 0px; float:left" >
<table>
<tr style="height: 25px;">
<td class ="BDecoNone bold" width="60px">
<img id="star1" runat ="server" src="../Images/red_star.gif" alt="Red Star" class="RedStars"/> Program:
</td>
<td width="120px">
<asp:DropDownList ID="strgProg_DD" Height="20px" runat="server" AutoPostBack="false" CssClass="TBDecoSmall">
</asp:DropDownList>
<span id="Program_Span" runat="server" />
</td>
<td runat="server" id="Other_TR" class="bold" style="text-align:right;display:none;">
<img id="star3" runat ="server" src="../Images/red_star.gif" alt="red_star" class="RedStars" />
<asp:Label ID="OtherTD" Text = "Other Program:" Width = "73px" runat ="server" ></asp:Label>
</td>
<td width="100px">
<asp:TextBox ID="m_otherProgramTB" runat="server" CssClass="TBDecoNone" ViewStateMode="Enabled" Height="12px" Wrap="False"></asp:TextBox>
</td>
<td width="100px">
</td>
</tr>
</table>
<table>
<tr>
<td class="bold TBDecoSmall " >
<img id="star4" runat ="server" src="../Images/red_star.gif" alt="Red Star" class="RedStars"/>Ownership:
</td>
<td colspan="1">
<span id="m_ownershipSpan" runat="server" class="bold" />
<asp:RadioButtonList ID="OwnRadioButtonList" runat="server" CssClass="bold" RepeatColumns="5" RepeatDirection="Horizontal"></asp:RadioButtonList>
</td>
<td>
</td>
</tr>
</table>
<table>
<tr>
<td class="bold TBDecoQuan" style ="width:150px">
<img id="star5" runat ="server" src="../Images/red_star.gif" alt="Red Star" class="RedStars"/>Check to Certify:
</td>
<td colspan="1">
<span ID="Material_CB_Span" runat="server"></span>
<asp:CheckBox ID="Material_CB" runat="server" AutoPostBack="false" CssClass="cb bold" Text="Material is NOT Classified" Width="150px" />
</td>
</tr>
</table>
<table>
<tr>
<td class="bold TBDecoSmall" style="width: 150px; height: 24px;">
<img id="star6" runat ="server" src="../Images/red_star.gif" alt="Red Star" class="RedStars"/>Storage Requirements:
</td>
<td colspan="1" style="height: 24px">
<asp:CheckBoxList ID="m_storageList" runat="server" AutoPostBack="false" CssClass="Space bold" RepeatColumns="5" />
</td>
</tr>
</table>
<table>
<tr ID="TempStorageInstruction_TR" runat="server" >
<td class="bold TBDecoSmall" colspan="1" style="width: 180px">
<img id="star7" runat ="server" src="../Images/red_star.gif" alt="Red Star" class="RedStars"/>Temperature Storage Instructions:
</td>
<td >
<span ID="TempStorageSpan" runat="server" class="bold"></span>
<asp:TextBox ID="TempStorageInstruction_TB" runat="server" CssClass="Bmar TBDecoLong" ValidationGroup="saveAll" ViewStateMode="Enabled" Height="20px" TextMode="MultiLine" Width="220px"></asp:TextBox>
</td>
<td>
</td>
</tr>
<tr ID="OtherStorageInstruction_TR" runat="server" >
<td class="bold TBDecoSmall" style="width: 150px">
<img id="star8" runat ="server" src="../Images/red_star.gif" alt="Red Star" class="RedStars"/> Other Storage Instructions:
</td>
<td >
<span ID="m_otherInstSpan" runat="server" class="bold"></span>
<asp:TextBox ID="OtherStorageInstruction_TB" runat="server" CssClass="Bmar TBDecoLong" Height="20px"
TextMode="MultiLine" ValidationGroup="saveAll" ViewStateMode="Enabled" Width="220px"></asp:TextBox>
</td>
<td>
</td>
</tr>
</table>
</div>
<div style="position: relative; width: 360px; float: right; height: auto; padding-top: 5px; top: 0px;" >
<div class="TBDecoNone" style ="padding: 0x; margin: 0px; float: left" >
<img id="star2" runat ="server" src="../Images/red_star.gif" alt="Red Star" class="RedStars"/> Program Point of Contact:
</div>
<div style ="float : left">
<uc:employeesearch id="progrmPointOfContact_TB" runat="server" scheme="Red" Enabled="false" />
</div>
</div>
</fieldset>
<fieldset runat="server" id ="EditGrid" style="border-color: #CCC; width: 960px;">
<legend style="border-style: none;font-size:small; color: Blue;">
Handling Unit Information</legend>
<div id="GridHolder">
<R:handlingView ID="handlingViewGrid" runat="server" Visible = "true" />
<br />
</div>
<div>
<input type="button" id="m_addNewItem" value="Add Material" style="border-color:#87BF83;color:Black" class="AddB" onclick="AddMaterial()" />
</div>
<div id="m_detailsView" runat="server" style="display:none">
<table cellpadding="1" cellspacing="1">
<tr>
<td class="TextDeco"><img src="../Images/red_star.gif" alt="red_star" class="RedStars"/>Material Number:</td>
<td class="TextDeco"><img src="../Images/red_star.gif" alt="red_star" class="RedStars"/>Description: </td>
<td class="TextDeco"> Manufacturer:</td>
<td class="TextDeco"> Model:</td>
</tr>
<!-- End Header section-->
<tr style="height: 20px; vertical-align: top;">
<!--Material TextBox ID=MatNum_TB-->
<td>
<asp:TextBox ID="MatNum_TB" runat="server" CssClass="TBDeco" Width="175px" Wrap="False"></asp:TextBox>
<br />
</td>
<!--Description TextBox-->
<td>
<asp:TextBox ID="Des_TB" runat="server" CssClass="TBDeco" Width="175px" Wrap="False"></asp:TextBox>
</td>
<!--Manufacturer TextBox-->
<td class="TBDeco">
<asp:TextBox ID="Manufac_TB" runat="server" CssClass="TBDeco" Width="250px" Wrap="False"></asp:TextBox>
<br />
</td>
<!--Model TextBox-->
<td>
<asp:TextBox ID="Model_TB" runat="server" CssClass="TBDeco" Wrap="False" Width="100px"></asp:TextBox>
<br />
</td>
</tr>
<tr>
<td class="TextDeco">
<img src="../Images/red_star.gif" alt="red_star" class="RedStars"/>Material Type:
</td>
<td class="TextDeco" style ="width:150px">
<img src="../Images/red_star.gif" class="RedStars" alt="red_star"/>Inv. Classification:
</td>
<td class="TextDeco" >
<img src="../Images/red_star.gif" alt="red_star" class="RedStars"/>Shelf-Life:
</td>
<td class="TextDeco" >
</td>
</tr>
<tr valign="top">
<td>
<!--Material Type DropDownList-->
<asp:DropDownList ID="MatType_DD" Height="20px" runat="server" CssClass="TBDeco" Width="150px" ></asp:DropDownList>
<br />
</td>
<!--Inventory DropDownList-->
<td>
<asp:DropDownList ID="Inv_DD" Height="20px" runat="server" CssClass="TBDeco" Width="150px"></asp:DropDownList>
<br />
</td>
<td width="240px">
<div style="float: left; height: 20px auto; width: 130px;" >
<asp:TextBox ID="SLife_TB" runat="server" CssClass="TBDecoSmall" Wrap="False" Width="120px" onclick="document.getElementById('ContentPlaceHolder2_SLife_TB').focus();"></asp:TextBox>
<br />
</div>
<div style="float:right; height: 20px auto;" >
<asp:CheckBox ID="Unlimit_CB" runat="server" AutoPostBack="false" CssClass="TBDecoSmall" Height="20px" Text="Unlimited" />
</div>
</td>
</tr>
<!--Header-->
<tr>
<td class="TextDeco">
<img src="../Images/red_star.gif" alt="red_star" class="RedStars"/>Charge Number:
</td>
<td class="TextDeco" style="margin-left:15px;">
Owning Cost Center:
</td>
<td class="TextDeco" style="margin-left:15px;">
Unit Value:
</td>
</tr>
<tr class="bold" style="vertical-align: top">
<!--Charge Number TextBox-->
<td width="250px">
<asp:TextBox ID="Charge_TB" runat="server" CssClass="TBDeco" Width="143px"></asp:TextBox>
<br />
</td>
<!--Owning Cost Center TextBox-->
<td>
<asp:TextBox ID="Own_TB" runat="server" CssClass="TBDeco" Width="143px"></asp:TextBox>
<br />
</td>
<td>
<asp:TextBox ID="Line_TB" runat="server" CssClass="TBDeco" Width="120px"></asp:TextBox>
<br /><br />
</td>
</tr>
</table>
<table cellpadding="1" cellspacing="1" rules="none" frame="void" style="margin: 0px; padding: 0px" >
<tr class="bold ">
<td width="108px">
<img src="../Images/red_star.gif" alt="red_star" class="RedStars" />Serialized:
</td>
<td width="60px" >
<asp:RadioButtonList ID="Seri_RB" runat="server" RepeatDirection="Horizontal" AutoPostBack="false" Width="80px" >
<asp:ListItem Value="1">Yes</asp:ListItem>
<asp:ListItem Value="0">No</asp:ListItem>
</asp:RadioButtonList>
</td>
<td width="193px">
<img id="starForQuantity" runat ="server" src="../Images/red_star.gif" alt="Red Star" class="RedStars"/> Quantity:
<br />
<asp:TextBox ID="Quan_TB" runat="server" Width="143px" Wrap="False" CssClass="TBDecoNone"></asp:TextBox>
</td>
<td width="300px" id="SerialNumber" runat ="server" >
<img id="starForSerial" runat ="server" src="../Images/red_star.gif" alt="Red Star" class="RedStars"/> Serial Number:
<br />
<asp:TextBox ID="Seri_TB" runat="server" Width="120px" CssClass="TBDecoNone" Wrap ="false" ></asp:TextBox>
</td>
</tr>
<tr class="bold " >
<td>
<img src="../Images/red_star.gif" alt="red_star" class="RedStars"/>Moisture Sensitive:
</td>
<td width="60px">
<asp:RadioButtonList ID="Moist_RB" runat="server" AutoPostBack="false" RepeatDirection="Horizontal" >
<asp:ListItem Value="1">Yes</asp:ListItem>
<asp:ListItem Value="0">No</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr class="bold " >
<td >
<img src="../Images/red_star.gif" alt="red_star" class="RedStars"/>Hazardous:
</td>
<td width="80px">
<asp:RadioButtonList ID="Haz_RB" runat="server" RepeatDirection="Horizontal" AutoPostBack="false" >
<asp:ListItem Value="1">Yes</asp:ListItem>
<asp:ListItem Value="0">No</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
</table>
<table>
<tr class="bold" runat="server" id="MSDS_TR" style="display:none">
<td width="130px;">
<img src="../Images/red_star.gif" alt="red_star" class="RedStars"/>
<asp:Label ID="MSDSLabel" runat="server" Text="MSDS Number:"></asp:Label>
</td>
<td width="100px">
<asp:TextBox ID="MSDS_TB" runat="server" CssClass="TBDecoSmall" Wrap="False" Width="100px"></asp:TextBox>
</td>
<td></td>
<td width="440px" colspan="1" >
<div style="float:left" > Attached MSDS: </div>
<input type="file" id="MSDSFileUpload" runat="server" style="width:330px;height:20px" />
</td>
</tr>
</table>
<table id="pkg" runat ="server" >
<tr class="bold" >
<%-- Pack_TR is to make the red star image visible/invisible--%>
<td runat="server" id="Pack_TR" visible="true" >
<img src="../Images/red_star.gif" alt="red_star" class="RedStars"/>Packaging Requirement:
</td>
<td colspan="3" style="width: 468px; text-align:left;" align="left">
<asp:CheckBoxList ID="PackingReq_CBL" runat="server" AutoPostBack="false"
CssClass="Space" RepeatDirection="Horizontal" Visible="true" />
</td>
</tr>
</table>
<table id ="pkgOther" runat ="server" style="display:none">
<tr id="OtherPkgRequirent_TR" runat="server" class="bold " style ="vertical-align:middle;" >
<td>
<img src="../Images/red_star.gif" alt="red_star" class="RedStars"/>Other Packaging Requirement:
</td>
<td colspan="2" align="left">
<asp:TextBox ID="OtherPkgRequirent_TB" runat="server" Width="550px" Wrap="False"></asp:TextBox>
</td>
<td>
</td>
</tr>
</table>
<center>
<div id="mat_err" style="color:red" runat="server" ></div>
<div style="">
<input type="button" id="btnSave" value="Save Material Number" onclick="return SaveMaterialData();" />
<input type="button" id="btnSaveAddMaterial" value="Save and Add Material Number" />
<input type="button" id="btnCancel" value="Cancel" onclick="Cancel()" />
</div>
</center>
</div>
</fieldset>
</div>
</asp:Content>
Have you tried running it through the XHTML validator?
http://validator.w3.org/
you may find errors in there that are compromising the rest of the page's html.

Modal popup extender not displaying popup

I have inherited some code using an ASP modal popup extender and for some reason it has now decided to stop working. Am I missing anything here? I'm not too fluent with AJAX / ASP.Net right now so im struggling to diagnose what is going wrong here.
So firstly the javascript method that displays the modal
function ShowModalRemoveEvent(ID, EventID, InstructorID, InstructorName)
{
alert("Hi");
var modal = $find('ModalPopupExtender1');
modal.show();
document.getElementById("txtID").value = ID;
document.getElementById("txtEventID").value = EventID;
document.getElementById("txtInstructorID").value = InstructorID;
document.getElementById("txtInstructorName").value = InstructorName;
}
I know this is being called because of the alert. So I would assume the prpblem is either in finding the ModalPopupExtender1 or the modal.show() line.
Here is the code for my modal popup extender
<asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel4" runat="server" Style="display: none" CssClass="ModalBackground">
<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="7%" class="cellAlertHeader">
<img src="../../../images/Ops/window_delete.png" style="width: 18px; height: 18px" alt=""/>
</td>
<td width="93%" class="cellAlertHeader">
<b>Cancel Instructor Event</b>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td width="5%">
<td width="95%">
<asp:TextBox ID="txtID" Style="display: none" runat="server" CssClass="TextboxTitle"></asp:TextBox>
<asp:TextBox ID="txtEventID" Style="display: none" runat="server" CssClass="TextboxTitle"></asp:TextBox>
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="95%">
<asp:TextBox ID="txtInstructorID" Style="display: none" runat="server" BorderStyle="None"
CssClass="TextboxTitle"></asp:TextBox>
<asp:TextBox ID="txtInstructorName" Style="font-size: 12px" runat="server" BorderStyle="None"
CssClass="TextboxTitle" BorderWidth="0"></asp:TextBox>
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="95%">
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="95%">
<asp:Label ID="Label2" runat="server" Text="Are you sure you want to remove this Event?"
CssClass="TextboxTitle"></asp:Label>
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="95%">
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="95%">
<asp:Button ID="ButtonConfirmRemove" runat="server" Text="Confirm" CssClass="buttonshort" />
<asp:Button ID="ButtonCancel" runat="server" Text="Cancel" CssClass="buttonshort" />
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="95%">
</td>
</tr>
</table>
</asp:Panel>
<asp:Button runat="server" ID="dummyButton" Style="display: none" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1"
runat="server"
PopupControlID="Panel4"
TargetControlID="dummyButton"
BackgroundCssClass="ModalBGOpacity"
CancelControlID="ButtonCancel"
OnCancelScript="HideModalPopup()">
</cc1:ModalPopupExtender>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="dummyButton" />
</Triggers>
</asp:UpdatePanel>
Try getting the rendered id of your control, like that.
var modal = $find('<%=ModalPopupExtender1.CliendID%>');

I want to reduce the spacing in my asp.net webform

i want to reduce the spacing inside my web page:
The problem is the buttons below "back" and "next" is not visible without scrolling down
I have posted the code below:
<asp:View runat="server" ID="view_1">
<asp:ScriptManager ID="scrMgr" runat="server">
</asp:ScriptManager>
<h1 class="blue" style="margin-bottom:0px;">
<asp:Label ID="lbl_viewTitle1" runat="server" Text="Label"></asp:Label>
</h1>
<div style="margin:0px; padding:0px; border:none; clear:both;">
<table border="0">
<tr>
<td>
<table border="1" style="border-color: Green; border-width: thin;">
<tr>
<td valign="top" id="tdReadableContent" runat="server">
<div style="height: 167px; width:450px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="blue" style="height:16px!important;" colspan="3"><b>Your Current Settings</b></td>
</tr>
<tr style="width:10px"><td colspan="3"></td></tr>
<tr id="trUserDetail_read" runat="server">
<td class="tabRow" valign="baseline">
<asp:Label ID="lbl_view1_userID_Read" runat="server" Text="User ID"></asp:Label>
</td>
<td>
<asp:TextBox ID="txt_view1_userID_Read" ReadOnly="true" runat="server" AutoPostBack="true"
CssClass="text_box_gray"></asp:TextBox><div class="smallText" nowrap>
<%--(This would be the ID you would normally log on with.)--%></div>
</td>
<td> </td>
</tr>
<tr>
<td width="150" class="tabRow">
<asp:Label ID="lbl_panview3_label2_read" runat="server" Text="Store Number "></asp:Label>
</td>
<td>
<asp:TextBox ID="txt_panview3_input2_read" CssClass="text_box_gray" ReadOnly="true" runat="server" MaxLength="4"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td class="tabRow">
<asp:Label ID="lbl_view1_surname_read" runat="server" Text="Surname"></asp:Label>
</td>
<td>
<asp:TextBox ID="txt_view1_surname_read" ReadOnly="true" CssClass="text_box_gray" runat="server"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr id="trFirstName_Read" runat="server">
<td width="150" class="tabRow">
<asp:Label ID="lbl_view1_firstName_Read" runat="server" Text="First Name"></asp:Label>
</td>
<td width="200">
<asp:TextBox ID="txt_view1_firstname_Read" ReadOnly="true" runat="server" CssClass="text_box_gray"></asp:TextBox>
</td>
<td> </td>
</tr>
<tr>
<td></td>
<td>
<%--<asp:Label ID="Label1" CssClass="errorText" runat="server"></asp:Label>--%>
</td>
</tr>
<tr>
<td class="tabRow">
<%--<asp:Label ID="Label2" runat="server" Text="Employee Number "></asp:Label>--%>
</td>
<td width="200">
<%--<asp:TextBox ID="TextBox1" runat="server"
CssClass="text_box_3" MaxLength="10"></asp:TextBox>--%>
</td>
</tr>
</table>
</div>
<asp:Label runat="server" ID="label11"></asp:Label>
<hr class="hrRequestorForm" />
<div id="divRoleDepartment_ReadOnly" runat="server" style="margin-left:20px; height:390px; overflow:auto;" class="tabel1Parent">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<asp:Panel ID="panelStore_Read" runat="server">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top">
<asp:GridView ID="gvRoleDepartment_ReadOnly" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkRole_Read" runat="server" Enabled="false" />
<input type="hidden" id="hdRoleCode_Read" value="<%#Bind('ddl_code') %>" runat="server" />
<input type="hidden" id='hdDepCode_Read' value="<%#Bind('dep_code') %>" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ddl_item" HeaderText="Role" ItemStyle-CssClass="roleColumn2" />
<asp:BoundField DataField="dep_name" HeaderText="Department" ItemStyle-CssClass="departmentColumn" />
</Columns>
<EmptyDataTemplate>
<div class="tabel1Parent">
<table border='0' cellpadding='0' cellspacing='0' style='border-color: green; border-width: thin;
width: 390px; border-left: #9787b1 solid 1px; border-top: #9787b1 solid 1px;'>
<tr>
<td class='roleColumn'>
<b>Role</b>
</td>
<td class='departmentColumn'>
<b>Department</b>
</td>
</tr>
</table>
</div>
</EmptyDataTemplate>
</asp:GridView>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top">
</td>
<td>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</div>
</td>
<td valign="top" >
<div style="height:160px; width:450px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="blue" style="height:16px!important;" colspan="3"><b>
<asp:Label ID="lblNewSettings" runat='server' Text="Your New Settings"></asp:Label>
</b></td>
</tr>
<tr id="trUserDetail" runat="server">
<td class="tabRow" valign="baseline">
<asp:Label ID="lbl_view1_userID" runat="server" Text="User ID "></asp:Label>
</td>
<td class="textFieldColumn">
<asp:TextBox ID="txtUserID" TabIndex="1" text="Enter User id.."
runat="server" AutoPostBack="true"
CssClass="text_box_highlight"
onfocus="defaultStyle();"
onkeypress="ChangeUserIdBackground();"
MaxLength ="50"></asp:TextBox><span id="starUserId" runat="server" style="color:Red"> *</span>
<asp:RequiredFieldValidator ID="rfvUserID" runat="server" ControlToValidate="txtUserID"
ErrorMessage=" Required field" ValidationGroup="Form2"></asp:RequiredFieldValidator><div class="smallText" nowrap>
(This would be the ID you would normally log on with.)</div></td>
</tr>
<tr>
<td colspan="2" style="padding-left:135px">
<asp:Label ID="lblUserExists" CssClass="errorText" runat="server"></asp:Label>
<asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server"
ControlToValidate="txt_panview3_input2" ErrorMessage="Store should be a number"
ValidationExpression="[0-9]+"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td width="150" class="tabRow">
<asp:Label ID="lbl_panview3_label2" runat="server" Text="Store Number "></asp:Label>
</td>
<td>
<asp:TextBox ID="txt_panview3_input2" runat="server"
MaxLength="4" CssClass="text_box_3">0000</asp:TextBox>
<span id="starStoreNumber" runat="server" style="color:Red"> *</span>
<asp:RequiredFieldValidator ID="rfvStoreNumber" runat="server"
ControlToValidate="txt_panview3_input2" ErrorMessage=" Required field"
ValidationGroup="Form2" ></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="tabRow">
<asp:Label ID="lbl_view1_surname" runat="server" Text="Surname "></asp:Label>
</td>
<td >
<asp:TextBox ID="txt_view1_surname" runat="server"
CssClass="text_box_3"
MaxLength ="50"></asp:TextBox>
<span id="starSurName" runat="server" style="color:Red"> *</span>
<asp:RequiredFieldValidator ID="rfvSurName" runat="server" ControlToValidate="txt_view1_surname"
ErrorMessage=" Required field" ValidationGroup="Form2"></asp:RequiredFieldValidator>
</td>
</tr>
<tr id="trFirstName" runat="server">
<td width="150" class="tabRow">
<asp:Label ID="lbl_view1_firstName" runat="server" Text="First Name"></asp:Label>
</td>
<td >
<asp:TextBox ID="txt_view1_firstname" runat="server"
CssClass="text_box_3"
MaxLength ="50"></asp:TextBox>
<span id="starFirstName" runat="server" style="color:Red"> *</span>
<asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ControlToValidate="txt_view1_firstname"
ErrorMessage=" Required field" ValidationGroup="Form2"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="tabRow">
<asp:Label ID="lblEmployeeNumber" runat="server" Text="Employee Number "></asp:Label>
</td>
<td width="280">
<asp:TextBox ID="txtEmployeeNumber" runat="server"
CssClass="text_box_3" MaxLength="6"></asp:TextBox>
<span id="starEmployeeNumber" runat="server" style="color:Red"> *</span>
<asp:RequiredFieldValidator ID="rfvEmplyeeNumber" runat="server" ControlToValidate="txtEmployeeNumber"
ErrorMessage="Required field" ValidationGroup="Form2"></asp:RequiredFieldValidator>
</td>
<td>
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server"
ControlToValidate="txtEmployeeNumber" ErrorMessage="Enter a numeric value"
ValidationExpression="[0-9]+"></asp:RegularExpressionValidator>
</td>
</tr>
</table>
<b><asp:Label ID="lblCaption2" runat="server" Text="Note: All fields are mandatory" ForeColor="Red"></asp:Label></b>
</div>
<hr class="hrRequestorForm" />
<div style="padding-left:20px;" id="divRoleDepartment" runat="server">
<div class="tabel1Parent">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:Panel ID="panelStore" runat="server">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top">
<asp:GridView ID="gvRoleDepartment" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkRole" runat="server" />
<input id="hdRoleCode" runat="server" type="hidden"
value="<%#Bind('ddl_code') %>" />
<input id="hdDepCode" runat="server" type="hidden"
value="<%#Bind('dep_code') %>" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ControlStyle-CssClass="roleColumn" ControlStyle-Width="300px"
DataField="ddl_item" HeaderText="Role" ItemStyle-CssClass="roleColumn" />
<asp:BoundField ControlStyle-CssClass="departmentColumn"
ControlStyle-Width="120px" DataField="dep_name" HeaderText="Department"
ItemStyle-CssClass="departmentColumn" />
</Columns>
</asp:GridView>
<span ID="lbl_chkBx_store_workunit" class="errorText"></span>
</td>
<td>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</div>
<br />
<div>
<table>
<tr>
<td>
<asp:Label ID="lblException" runat="server" CssClass="errorText"></asp:Label>
</td>
</tr>
</table>
</div>
<br />
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<br />
<div>
<table>
<tr>
<td>
<asp:Button ID="btn_view1_back" runat="server" Text="Back" CausesValidation="False"
ValidationGroup="Form2" />
<asp:Button ID="btn_View1_Next" runat="server" CausesValidation="true" Text="Next"
ValidationGroup="Form2" OnClientClick="return check_sel();" UseSubmitBehavior="True" />
<%
'mahesh code
'replaced OnClientClick="return ValidateDropDown(); with OnClientClick="return check_sel() "
%>
</td>
</tr>
</table>
</div>
<br />
</td>
</tr>
</table>
</div>
</asp:View>
Please help #!
You say your problem is that the buttons are not into view. You can scroll your control into view by using this technique. Or you can load the page on my screen, I have a bigger monitor.
What I'm trying to say: if it's visible on your screen after redesign, anybody with a smaller screen or a resized browser window still won't see it.
If you want to-the-point help on your HTML design, I suggest you upload a trimmed down example of your problem that we can copy and paste to test (or show an online link of your current page).
Lose the tables, or at the very least, remove the unnecessary <div> and <br> tags.
Another option, provided you do not have to support old versions of Internet Explorer, is to use position: fixed to "stick" your buttons to the bottom of the viewable window.
<div style="position: fixed; bottom: 0px;">
<asp:Button ID="btn_view1_back" ... />
<asp:Button ID="btn_view1_next" ... />
</div>

Resources