The AutoCompleteExtender works only after there is a postback. The first time the page loads, and user types in the textbox, it doesnt work. But after there is a postback like checkedChanged, buttonClick etc, & user types now, the suggestion list shows up. Its like... the extender is activated only after postbacks.
ASPX:
<asp:radiobutton id="rbenter" runat="server" text="enter code" groupname="search"
oncheckedchanged="rbenter_change" autopostback="true"/>
<asp:radiobutton id="rbselect" runat="server" text="select code"
groupname="search" oncheckedchanged="rbselect_change" autopostback="true"/>
<asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_TextChanged"
onchange="itemSelected();"></asp:TextBox>
<asp:AutoCompleteExtender ID="ace" runat="server" TargetControlId="txtSearch"
MinimumPrefixLength="2" EnableCaching="true" CompletionSetCount="10"
CompletionInterval="0" ServiceMethod="GetCodes" UseContextKey="True"
CompletionListCssClass="autoComplete"
CompletionListItemCssClass="autoCompleteItem"
CompletionListHighlightedItemCssClass="autoCompleteHL"
>
</asp:AutoCompleteExtender>
EDIT:
I found out the culprit. It was the txtSearch.focus() on page_load that was causing this. On page load, the txtSearch gets focus. When I comment this, works fine. But I still wonder, how it works on postback, when it gets focus then. I wish I could make it work on page first load even when it has focus.
CS:
protected void Page_Load()
{
if(!IsPostBack)
{
rbenter.checked=true;
rbselect.checked=false;
txtSearch.visible=true;
//txtSearch.focus(); -- works fine when commented
}
}
protected void rbenter_change()
{
txtSearch.visible=true;
txtSearch.focus();
}
protected void rbselect_change()
{
txtSearch.visible=false;
}
update your update panel as mentioned below :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
// Few Other triggers
<%--<asp:AsyncPostBackTrigger ControlID="txtSearch"/>--%>
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txtSearch" runat="server" AutoPostBack="True" OnTextChanged="txtSearch_TextChanged"
onchange="itemSelected(this);" ></asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtSearch"
MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="10"
CompletionInterval="0" ServiceMethod="GetCodes" UseContextKey="True"
CompletionListCssClass="autoComplete"
CompletionListItemCssClass="autoCompleteItem"
CompletionListHighlightedItemCssClass="autoCompleteHL">
</asp:AutoCompleteExtender>
</ContentTemplate>
</asp:UpdatePanel>
If you land to your page from a SERVER.TRANSFER instruction AUTOCOMPLETE won't run until first postback; use RESPONSE.REDIRECT instead of SERVER.TRASFER and everything will be fine.
Related
I have a dropdown in which list of countries will be listed.During the select OnSelectedIndexChanged event country code such as +91 will be shown in a textbox. The dropdown should be in <asp:Update panel> tag and the update panel just working fine. OnSelectedIndexChanged event also working in the code behind. but the problem is the country code value not displayig in the textbox.
Here is my code..
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:DropDownList
runat="server"
ID="ddl_country"
AutoPostBack="true"
OnSelectedIndexChanged="ddl_country_SelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator
ControlToValidate="ddl_country"
ID="reqCountry"
ValidationGroup="req"
class="validation-msg"
ErrorMessage="Please select a country"
InitialValue="0"
runat="server"
Display="Dynamic">
</asp:RequiredFieldValidator>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="ddl_country"
EventName="ddl_country_SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:TextBox runat="server" ID="text_countrycode"/>
text_countrycode is outside any update panel in the code above. So it's in the form and the entire form needs to post back for this to change it's text.
You're probably using Updatepanels because you don't want the entire form to flash and post back.
Changing the dropdown list doesn't refresh the entire page because it's in an Update Panel. If you want the Textbox to be updated without an whole page post back, put it in it's own updatepanel and trigger it from the first one.
Or even easier, just put them together in the same one.
Add Textbox Control Inside the <ContentTemplate>.
Try this code :
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:DropDownList runat="server" ID="ddl_country" AutoPostBack="true"
OnSelectedIndexChanged="ddl_country_SelectedIndexChanged"></asp:DropDownList>
<asp:RequiredFieldValidator ControlToValidate="ddl_country" ID="reqCountry"
ValidationGroup="req" class="validation-msg" ErrorMessage="Please select a country"
InitialValue="0" runat="server" Display="Dynamic">
</asp:RequiredFieldValidator>
<asp:TextBox runat="server" ID="text_countrycode"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddl_country" EventName="ddl_country_SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
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?
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.
.aspx
<asp:TextBox ID="txtInvite" Width="170px" Height="20px" runat="server"
Font-Size="Small" ></asp:TextBox>
<AjaxToolkit:TextBoxWatermarkExtender ID="tbexInvite"
runat="server" SkinID="skinTextBoxWatermarkExtender"
TargetControlID="txtInvite" WatermarkText="Email"></AjaxToolkit:TextBoxWatermarkExtender>
<asp:RequiredFieldValidator ID="rfvInvite" runat="server"
Display="None" ValidationGroup="Inivitation" SetFocusOnError="true"
ControlToValidate="txtInvite" ErrorMessage="Enter Email."></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regExpInvite" runat="server"
Display="None" ValidationGroup="Inivitation" SetFocusOnError="true"
ValidationExpression="\s*\w+([-+.]\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*\s*"
ControlToValidate="txtInvite" ErrorMessage="Invalid Email Format."></asp:RegularExpressionValidator>
<div class="ButtonLogin" style="margin-top:-27px;margin-right:143px;_margin-right:105px;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<asp:Button ID="btnInvite" runat="server" CssClass="cssLoginButton blue" Text="Invite" ToolTip="Invite" ValidationGroup="Inivitation" CausesValidation="true" onclick="btnInvite_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
<ProgressTemplate>
<asp:Image ID="Image1" ImageUrl="~/App_Themes/Lifetrons/images/progressbar.gif" AlternateText="Processing" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
Page_load Code
.CS
this.btnInvite.Attributes.Add("onclick", "this.disabled=true;" + Page.ClientScript.GetPostBackEventReference(this.btnInvite, "").ToString());
I want to disable button after clicking on it with maintaining validation and Onlick method. I refer to this question my problem is same like this question but I haven't solve my problem. How can I solve?
There is no need to mess around with your code-behind Page_Load event. In your button control, just add the following snippet:
OnClientClick="if(Page_ClientValidate('Inivitation')){this.disabled=true;}"
So that your button looks like
<asp:Button ID="btnInvite" runat="server" CssClass="cssLoginButton blue" Text="Invite"
ToolTip="Invite" ValidationGroup="Inivitation" CausesValidation="true"
onclick="btnInvite_Click" OnClientClick="if(Page_ClientValidate('Inivitation')){this.disabled=true;}" />
You should be able to disable the button using the Button_Click method. Make your first line something like this:
Button.Enabled = False;
There is a problem with this method though. If the page loads too quickly or the code freezes it will not disable the button properly. Just remember to re-enable the button at the end of the method if the validation fails or times out.
Another method you may try is to hide it using CSS. I am a big fan of this because it always works and it is very simple. You need a technology like jQuery where you can add classes on the fly. You can use the AddClass and RemoveClass API in jQuery to add/remove CSS classes at runtime. Take a look here. http://jqueryui.com/addClass/
you can use Like this
<asp:Button ID="btnInvite" runat="server" CssClass="cssLoginButton blue" Text="Invite" ToolTip="Invite" ValidationGroup="Inivitation" CausesValidation="true" UseSubmitBehavior = False"onclick="btnInvite_Click" />
Has anyone else tried to use checkbox as control to collapse/expand the AJAX CollapsiblePanelExtender?
The panel collapses/expands fine when I am clicking the checkbox. But the checkbox itself won't get checked.
Did that happen to you too?
I know there's a work around this, but I can't rest until I understand why.
Here's the code just in case someone wants to see:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="standard">
<asp:UpdatePanel ID="UpdatePanelBespokeRates" runat="server">
<ContentTemplate>
<asp:CheckBox ID="checkbespoke" runat="server" AutoPostBack="False" Checked="false" Text="Click and unclick this checkbox" />
</p>
<asp:UpdatePanel ID="UpdatePanelBespoke" runat="server">
<ContentTemplate>
<asp:CollapsiblePanelExtender ID="CollapsibleExtender2" runat="server"
TargetControlID="PnlBespokeRates" CollapseControlID="checkbespoke"
CollapsedSize="1" ExpandControlID="checkbespoke" SuppressPostBack="True"
Enabled="True" Collapsed="True"></asp:CollapsiblePanelExtender>
<asp:Panel ID="PnlBespokeRates" runat="server" Visible="True" Height="300px" Width="200px" BackColor="White">
<p>Another Hello World text</p>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="checkbespoke" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
<p>
</div>
in the Code behind it is:
protected void Page_Load(object sender, EventArgs e)
{
CollapsibleExtender2.ClientState = "true";
CollapsibleExtender2.Collapsed = true;
}
Try removing Checked="false" from the asp:CheckBox declaration. I suspect that the postback trigger may be reloading the checkbox and re-initialising it.
What worked was:
SuppressPostback="false" in the CollapsiblePanelExtender attribute
and
Autopostback="true" in the checkbox control
remove all manual C#
And then voila.