Page flickers when selecting from DropDownList values

Simflex 301 Reputation points
2023-04-11T23:17:14.6066667+00:00

Greetings again experts, I have been working on this project now since January. AgaveJoe got me started on this project with the help of creating a Repeater control that dynamically creates rows. I am very close to completing this project but my only hold up now is figuring out how to prevent entire page post back when selecting from DropDownList values. There are a few issues that I could not resolve. First, the repeater control is dynamically creating rows. Inside the repeater control, particularly is a field called PurchaseDate that uses jQuery datepicker() 1, With UpdatePanel control, you can dynamically create rows by selecting from the DropDownList called ddlNumber. One of the issues that I am dealing with is that with UpdatePanel, we can only create the first row. Any attempt to create additional rows fail because it defaults to that first row. The second issue is that when you click the PurchaseDate textbox, the datepicker does not pop open. If I remove the UpdatePanel control, everything works great. The only issue is that when selecting from the ddlNumber DropDownList, the entire page flickers and takes the use all the way to the top of the page forcing the user to scroll down to see what row or rows were created. I have tried adding UpdateMode="conditional" but the flickering continues. I tried changing to UpdateMode="Always" but no difference. I even tried adding ClientIDMode="true" but still continue to have the problems of not creating additional rows and not able to pop open the datepicker calendar event. Does anyone have any ideas how to fix this? These are the only issues preventing the project from being completed and I am really stumped here. Your assistance is greatly appreciated. Note: I removed a bunch of codes that are not relevant to the issue that I am having.

 <head>
 <script type="text/javascript">
     $(document).ready(function () {
         $('[id*=PurchaseDate]').datepicker({
             maxDate: 0
         });
     });
</script> 
</head>
<body>
<form..>

	<asp:ScriptManager ID="Test1" runat="server" />
	  <asp:UpdatePanel ID="TestUpdate" runat="server" UpdateMode="Condional">
	   <ContentTemplate>
        	<asp:Panel ID="installnew" runat="server" CssClass="modalPopup" align="center" Style="display:none;margin:0 auto">
                <table style="padding:3px;border-spacing:3px;background-color:white;padding-top:30px;font-size:14pt;width: 90%; padding-left:100px;text-align:center;margin:0 auto">
                <tr>
                   <th colspan ="2" style="text-decoration:underline;">PROPERTY ADDRESS INFORMATION</th></tr></table><table  style="background-color:white; padding-left:100px;font-size:14pt; color:Black;width:90%;margin-left:auto;margin-right:auto;">
                <tr>
                    <td width="(100/1)%" ><div class="input text">Install Address:&nbsp;&nbsp;&nbsp;<asp:TextBox ID="instAddress" ViewStateMode="Enabled" width="798px" runat="server" /></div></td>
                </tr>
            </table>
            <table style="background-color:white; font-size:14pt; padding-left:100px; color:Black;width: 90%;margin:0 auto">
                <tr>
                    <td width="(100/3)%"><div class="input text">City:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <asp:DropDownList ID="instAddressCity" CssClass="ChangeWidth" OnSelectedIndexChanged="instAddressCity_Changed" ClientIDMode="AutoID" AutoPostBack="true" runat="server" />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;State:<asp:DropDownList ID="instAddressState" width="200px" runat="server"><asp:ListItem Value="GA" Selected="True">GA</asp:ListItem></asp:DropDownList>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Zip: <asp:DropDownList ID="instAddressZip" CssClass="ChangeWidth" AppendDataBoundItems="true" runat="server"><asp:ListItem Text="--Select--" Value="" /></asp:DropDownList></div></td>
                </tr>
           </table>
               <table style="background-color:white; font-size:14pt; padding-left:100px; color:Black;width:90%;margin-left:auto;margin-right:auto;">
                <tr>
                    <td width="(100/3)%"><div class="input text">Water Account:&nbsp;&nbsp;<asp:TextBox ID="instAddressAccount" width="200px" runat="server" />
              Year Built:<asp:TextBox ID="instYearBuilt"  width="200px" runat="server" />Date Received:<asp:TextBox ID="txtDateReceived" width="198px" runat="server" /></div>
                 </td>
                </tr>
            </table>
        	<table style="background-color:#ffffff;width:90%; padding-left:100px;padding-top:20px;padding-bottom:20px;text-align:center;margin:0 auto;">
		      <tr>
	            <td style="width:5%;" class="align-left"><span style="color:darkred;font-weight:600;font-size:14pt;" class="rMyChoice"> Check box if install address is same as mailing address <img src="Images/hand-arrow.jpg" class="rMyChoice" style="vertical-align:middle !important;" alt="Check the checkbox" />&nbsp;&nbsp;<asp:CheckBox style="height:45px;width:45px;" ID="SameAsMailing" class="rMyChoice" runat="server" /></span></td>
	          </tr>
           	</table>

            <table  style="background-color:white; font-size:14pt; padding-left:100px; color:Black;width:90%;margin:0 auto;">
                <tr>
                    <td width="(100/1)%"><div class="input text">Mail Address:&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="mailStreetAddress"  ViewStateMode="Enabled" width="805px" runat="server" /></div></td>
                </tr>
            </table>
            <table style="background-color:white; font-size:14pt; padding-left:100px; color:Black;width:90%;margin-left:auto;margin-right:auto;">
                <tr>
                    <td width="(100/3)%"><div class="input text"> City:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <asp:TextBox ID="mailCity" width="200px" runat="server" />
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;State:
            <asp:DropDownList ID="mailState" CssClass="ChangeWidth" AppendDataBoundItems="true" runat="server" />
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Zip: <asp:TextBox ID="mailZip" width="200px" runat="server" /></div></td>
                </tr>
           </table>
            <table style="background-color:#ffffff;width:90%; padding-left:100px;margin:0 auto;">
              <tr>
                <td style="height:10px;"></td>
              </tr>
            </table>
            <table style="background-color:#ffffff;width:90%; padding-left:100px;margin:0 auto;">
              <tr>
                <td> <hr style="background-color:#fff;"/></td>
              </tr>
            </table>
               <table style="padding:3px;border-spacing:3px;background-color:white; padding-left:100px;padding-top:40px;padding-bottom:20px;font-size:14pt; color:Black;width:90%;margin:0 auto;">
                  <tr>
                   <th colspan ="2" style="text-decoration:underline;">OWNER / APPLICANT INFORMATION</th></tr></table><table style="background-color:#ffffff;width:90%; padding-left:100px;text-align:center;padding-bottom:20px;margin-left:auto;margin-right:auto;">
		      <tr>
	            <td width="5%" class="align-left"><span style="color:darkred;font-weight:600;font-size:14pt;"> Enter Onwner name and check box if Owner is same as applicant <img src="Images/hand-arrow.jpg" style="vertical-align:middle !important;" alt="Check the checkbox" />&nbsp;&nbsp;<asp:CheckBox style="height:45px;width:45px;" ID="isApplicant" runat="server" /></span></td>
	          </tr>
           	</table>         
	      <table  style="background-color:white; font-size:14pt; padding-left:100px; color:Black;width:90%;margin:0 auto;">	
            <tr>
		     <td width="(100/2)%"><div class="input text">Primary First Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="primaryFirstName" width="200px" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Primary Last Name:<asp:TextBox ID="primaryLastName" width="200px" runat="server" /></div></td></tr>
          </table>	     
          <table  style="background-color:white; font-size:14pt; padding-left:100px; color:Black;width:90%;margin:0 auto;">	
            <tr>
      	     <td width="(100/2)%"><div class="input text">Secondary First Name:&nbsp;<asp:TextBox ID="secondaryFirstName" width="200px" runat="server" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Secondary Last Name:<asp:TextBox ID="secondaryLastName" width="200px" runat="server" /></div></td>
            </tr>
         </table>
	     <table  style="background-color:white; font-size:14pt;width:90%; padding-left:100px;margin:0 auto;">	
           <tr>
            <td width="(100/1)%"><div class="input text">Applicant Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="txtApplicant" width="750px" runat="server" EnableViewState="true" /></div></td></tr></table>
         <table  style="background-color:white; font-size:14pt;width:90%; padding-left:100px;">	
	       <tr>
		    <td width="(100/3)%">Primary Phone:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="phoneNumber" width="200px" runat="server" />
		     <ajax:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="phoneNumber"
			 ClearMaskOnLostFocus="false" Mask="(999) 999-9999" MaskType="Number" />
		     Alternate Phone:<asp:TextBox ID="altPhoneNumber" with="200px" runat="server" />
		     <ajax:MaskedEditExtender ID="MaskedEditExtender2" runat="server" TargetControlID="altPhoneNumber"
			 ClearMaskOnLostFocus="false" Mask="(999) 999-9999" MaskType="Number" />
		     &nbsp;&nbsp;&nbsp;Email:<asp:TextBox ID="emailAddress" with="200px" runat="server" />
		     <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="emailAddress"
			 ErrorMessage="A valid Email Address must be supplied for Owner/Applicant Email Address"
			 ValidationExpression="^(['_a-z0-9-]+)(\.['_a-z0-9-]+)*@([a-z0-9-]+)(\.[a-z0-9-]+)*(\.[a-z]{2,5})$" /></td></tr></table>
           <table style="background-color:white; font-size:14pt; padding-left:100px; color:Black;width:90%;margin-left:auto;margin-right:auto;">
            <tr>
             <td width="(100/1)%"><div class="input text">Business Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="txtBusinessName" width="751px" runat="server" /></div></td>
            </tr>
           </table>
            <table style="background-color:#ffffff;width:90%; padding-left:100px;margin:0 auto;">
              <tr>
                <td style="height:10px;"></td>
              </tr>
            </table>
            <table style="background-color:#ffffff;width:90%; padding-left:100px;margin:0 auto;">
              <tr>
                <td> <hr style="background-color:#fff;"/></td>
              </tr>
            </table>
             <table style="padding:3px;border-spacing:3px;background-color:white; padding-top:40px;padding-bottom:20px;padding-left:100px; font-size:14pt; color:Black;width:90%;margin-left:auto;margin-right:auto;">
                  <tr>
                   <th colspan ="2" style="text-decoration:underline;">TOILET INFORMATION</th></tr></table><table style="padding:3px;border-spacing:3px;background-color:white; padding-left:100px; font-size:14pt; color:Black;width:90%;margin-left:auto;margin-right:auto;">
             <tr>
	          <td width="(100/2)%">Total # of toilets at property:</td><td>
	           <asp:DropDownList ID="instAddressToilets" CssClass="ChangeWidth" runat="server" OnSelectedIndexChanged="instAddressToilets_SelectedIndexChanged" AutoPostBack="true" />
		       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td>How many toilets did you upgrade? <asp:DropDownList ID="ddlNumber" CssClass="ChangeWidth" runat="server" OnSelectedIndexChanged="ddlNumber_SelectedIndexChanged" AutoPostBack="true" />
	          </td></tr>
	        </table>
              <div style="background-color:White; font-size:14pt; color:Black;background-color:white;white-space:nowrap;padding:5px;width:90%;margin:0 auto;" class="popupdiv">
	      <asp:Repeater ID="DynamicRepeater" runat="server" EnableViewState="true" OnItemDataBound="OnItemDataBound">
	       <HeaderTemplate>
		    <table border="1" style="background-color:White; width:90%; border-color:lavender; border-collapse:collapse;">
		    <tr>
			<th style="text-align:left;">
			    Toilet GPF </th><th style="text-align:left;">
			    Rebate Amount </th><th style="text-align:left;">
			    Toilet Model # </th><th style="text-align:left;">
                New Toilet GPF</th><th style="text-align:left;">
			    Purchase  Date </th></tr></HeaderTemplate><ItemTemplate>
		    <tr>
		    <td>
		        <asp:DropDownList ID="ddlToiletGPF" class="ChangeWidth" AppendDataBoundItems="true" runat="server">
                   <asp:ListItem Text="Select" selected="True" Value="" />
		        </asp:DropDownList>
               <asp:HiddenField ID="hfAsset" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "GPF") %>' />
		    </td>
            <td>
	         <asp:TextBox ID="txt_Amount" style="width:200px" Text='<%# Eval("RebateAmount") %>' DataFormatString="{0:c}" runat="server"></asp:TextBox></td><td>
			<asp:TextBox ID="ToiletModelNumber" style="width:200px" Text='<%# Eval("ToiletModelNo") %>' runat="server"></asp:TextBox></td><td>
			<asp:TextBox ID="txt_newgpf" style="width:200px" Text="" runat="server"></asp:TextBox></td><td>
			<asp:TextBox ID="PurchaseDate" style="width:200px" Text='<%# DataBinder.Eval(Container.DataItem, "PurchaseDate") %>' DataFormatString="{0:MM/dd/yyyy}" runat="server"></asp:TextBox><%--<ajax:CalendarExtender ID="pruchaseDte" runat="server" TargetControlID="PurchaseDate" Format="MM/dd/yyyy" ViewStateMode="Enabled" />--%>
		    </td>
    	</tr>
	    </ItemTemplate>
	    <FooterTemplate>
		</table>
	    </FooterTemplate>
	</asp:Repeater>

 <table style="padding:3px;border-spacing:3px;background-color:white;  padding-left:400px;padding-top:20px;font-size:14pt; color:Black;width:100%;">
   	  <tr>
	    <td width="(100/3)%">
	    <asp:Label ID="Label7" runat="server" style="float: left; width: 300px; text-align: center;padding-top:5px; font-weight:bold !important;" Text="Is This Application A Return?" />
            <asp:RadioButtonList ID ="returnyesno" SelectedValue='<%# Eval("returnOnly", "{0}") %>' OnSelectedIndexChanged="returnyesno_SelectedIndexChanged" RepeatDirection="Horizontal" AutoPostBack="true" runat="server" CssClass="rMyChoice">
              <asp:ListItem Text="Yes" Value="1"></asp:ListItem><asp:ListItem Text="No" Value="0"></asp:ListItem></asp:RadioButtonList></td></tr></table><table style="padding:3px;border-spacing:3px;background-color:white; text-align:center;font-size:14pt; color:Black;width:100%;">
	    <tr>
	    <td style="padding-left:200px">Return Reason: <asp:DropDownList ID="ddReturns" AppendDataBoundItems="true" runat="server" CssClass="ChangeWidth"><asp:ListItem Text="--Select--" Value="0" /> 
	   </asp:DropDownList>
	     Return Date: <asp:TextBox ID="txtreturnDate" width="150px" runat="server" />
               Date Returned: <asp:TextBox ID="dateReturned" width="150px" runat="server" />
          </td></tr></table><hr />
	<table border="0" style="background-color:White; width:85% !important;border-color:lavender; border-collapse:collapse;">
   <tr>
    <td>
        <asp:Button ID="Preview" style="margin-left: 100px !important;font-size:14pt;background-color:#284f69;color:#DADBDD;" runat="server" Text="Save Data" OnClick="btnPreview_Click" />
        </td><td>
    </td>
    <td>
	<asp:Button ID="btnClose" style="font-size:14pt;background-color:#284f69;color:#DADBDD;" runat="server" Text="Cancel" />
    </td>
   </tr>
  </table>
 </div>
 </asp:Panel>
 </ContentTemplate>
</asp:UpdatePanel>
 </form>
 </body>
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,510 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.