Invoke ASP.NET TextChanged event from JavaScript using __doPostBack

Question

Like many others, I'm trying to invoke a .NET control's server-side event from JavaScript.

Specifically, I want to fire the TextChanged event on a TextBox named txtSearch. Therefore, I'm looking to reach the following event from client-side:

protected void txtSearch_TextChanged(object sender, EventArgs e)

Having read many answers on SO (for example here and here) I have the following JavaScript:

__doPostBack('ctl00$ctl00$Container$Main$txtSearch', 'TextChanged');

But the server-side event never fires.

I've tried numerous permutations: with the AutoPostBack true and false, with and without the event declared in the server-side instructions on the ASPX (i.e. OnTextChanged=""), with the EventValidation turned off in the page declaration, using the ClientID rather than the UniqueID in the EVENTTARGET parameter... but the event is still never fired.

A couple of other points

the txtSearch button control is also the trigger for an UpdatePanel, in case that matters.
I'm converting existing code, of which there's quite a lot, and am looking for something I can drop onto each page rather than converting the code-behind events to PageMethods.

Can anyone tell me what more I need to do?

To help narrow down the problem - Does the Page_Load event get fired? — Blachshma
– Blachshma, Commented Dec 4, 2012 at 16:15

Oleks · Accepted Answer · 2012-12-05 08:16:14Z

1

I've tried this, and it works for me:

<asp:TextBox runat="server" ID="txtSearch" OnTextChanged="txtSearch_TextChanged"></asp:TextBox>
<input type="button" value="submit" onclick="<%= GetOnChangedScript() %>" />

The server side asp:TextBox, and the client side input which fires __doPostBack on click. The __doPostBack script is generated through PostBackOptions:

protected string GetOnChangedScript()
{
    var options = new PostBackOptions(txtSearch, string.Empty);
    options.AutoPostBack = true;
    options.RequiresJavaScriptProtocol = true;
    var script = Page.ClientScript.GetPostBackEventReference(options);
    return script;
}

The txtSearch_TextChanged event handler fires when the value of text box is changed, and the submit button is clicked.

But note, for controls like TextBox the text is stored in the viewstate; the new text entered by the user stores in the form data. When the TextBox load the viewstate data, it gets the old value. This is compared with the new value that comes in the form. If the values are different, the TextChanged event is fired. If no, the event handler won't be fired. This is the reason for the Page_Load event get fired (postback occured), but txtSearch_TextChanged didn't fire due to the value of the TextBox didn't change.

answered Dec 5, 2012 at 8:16

Oleks

32.4k11 gold badges80 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

awj Over a year ago

I've implemented your suggestion exactly as it appears, and it doesn't hit the TextChanged event, only the Page_Load. There are two other problems with this suggestion: (1) I'm looking to be able to do this entirely in JavaScript rather than adding an extra function to each code-behind where I have to implement this change; (2) I have some custom JavaScript that I want to run before the value of txtSearch is posted back, but having set AutoPostBack="True" I don't get the chance to do this.

Oleks Over a year ago

@awj: (1) this is the correct way of adding __doPostBack-like references. The name of the server-side control can be changed, and then all your snippets won't work. But it's up to you how to paste these blocks. (2) in my example AutoPostBack property is not set. The default value for it is false, so this feature is off by default. And finally, the value of your text box has to be changed since the last postback for server-side events to fire. This is how the server-side events work.

awj Over a year ago

Please don't get me wrong, @Alex, at this stage I'd be willing to implement anything that worked. I have now got your code working (I think I ommitted the OnTextChanged attribute previously) and am investigating how I can wire it up with my custom event in order to trigger the postback in specific circumstances.

Oleks Over a year ago

@awj, do you mean to trigger the postback for the textbox even if text value doesn't change? If yes, you'll have to analyze post data manually (e.g. in Page_Load), and then call txtSearch_TextChanged manually too.

awj Over a year ago

No, I have a custom function whereby a threshold number of characters has to be entered, and then a timeout happens to see whether the user is going to enter any more characters (each key-press resets the timer). Only after this does a postback take place. We did have an Ajax Control Toolkit Extender which did this, and this is what I'm now replacing.

|

Boriss Pavlovs · Accepted Answer · 2012-12-05 09:57:16Z

1

function initTxtBox(){  $('#<%=txtBox.ClientID%>').on('keyup change', function() {setTimeout('txtpostback()', 0); return false;});}
function txtpostback(){__doPostBack('" + txtCadastreNumber.UniqueID + @"','');
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(initTxtBox);

Set auotpostback property to false for your txtbox and AutoEventWireup="true" for your control or page declaration. OnTextChanged event server-side will work too. if you don't use jquery in your project, let me know and I give you some javascript example without jquery using.

edited Dec 5, 2012 at 9:57

answered Dec 5, 2012 at 7:13

Boriss Pavlovs

1,44112 silver badges8 bronze badges

9 Comments

awj Over a year ago

Thanks Boriss, but that doesn't work for me. I now have <asp:TextBox ID="txtSearch" AutoPostBack="False" runat="server" Value="hello world" /> with <script type="text/javascript"> function initTxtBox(){ $('#<%=txtSearch.ClientID%>').on('keyup change', function() {setTimeout("__doPostBack(this.id,'')", 0); return false;});} Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(initTxtBox); </script> at the bottom of the page. I tried your script exactly as is but Firefox gave me a "Useless setTimeout call", so I wrapped __doPostBack in quotes. Pressing a key now causes a refresh.

Boriss Pavlovs Over a year ago

Ok. Now I check it in my project

Boriss Pavlovs Over a year ago

yes you are right error is present :) now I fix it in my project too. But postback event have been occurred.

awj Over a year ago

I noticed the edit you had made to the ID parameter in the __doPostBack call. I had used your updated suggestion before I wrote my previous comment, and it was this that causes the page to refresh/reload; it still doesn't trigger the TextChanged event.

Boriss Pavlovs Over a year ago

I modified script. Now it works without error in FF. You can use it without seTimeout() ( I need it in my project). I have to do some actions before postback too. And OnTextChanged event on server-side fires in my case.

|

Collectives™ on Stack Overflow

Invoke ASP.NET TextChanged event from JavaScript using __doPostBack

2 Answers 2

6 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related