OnSelectedIndexChanged not working within the asp:updatePanel - c#

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>

Related

UpdatePanel not refreshing on my radiobuttonlist

I have some radio buttons like this:
<li class="list-group-item">
<p>YOUR AGE IS AN IMPORTANT FACTOR IN YOUR ABILITY TO TAKE ON INVESTMENT RISK. YOUR AGE IS:</p>
<asp:RadioButtonList ID="radioBtnFirst" CssClass="radioBtnAge" runat="server" RepeatDirection="Horizontal"
TextAlign="Right" AutoPostBack="True" OnSelectedIndexChanged="radioBtnFirst_SelectedIndexChanged">
<asp:ListItem Value="1">60 and over</asp:ListItem>
<asp:ListItem Value="2">50 - 59</asp:ListItem>
<asp:ListItem Value="3">40 - 49</asp:ListItem>
<asp:ListItem Value="4">30 - 39</asp:ListItem>
<asp:ListItem Value="5">Under 30</asp:ListItem>
</asp:RadioButtonList>
</li>
Now somewhere donw I have a textbox where I want to get the value of the selected radiobutton. This is the code that is doing that:
protected void radioBtnFirst_SelectedIndexChanged(object sender, EventArgs e)
{
totalScore.Text = radioBtnFirst.SelectedValue;
}
I wanted to add UpdatePanel so it won't refresh the whole page but it's not working, when I press first one of the radio buttons it doesn't happen anything, but when I press the second time, it refreshes again the whole page.
This is the code that I used for UpdatePanel:
<h3>Total Score:</h3>
<asp:UpdatePanel ID="upScore" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox runat="server" ID="totalScore" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="radioBtnFirst" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
Now it's ok, it's working. I figured out that the problem was behind the code in Page_Load method.

How to use UpdatePanel in content page when ScriptManager is in MasterPage?

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?

AutoCompleteExtender Works Only After Postback

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.

how to fix the partial rendering if i have three or more drop down lists

If I have three drop down lists:
The second one filled when select from the first one
The third one filled when i select from the second one.
I put the second and third one in update panels to make partial post back but I note that when I select from the second one the third one doesn't fill at all!!
How to fix this problem?
<asp:DropDownList ID="drp_camp" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drp_camp_SelectedIndexChanged" Width="300px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="drp_fac" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drp_fac_SelectedIndexChanged"
Width="300px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rVal_fac" runat="server" ControlToValidate="drp_fac"
ErrorMessage="!" InitialValue="-1" ValidationGroup="G1"></asp:RequiredFieldValidator>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drp_camp" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:DropDownList ID="drp_dep" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drp_dep_SelectedIndexChanged"
Width="300px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rVal_dep" runat="server" ControlToValidate="drp_dep"
ErrorMessage="!" InitialValue="-1" ValidationGroup="G1"></asp:RequiredFieldValidator>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drp_fac" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
Try using cascaded dropdownlist. This works pretty fine which will solve your issue.
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx
You can put all three DropDownLists in one UpdatePanel control, there is no need to try and handle the partial postback of each control.
You could use something like this:
<asp:UpdatePanel ID="upMain" runat="server">
<ContentTemplate>
<asp:DropDownList ID="drp_camp" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drp_camp_SelectedIndexChanged">
</asp:DropDownList>
<asp:DropDownList ID="drp_fac" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drp_fac_SelectedIndexChanged">
</asp:DropDownList>
<asp:DropDownList ID="drp_dep" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drp_dep_SelectedIndexChanged">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
NOTE: You will need to add your RequiredFieldValidators back in.

ajaxToolkit:CalendarExtender losses data # postbacks

Frens,
i have a textbox with ajaxToolkit:CalendarExtender which losses data when i chose radio buttons ....
please read my code...
<asp:UpdatePanel ID="uppnl_Select_File_Format" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="input-field-box-container">
<asp:TextBox ID="txtExpiryDate" runat="server"
SkinID="FormInputTextBox" ReadOnly="true"
ValidationGroup="PublishUser"> </asp:TextBox>
<ajaxToolkit:CalendarExtender ID="ajax_Expiry_Date" runat="server" TargetControlID="txtExpiryDate">
</ajaxToolkit:CalendarExtender>
</div>
<div class="input-field-box-container">
<asp:RadioButton ID="rbtnEnabled" GroupName="Print" Text="Enable" runat="server"
AutoPostBack="true"
OnCheckedChanged="rbtnEnabled_CheckedChanged" CssClass="checkbox-auto"
Width="220px" />
<asp:RadioButton ID="rbtnDisabled"
GroupName="Print" Text="Disable" runat="server"
AutoPostBack="true" OnCheckedChanged="rbtnDisabled_CheckedChanged" CssClass="checkbox-auto"
Width="220px" />
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnCreate" />
<asp:AsyncPostBackTrigger ControlID="ajax_Expiry_Date" />
</Triggers>
</asp:UpdatePanel>
Your radioButton's AutoPostback attribute(or what it is called) is true that means when you change the choice of radio button the page will post back and which will cause to refresh the UpdatePanel.As long as your radio button and CalenderExtender is on the same UpdatePanel every time OnCheckedChanged="rbtnDisabled_CheckedChanged" works CalenderExtender will loose data.
Well you can understand that your solution is using different UpdatePanels for those RadioButtons and CalenderExtenders.
The solution I arrived at was to remove ReadOnly="true".

Categories

Resources