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.

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.

How to get current time of an html video in c# codebehind?

I have added video control in ASP.NET page.
<video controls id="movie" width="610" height="344" runat="server" preload="">
</video>
Javascript version is below:
var v = $("#<%=movie.ClientID%>");
var video = v.get()[0];
I can get current time with below line in Javascript.
video.currentTime
How can I get it from code behind?

You need to get it using Javascript and submit it to the codebehind:
$.get("passVideoTime.aspx?time=" + video.currentTime);
Or using a postback:
<asp:UpdatePanel runat="server" ID="UpdatePanel">
<ContentTemplate>
<asp:HiddenField Id="VideoTime" runat="server"/>
<asp:Timer runat="server" Enabled="true" Interval="1000" ID="Timer" />
</ContentTemplate>
</asp:UpdatePanel>
<script>
$('form').submit(function () {
$('#<%= VideoTime.ClientId %>').val(video.currentTime);
return true;
});
</script>
Edit: the postback example does not really work, because a postback does not cause a form.submit. It is not so easy to update something just before the updatepanel is updated.

Calling C# Method Using Javascript

I am trying to access a method in my code behind called "Button1_Click" using Javascript, I think there is something wrong in my code below because currently I have to click twice in order for the method to trigger, one click doesn't trigger the method.
My Test Code:
// Javascript
<script type="text/javascript">
function CallMe() { document.getElementById('<%= ButtonHidden.ClientID %>').click(); }
</script>
// Markup
<asp:Button ID="ButtonVisible" runat="server" Text="Test Button"
OnClientClick="CallMe();"/>
<asp:Button ID="Button1" runat="server" style="display:none;" Text="Click"
OnClick="Button1_Click"/>
// Code Behind Method
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("http://google.com");
}
Am I missing something?

You could use the OnClientClick property of the Button:
<asp:button id="Button1"
text="Test Button"
onclientclick="CallMe()"
runat="server" onclick="Button1_Click" />
Then you don't need another (hidden) button.
Your CallMe() method should then return either true (if everything is OK) or false (to cancel the postback).

Instead of using javascript why not simply assign the same server click handler for both buttons:
<asp:Button
ID="ButtonVisible"
runat="server"
Text="Test Button"
OnClick="Button1_Click" />
<asp:Button
ID="Button1"
runat="server"
style="display:none;"
Text="Click"
OnClick="Button1_Click" />
UPDATE:
A better solution would be to have your javascript function return a boolean value depending on whether some conditions are met which will execute the server handler:
<script type="text/javascript">
function CallMe() {
if (some condition) {
return true; // allow the server to be called
}
return false;
}
</script>
and then use both OnClick and OnClientClick on the button:
<asp:Button
ID="ButtonVisible"
runat="server"
Text="Test Button"
OnClientClick="return CallMe();"
OnClick="Button1_Click" />