ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,481 questions
Page flickers when selecting from DropDownList values
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(291.2, 34%, 38%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ES%3C/text%3E%3C/svg%3E)
Simflex
301
Reputation points
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: <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: <asp:DropDownList ID="instAddressCity" CssClass="ChangeWidth" OnSelectedIndexChanged="instAddressCity_Changed" ClientIDMode="AutoID" AutoPostBack="true" runat="server" />
State:<asp:DropDownList ID="instAddressState" width="200px" runat="server"><asp:ListItem Value="GA" Selected="True">GA</asp:ListItem></asp:DropDownList>
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: <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" /> <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: <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: <asp:TextBox ID="mailCity" width="200px" runat="server" />
State:
<asp:DropDownList ID="mailState" CssClass="ChangeWidth" AppendDataBoundItems="true" runat="server" />
      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" /> <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: <asp:TextBox ID="primaryFirstName" width="200px" runat="server" /> 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: <asp:TextBox ID="secondaryFirstName" width="200px" runat="server" /> 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: <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: <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" />
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: <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" />
</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>
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(262.40000000000003, 36%, 35%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ELH%3C/text%3E%3C/svg%3E)
Lan Huang-MSFT 29,336 Reputation points Microsoft Vendor2023-04-12T06:00:42.9066667+00:00 Hi @Simflex, It's hard for us to help you if you don't provide details but just html. You need to provide a minimal example that reproduces the problem.
The second issue is that when you click the PurchaseDate textbox, the datepicker does not pop open. 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.
You need to set
ClientIDModetoStaticin theRepeatercontrol. ClientIDMode does not have a true property.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.
You didn't provide code at all on how to implement the creation of dynamically created rows. It is difficult for us to reproduce your problem and help you. You could try adding a trigger to see if it works.
<asp:UpdatePanel ID="TestUpdate" runat="server"> <ContentTemplate> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ddlNumber" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> -
Simflex 301 Reputation points
2023-04-12T13:01:35.5033333+00:00 The ClientIDMode thing was a typo. I meant ClientIDMode="AutoID" Like I said, I tried various combinations of the UpdatePanel control including the one you posted. It is just not interacting well with Repeater control being inside it. I have used updatePanel on various projects with no issues.
-
Lan Huang-MSFT 29,336 Reputation points Microsoft Vendor
2023-04-13T07:59:58.21+00:00 Hi @Simflex, Does datepicker() work after setting ClientIDMode to Static ?
Are you saying you tried UpdatePanel Triggers and it didn't work?
You can put all the controls you think will be affected in UpdatePanel Triggers.
<Triggers> <asp:AsyncPostBackTrigger ControlID="DynamicRepeater" EventName="OnItemDataBound" /> <asp:AsyncPostBackTrigger ControlID="ddlNumber" EventName="SelectedIndexChanged" /> </Triggers>
Sign in to comment
Sign in to answer