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;
}

How do I execute javascript from code behind where the button inside an updatepanel

How do I execute javascript from code behind where the button inside an updatepanel
I want to open a div inside a fancybox and I am opening it from code behind
and It is working
but I want to put the button inside an updatepanel
but after that the javascript is not triggering
maybe because I am putting it inside document.ready
what else we can put the trigger in to work
html
<a id="various" runat="server" href="#inline" style="visibility: hidden"></a>
<asp:Literal ID="fancyLtr" runat="server"></asp:Literal>
<asp:UpdatePanel ID="UpdatePanel6" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
javascript
$(document).ready(function () {
$("#ContentPlaceHolder1_various").fancybox();
});
code behind
protected void Button1_Click(object sender, EventArgs e)
{
various.Attributes["href"] = "#inline";
fancyLtr.Text = "<script>jQuery(document).ready(function() {$(\"#ContentPlaceHolder1_various\").trigger('click');});</script>";
}
Thanks in advanced

My button opens my modal popup window, but the c# codebehind connected to the button does not fire

I have a button that opens a modal popup, but before I open the modal popup, I want my "OnClick" event for the "btnSaveAndScheduleTask" button to fire. I am using ASP.NET 4.5 / Visual Studio 2012 / HTML5 / CSS3
My aspx (snipet):
How do I get the codebehind OnClick event for my "btnSaveAndScheduleTask" button to fire? If the entire code would help figure it out, let me know, but I'm probably missing something simple (bear in mind that I want to be able to view all my asp controls from the C# codebehind):
<asp:Button ID="btnSaveAndScheduleTask" runat="server" CausesValidation="true"
OnClientClick="javascript:return validatePage();" OnClick="btnSaveAndScheduleTask_Click"
Font-Bold="true" Text="Schedule Task" />
<ajaxToolkit:ModalPopupExtender ID="mpeScheduleTask" runat="server" ValidateRequestMode="Enabled"
BackgroundCssClass="modalBackground" CancelControlID="btnCancSchedule"
PopupControlID="pnlScheduleTask" TargetControlID="btnSaveAndScheduleTask" DropShadow="true" >
</ajaxToolkit:ModalPopupExtender>
<div id="divScheduleTask" runat="server">
<asp:Panel ID="pnlScheduleTask" Height="310" Width="690" BackColor="#ece4e1" ForeColor="Black" runat="server" >
<asp:UpdatePanel runat="server" ID="udpScheduleTask" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblTaskSch" Visible="false" Font-Bold="true" Text="Task Scheduling: " runat="server" />
<asp:Button ID="btnSaveSchedule" runat="server" OnClick="btnSaveSchedule_Click" Text="Save Schedule" />
</div><asp:Button ID="btnCancSchedule" runat="server" Text="Canc" />
</ContentTemplate></asp:UpdatePanel></asp:Panel></div>
I've left out most of the panel as it's huge... here is my validatePage() Javascript:
<script type="text/javascript">
function validatePage() {
//Executes all the validation controls associated with group1 validaiton Group1.
var flag = window.Page_ClientValidate('vTask');
if (flag)
//Executes all the validation controls which are not associated with any validation group.
flag = window.Page_ClientValidate();
if (!Page_IsValid) {
$find('mpeScheduleTask').hide();
}
return flag;
}
</script>
My aspx.cs code behind:
protected void btnSaveAndScheduleTask_Click(object sender, EventArgs e)
{
//do stuff
}

Remove TargetControlID="btnSaveAndScheduleTask" , give other dummy control's ID
So when button clicks, click will take user to server , in code behind you need to manually open popup.
This is given here...!!!!
http://www.codeproject.com/Tips/215040/ModalPopupExtender-from-Server-Side-Code

I would put the javascript to be called in the behind code in your button click..
protected void btnSaveAndScheduleTask_Click(object sender, EventArgs e)
{
// do stuff.
Page.ClientScript.RegisterStartupScript(this.GetType(), "Call my function", "validatePage();", true);
}
this is how I do most of mine. Hope this helps.
And your ASP should look like..
<asp:Button ID="btnSaveAndScheduleTask" runat="server" CausesValidation="true" OnClick="btnSaveAndScheduleTask_Click" Font-Bold="true" Text="Schedule Task" />

UpdatePanel not firing inside Wizard

I have an Update panel within a wizard:
<asp:WizardStep ID="WizardStep2" runat="server" StepType="Auto"
Title="Set the number of users required.">
...
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Always" runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="ProgressInd" Text="Progress..." />
<asp:Button runat="server" OnClick="GoButton_Click" ID="ProgressBtn" Text="Go" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:WizardStep>
...
protected void GoButton_Click(object sender, EventArgs e)
{
ProgressInd.Text = "Progress... Moving";
}
When I take the update panel out of the wizard it works nicely but inside the wizard the click event just won't fire. I'm using Firefox to test, but IE doesn't work either. Any ideas or help appreciated.

For the record. Paolo spotted my problem. There were page validators that were preventing the event from firing.

Execute ClientSide before ServerSide in ASP.NET

I am using ASP.NET 3.5.
When the user click on say btnSubmit I want to first execute some JavaScript code and then execute some C#/VB.NET code.
Is this possible? If so how would one do it?
Thanks in advance!

This is very simple:
http://msdn.microsoft.com/en-us/library/7ytf5t7k.aspx
<%# Page Language="C#" %>
<script runat="server">
protected void Button1_Click(Object sender, EventArgs e)
{
Label1.Text = "Server click handler called.";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" Runat="server"
OnClick="Button1_Click"
OnClientClick="return confirm('Ready to submit.');"
Text="Test Client Click" />
<br />
<asp:Label ID="Label1" Runat="server" text="" />
</form>
</body>
</html>

Have the JavaScript execute and then call a web service with xmlhttprequest from the javascript

There is onClientClick property - check this out http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.onclientclick.aspx

Of course, you simply add an onClick event all JS code is executed before the postback.
If the code is for validation and you decide you don't want to submit you can return false and it won't post.
<asp:Button OnClientClick="" />

Thanks for the answer guys!
To execute a function from code behind one would do this in VB.NET
Protected Sub btnSubmit_Click(blah blah) Handles btnSubmit.Click
ClientScript.RegisterStartupScript(Me.GetType(), "hiya", "Message()", True)
lblLabel.Text = "Hello my name is Etienne!"
End Sub