We Keep Coding

Unable to trigger the code-behind (aspx.cs) method from aspx page using update panel

I got a autocomplete textbox which displays Citynames. Whenever user clicks on a cityname the selected cityname is displayed in a textbox. This textbox value should be sent over to code behind method (aspx.cs) for fetching more details of the selected city name so that the resultant details are displayed in a gridview.
Now for passing the selected value I have added a textbox which copies the selected cityname value and enclosed it in a update panel. When ever the text box selection changes the idea is to trigger the code-behind method:
This is the code in aspx page:
$(document).ready(function () {
$('#txtName').on('change', function () {
$('#selectedItem').html(this.value);
}).change();
$('#txtName').on('autocompleteselect', function (e, ui) {
$('#selectedItem').val(ui.item.value);
});
});
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<label>Alternate Names: </label>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Label ID="countLabel" runat="server"></asp:Label>
<br />
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="selectedItem" runat="server" OnTextChanged="selectedItem_TextChanged"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="selectedItem" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</form>
This is the code in aspx.cs page:
protected void selectedItem_TextChanged(object sender, EventArgs e)
{
MessageBox.Show(selectedItem.Text);
}
But this method ain't getting triggered. Could somebody please help me with identifying the mistake i'm doing.

First, MessageBox.Show is not WEBforms code but WINforms. You should not mix those together. If you want to show results on a webpage, use javascript alert or a Modal.
Next item is this: $('#selectedItem').html(this.value);. It should be used with val()
$('#selectedItem').val(this.value);
Third if yo want to trigger a PostBack on a TextChange, use AutoPostBack=true
<asp:TextBox ID="selectedItem" ClientIDMode="Static" runat="server"
OnTextChanged="selectedItem_TextChanged" AutoPostBack="true"></asp:TextBox>
However a PostBack will not be triggered by changing the text from txtName in selectedItem also. the textbox needs to lose focus/blur itself to trigger the PostBack. So either just put txtName in the UpdatePanel and place the TextChanged event on that, or remove the TextChanged from selectedItem, place a Button in the UpdatePanel and click that with jQuery.
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="selectedItem" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="showResults" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
$(document).ready(function () {
$('#txtName').on('change', function () {
$('#selectedItem').val(this.value);
$('#Button1').click();
});
});
</script>
And then in code behind
protected void Button1_Click(object sender, EventArgs e)
{
showResults.Text = selectedItem.Text;
}

Dropdown not Updating lbl in Updatepanel

Situation:
Checkbox inside a updatepanel
multiline textbox inside a different updatepanel.
if the user checks the checkbox, the multiline text box gets a name... this works fine.
HTML:
<asp:UpdatePanel ID="upTraveling" runat="server"
UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<asp:CheckBox ID="cbRUTraveler" runat="server" Text="I am a Traveler" AutoPostBack="True"
oncheckedchanged="cbRUTraveler_CheckedChanged1" />
</ContentTemplate>
</asp:UpdatePanel>
<td>
<asp:UpdatePanel ID="upTravelers" runat="server" ondatabinding="cbRUTraveler_CheckedChanged1"
UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="tbTravelers"
Class="textwidth" runat="server" TextMode="MultiLine"
placeholder="FName LName, FName LName" required="required">
</asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="cbRUTraveler" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
C#:
protected void cbRUTraveler_CheckedChanged1(object sender, EventArgs e)
{
tbTravelers.Text =
RequesterBPL.RequesterTraveling(cbRUTraveler.Checked, tbTravelers.Text);
going = cbRUTraveler.Checked;
}
I also have 2 other updatepanels on the same page... a dropdown list in one updatepanel and a label in another updatepanel. When a user selects a value in the dropdown list... it's suppose to trigger a name placement in the label.
HTML:
<td>
<asp:UpdatePanel ID="upManager" runat="server"
ondatabinding="ddlTeam_SelectedIndexChanged"
UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlTeam"
EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblManager" runat="server" > </asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
C#:
protected void ddlTeam_SelectedIndexChanged(object sender, EventArgs e)
{
//upManager.Update();
lblManager.Text =
ManagerBPL.ReturnManagerName(ddlTeam.SelectedIndex);
}
However, when a user makes a selection in the dropdown, nothing happens.
until the user checks the checkbox which has nothing to do with the label and the dropdown. Once the user checks (or unchecks) the checkbox... the label gets populated with the selection from the dropdown.
All controls are in a table for structure. I have the scriptmanager in place.
From what I've been reading on the net this maybe a bug... If not a bug does anyone see where I may be going wrong...?
Thanks

Honestly you could do this all Client-Side. A simple example:
$(function () {
$('#<%= drpContent.ClientID %>').blur(function () {
var content = $('#<%= drpContent.ClientID %> option:selected').val();
$('#lblContent').text(content);
}
});
I've provided the initial example with the value declared. The second example is with a text representation.
$(function () {
$('#<%= drpContent.ClientID %>').blur(function () {
var content = $('#<%= drpContent.ClientID %> option:selected').text();
$('#lblContent').text(content);
}
});
An example with a Fiddle. The example though is simple, is far easier then dealing with an Update Panel. That particular control can be a nightmare to deal with, it can be quite painful. Though you asked about the server issue, this option is more viable and more common.
Update Panel (Drawback):
Creates pandomonium between Client / Server Side Events.
Stores your entire page in memory, then recreates (Performance Heavy)
Often breaks Page-State quickly in the Asp.Net Page Life Cycle.
Hopefully this helps.

button not triggering as required

My button is not automatically triggering, it works when I click it manually,
<script type="text/javascript">
$(document).ready(function() {
$('#yes').click(function() {
$.unblockUI();
$('<%= HiddenButton.ClientID %>').trigger('click'); // NOT Working
__doPostBack('<%=HiddenButton.ClientID %>', ''); // THIS not working too
Button code is as given below. Both trigger and doPostBack didn't worked at all
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:TextBox ID="HiddenField1" runat="server" />
<asp:Button ID="HiddenButton" Text="Click Me" runat="server" OnClick="Deleting_Click" />
and also added trigger as,
<triggers>
<asp:asyncpostbacktrigger controlid="HiddenButton" eventname="Click" />
</triggers>
I know I can check a value in page load method and then call method there but I want to do it using java script. Can somone direct me in right direction please

try this :
$('#<%= HiddenButton.ClientID %>').trigger('click');
You forgot the hashtag indicating you're targetting an id...

$(document).ready(function() {
$('#yes').click(function() {
$.unblockUI();
clickTheButton();
});
});
function clickTheButton() {
document.getElementById('<%= HiddenButton.ClientID %>').click();
}

You can trigger a button click like this:
$('#yes').click();
assuming "yes" is the id of the button. Is this what you mean??

Javascript After AJAX Request

When the page is loaded, the function commentsShowHideEffect in javascript runs. When ajax request is made all instructions in the method commentsShowHideEffect() are gone. How to recover these isntructions or call commentsShowHideEffect() method again after ajax request ?
<script>
$(function () {
commentsShowHideEffect();
});
</script}
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="MessageButton" />
</Triggers>
<ContentTemplate>
<asp:Timer ID="RefreshTimer" runat="server" Interval="500" />
<asp:DataList ID="ChatDataList" runat="server" >
<ItemTemplate>
<td><asp:Label ID="lblRaterName" runat="server" Text='<%# Eval("Text")%>'></asp:Label></td>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>

You can bind Sys.WebForms.PageRequestManager endRequest event which will fire after the ajax request is completed by the update panel.
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args)
{
alert("After ajax call ended");
}

Define the commentsShowHideEffect out of the jQuery scope:
<script>
function commentsShowHideEffect() {
//do something
}
$(document).ready(function (){
commentsShowHideEffect();
});
</script>
Further I prefer to use the document.ready syntax, because it is more clear for the programmer to understand what it is.

You did not mention jQuery in you question and not in the tags either.
But you code sees to suggest that you are using it, so here is a link to a relevant doc page :
http://api.jquery.com/ajaxComplete/
In your situation, this should work :
$(document).ajaxComplete(function(event,request, settings) {
commentsShowHideEffect();
});
Note that the above will trigger for each and every ajax request. If you want more control, you should use the complete or success callback on the individual requests.

UpdatePanel, Placeholder, User Control loaded by Ajax post

I can successfully add a user control dynamically using the following code.
ASPX:
<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
Code Behind:
UserControl uc = (UserControl)Page.LoadControl
("~/App_Controls/Site/Player/PlayerProfile2.ascx");
PlaceHolder1.Controls.Add(uc);
Now I want to load the user in response to a button click. I have code that submits a form by doing an ajax post.
$(document).ready(function () {
var options =
{
success: showResponse,
url: "/Default.aspx",
type: "post"
};
$('#btnClick').click(function () {
$("form").ajaxSubmit(options);
return false;
});
});
function showResponse(responseText, statusText, xhr, $form)
{
alert(responseText);
}
<asp:Button ID="btnClick" ClientIDMode="Static" runat="server" Text="Click" />
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
<asp:Literal ID="litText" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
I am a newbie to C#. When the placeholder or the literal are changed I w

Instead of using jQuery AJAX, I would use the built in ASP.NET AJAX; it will provide a simpler experience for you. http://weblogs.asp.net/sanjeevagarwal/archive/2008/07/22/Dynamically-create-ASP.NET-user-control-using-ASP.NET-Ajax-and-Web-Service.aspx. By moving the button inside the UpdatePanel, any PostBack that the button generates will be intercepted by the .NET framework and submitted as a partial postback (using AJAX). This should give you a solid starting point for how to achieve what you're after using the .NET AJAX style.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnClick" ClientIDMode="Static" runat="server" Text="Click" />
<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
<asp:Literal ID="litText" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
In the CodeBehind file, you can use IsPostBack to conditionally show or hide your user control.
However, if you'd prefer to stick with your current approach, this blog has a good example that's more complete than what I could type here: http://www.aspsnippets.com/Articles/Dynamically-load-and-display-ASPNet-UserControl-using-jQuery-AJAX-and-WebMethod.aspx

UserControls (ASCX) get attached to the page during server-side rendering and cannot be created with Javascript the way standard HTML elements can. I would suggest using a div containing standard HTML elements as opposed to a user control and using a Javascript library such as Jquery to create copies of this div when applicable.