Below is the code.
Everything else is working fine. Just when the user clicks btnWhishlist (if user not logged-in) ModalPopupExtender displays for login. On popup whether Cancel or Login is clicked, even if the user gets logged in, the btnWishlist button disappears.
When the page is reloaded the button appears again. Looks like UseSubmitBehavior="false" is creating the problem. The page do not reload but only the button disappears, everything else remains same.
Tried jquery to show the panel/div that contains the button. No Luck.
<ContentTemplate >
<asp:ListView ID="usrListShowImages" runat="server" OnItemCommand="usrListShowImages_ItemCommand" OnItemCreated="usrListShowImages_ItemCreated" >
<LayoutTemplate>
some layout
</LayoutTemplate>
<ItemTemplate>
<tr>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" ID="up_inlv">
<ContentTemplate>
<div id="divWishlist" class="wishlist" runat="server">
<div class="<%--growuser--%>picUserShow">
<asp:ImageButton ID="btnImages" ImageUrl='<%# ".." + Eval("ItemsPicUrl") %>' runat="server" CssClass="growuser" CommandName="btnImages" CommandArgument='<%# Eval("ID") %>' />
<asp:Panel class="bottomDiv" runat="server" id="btmDiv"> <%-- HAVE USER SIGNIN, CHECK FROM DB THAT THIS ITEM WAS ADDED TO WISHLIST OR NOT AND THEN ALOT THE BUTTON TEXT ACCORDINGLY --%>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button ID="btnWhishlist" Text='<%# Eval("colbtnwishlist") %>' runat="server" CssClass="wishlistButton" CommandName="btnWhishlist" CommandArgument='<%# Eval("ID") %>' UseSubmitBehavior="false" EnableViewState="true" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<div class="bottomDivCart">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button ID="btnCart" Text="Cart" runat="server" CssClass="CartButton" CommandName="btnCart" UseSubmitBehavior="false" CommandArgument='<%# Eval("ID") %>' EnableViewState="true" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="caption">
<%# Eval("captionforpage") %>
</div>
</div>
<div class="priceTag">Price Rs.<%# Eval("priceofarticle") %></div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</tr>
</ItemTemplate>
There are no errors so far. The wish button should show up without having a page reload, the same way the other artifacts are showing up
I'm facing a problem that doesn't seems to have a solution.
I have a MasterPage with a ScriptManager as you can see right below:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" >
<Scripts><asp:ScriptReference Path="js/jquery-1.11.2.min.js" /></Scripts>
<Scripts><asp:ScriptReference Path="js/jquery-ui.min.js" /></Scripts>
<Scripts><asp:ScriptReference Path="js/jquery.bxslider.min.js" /></Scripts>
<Scripts><asp:ScriptReference Path="js/bootstrap.js" /></Scripts>
</asp:ScriptManager>
And, in one of my Content Pages i have an UpdatePanel:
<div id="cad_cpf" class="cad_cpf">
<asp:Label runat="server" ID="lblCpf" CssClass="lblCpf" Text="* CPF:" Width="200px"></asp:Label>
<asp:TextBox runat="server" ID="txtCpf" CssClass="txtCpf" MaxLength="14" CausesValidation="True" AutoPostBack="true" OnTextChanged="txtCpf_TextChanged"></asp:TextBox>
<asp:UpdatePanel ID="udpTeste" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional" style="display:inline-block;">
<ContentTemplate>
<asp:Panel runat="server" ID="pnlMensagemCpf" Visible="false"><asp:Label runat="server" Text="CPF já cadastrado. " CssClass="validacao" ID="lblMensagemCpf"></asp:Label><asp:HyperLink runat="server" ID="hplLogar" CssClass="validacao linkLogar" data-toggle="modal" data-target="#Login">Fazer login!</asp:HyperLink></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:RequiredFieldValidator ID="rfvCpf" CssClass="validacao" runat="server" ControlToValidate="txtCpf" Display="Dynamic" ErrorMessage="Campo obrigatório" ValidationGroup="pessoa_fisica" EnableClientScript="False" SetFocusOnError="True"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regCPF" runat="server" ControlToValidate="txtCPF" CssClass="validacao" Display="Dynamic" EnableClientScript="False" ErrorMessage="Digite o CPF corretamente" SetFocusOnError="True" ValidationExpression="^\d{3}\.\d{3}\.\d{3}-\d{2}$" ValidationGroup="pessoa_fisica"></asp:RegularExpressionValidator>
</div>
All i want to do is to refresh the UpdatePanel so it can shows a Panel (with a Label and a Hyperlink) in the TextChanged event of a TextBox.
It seems like a have tried everything, but nothing works!
I tried to put the TextBox inside the ContentTemplate changing ChildrenAsTriggers to "true", but it didn't work.
I tried to use the Update() method in code behind, but it didn't work.
The funny fact is that if i set the TextBox as a PostBackTrigger it works perfectly (except for the fact that it refreshes the entire page), but when I set the TextBox as AsyncPostBackTrigger it does nothing.
Can anybody help me?
My problem is that I can't seem to get my textbox to fire the OnTextChanged event. I also checked and it doesn't seem like it is doing an autopostback despite the fact that it is set to true.
Basically, I am trying to validate the text in the textbox and either enable or disable a button based on the validation status.
Here's my code:
<asp:Panel ID="panelAccessControl" runat="server" Visible="false">
<asp:Panel ID="panelAddMileageRate" runat="server" BorderWidth="2" >
<h2>Add Mileage Rate</h2>
<asp:ScriptManager ID="scriptManagerMileageRate" runat="server" />
<asp:UpdatePanel ID="updatePanelAddMileageRate" runat="server">
<ContentTemplate>
<p>
Purpose:
<asp:DropDownList ID="ddlAddPurpose" runat="server"
AutoPostBack="true" Width="200px"></asp:DropDownList>
<br />
Country:
<asp:DropDownList ID="ddlAddCountry" runat="server"
AutoPostBack="true" Width="200px" >
</asp:DropDownList>
<br />
Effective Date:
<asp:Calendar ID="calAddEffectiveDate" runat="server">
</asp:Calendar>
<br />
Mileage Rate:
<asp:TextBox ID="txtAddMileageRate" runat="server"
AutoPostBack="true" Width="200px"
CausesValidation="true"
ontextchanged="txtAddMileageRate_TextChanged">
</asp:TextBox>
<asp:RegularExpressionValidator
ID="validatorAddMileageRate"
ControlToValidate="txtAddMileageRate" runat="server"
SetFocusOnError="true"
ErrorMessage="Only Numbers allowed"
ValidationExpression="^\d{1,20}(\.\d{0,4})?$">
</asp:RegularExpressionValidator>
</p>
</ContentTemplate>
</asp:UpdatePanel>
<p>
<asp:Button ID="buttonAddSecurityGroup" runat="server"
Text="Submit" onclick="buttonAddSecurityGroup_Click" />
</p>
</asp:Panel>
<asp:Label ID="lblStatus" runat="server" Text=""></asp:Label>
</asp:Panel>
The text box in question is txtAddMileageRate.
Set the EventName property for your txtAddMileageRate AsyncPostBackTrigger to TextChanged.
Add following codes inside your update panel and outside of ContentTemplate
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtAddMileageRate"
EventName="TextChanged" />
</Triggers>
Other sugguestion:
Have you tried looking at the AutoComplete (http://www.asp.net/ajax/ajaxcontroltoolkit/samples/autocomplete/autocomplete) control that is part of the AjaxControlToolKit? Its behaves the same way you want your solution to behave.
I'm running into a bit of an issue. I have some asp.net controls wrapped in an update panel, but when I click the submit button it jumps to the top of the page. I've read a bunch of posts on here, and they either require use of some javascript or say set the MaintainPagePostion to "true" in the page directive. I tried setting it to true, that did not work. I really don't want to use a javascript script to accomplish this either. I was under the impression that this is one of the benefits to using an update panel. However, the part that I find most confusing, is it used to not do this. I don't remember changing anything on the website that would have caused this. Any help with this problem is appreciated. Thanks.
Here is the code I'm using.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlEmailStuff" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox><br />
Email: <asp:TextBox ID="txtEmail" runat="server" Width="203px"></asp:TextBox><br />
<span style="font-size:12px; font-weight:normal; margin-left:55px;">**Please double check email**</span><br />
Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="370px" TextMode="MultiLine" Font-Names="Tahoma" Font-Size="Small" Height="75px"></asp:TextBox><br />
<asp:Label ID="lblEmailError" runat="server" Text="" Font-Size="Small" ForeColor="Red"></asp:Label>
<asp:ImageButton Height="25px" Width="60px" CssClass="EmailSubmit" ImageUrl="Images/MailingListBtnSubmit2.png" ID="btnSubmit" runat="server" onclick="btnSubmit_Click"/>
</asp:Panel>
<asp:Panel ID="pnlThankYou" runat="server" Visible="false">
<p style="text-align:center; font-size:30px;">Thank you!<br /><span style="font-size:20px;">Your Email has been sucessfully submitted.</span></p>
</asp:Panel>
</ContentTemplate>
You can do it in 4 ways :
From Code-behind - Page.MaintainScrollPositionOnPostBack = true;
From Page Directive - MaintainScrollPositionOnPostback="true"
From Web.config - <pages maintainScrollPositionOnPostBack="true" />
Using Javascript. You can use the code from following link. It worked for me -
http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx
I think, it's not jump to the top of the page. It's refreshing the page. What's your update panel's UpdateMode? Is it Conditional? If it's conditional, check trigger. ControlID should be button ID and EventName='Click'. Then check the area of Update Panel .
Sample Code Here :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlEmailStuff" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox><br />
Email: <asp:TextBox ID="txtEmail" runat="server" Width="203px"></asp:TextBox><br />
<span style="font-size:12px; font-weight:normal; margin-left:55px;">**Please double check email**</span><br />
Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="370px" TextMode="MultiLine" Font-Names="Tahoma" Font-Size="Small" Height="75px"></asp:TextBox><br />
<asp:Label ID="lblEmailError" runat="server" Text="" Font-Size="Small" ForeColor="Red"></asp:Label>
<asp:ImageButton Height="25px" Width="60px" CssClass="EmailSubmit" ImageUrl="Images/MailingListBtnSubmit2.png" ID="btnSubmit" runat="server" onclick="btnSubmit_Click"/>
</asp:Panel>
<asp:Panel ID="pnlThankYou" runat="server" Visible="false">
<p style="text-align:center; font-size:30px;">Thank you!<br /><span style="font-size:20px;">Your Email has been sucessfully submitted.</span></p>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Have you specified the triggers in the update panel? If you specify the triggers in the triggers section then the update panel will update without jumping on top.Also you need to give updatemode = "conditional". It can be done like this:
<asp:UpdatePanel ID="ex" runat="server" UpdateMode="Conditional">
<ContentTemplate>
//your controls here
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="yourbuttonid" />
</Triggers>
</asp:UpdatePanel>
Well thank you to everyone that gave me suggestions. As it turns out the Page Routing is what caused this issue. So all I had to do to get it working was add and ignore line for that page in my RegisterRoutes code block:
void RegisterRoutes(RouteCollection routes)
{
routes.Ignore("Mobile");
routes.Ignore("Booking.aspx*");//<---- This Fixed it.
routes.MapPageRoute("Gallery", "Gallery/{Name}", "~/Gallery.aspx");
routes.Ignore("*");//<---- This is better for me. It acts as a catch all.
}
This helped me solve the issue: http://forums.asp.net/t/1743640.aspx
EDIT
I added the "routes.Ignore("");" code to it to act as a catch all, so I really don't need to ignore "Booking.aspx" specifically. Keep in mind though the order is important here. The Ignore("") needs to be the last one or else none of the other routing will work.
Thanks again Everyone.
Please try PageRequestManager handlers
<script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
try {
sender._controlIDToFocus = null;
}
catch (e) {
}
}
</script>
I was stuck for a few hours with a similar problem. I was convinced the problem was the UpdatePanel but it ended up being the defaultfocus & defaultbutton attributes in the form tag that was causing the page to jump up to focus the first textbox at the top of the page.
<form id="form1" runat="server" defaultbutton="buttonId" defaultfocus="textboxId">
This is something else to look at when facing this kind of issue.
I am working on asp.net application and I have an update panel like this:
<asp:UpdatePanel ID="upCheckout" runat="server">
<ContentTemplate>
<!-- BillingAddress -->
<div runat="server" id="pnlBillingAddress" class="checkoutstep">
<asp:Panel runat="server" ID="pnlBillingAddressContent" class="stepcontent">
<nopCommerce:CheckoutBillingAddress ID="ctrlCheckoutBillingAddress" runat="server"
OnePageCheckout="true" OnCheckoutStepChanged="ctrlCheckoutBillingAddress_CheckoutStepChanged" />
<asp:CheckBox ID="chkShippingSameAsBilling" runat="server" Text=" Ship to same address"
AutoPostBack="true" Checked="true" onclick="ShowShippingAddress();" /><br />
</asp:Panel>
</div>
<!-- ShippingAddress -->
<div runat="server" id="pnlShippingAddress" class="checkoutstep">
<asp:Panel runat="server" ID="pnlShippingAddressContent" class="stepcontent">
<nopCommerce:CheckoutShippingAddress ID="ctrlCheckoutShippingAddress" runat="server"
OnePageCheckout="true" OnCheckoutStepChanged="ctrlCheckoutShippingAddress_CheckoutStepChanged" />
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
where billing address is a user control. In billing address control, There is a dropdownlost. like this:
<asp:DropDownList ID="drpBillingAddresses" ClientIDMode="Static" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drpBillingAddresses_SelectedIndexChanged">
</asp:DropDownList>
but when I change dropdown selection, I get full post back instead of partial postback. why I am getting full postback ?
Register the OnSelectedIndexChanged event as asynchronous by setting Triggers property of UpdatePanel.