ASP.NET jQuery AutoComplete - textbox not responding after first search

Question

So far I'm not finding the same problem in other questions on this site. Here's what I'm experiencing:

I have an ASP.NET WebForms app with an UpdatePanel containing a search area where I have a ASP:TextBox that I use for a jQuery autocomplete.

$(document).ready(function() {
    $("#tabContainer_tabSearchBreaks_txtSearchName").autocomplete("AutoCompleteEmployee.ashx", { minChars: 3, maxItemsToShow: 10 });
});

This whole thing works fine, but if I click on a ASP:Button and process some code for the search area, the autocomplete javascript no longer works.

Any ideas???

There's got to be a solution to reset the textbox to call the js code.

[Update - More Code] Here's what the update button does for the search area that is separate from the autocomplete code:

 try {
     int employeeID;
     string[] namelst = txtSearchName.Text.Split(new string[] {
         " "
     }, StringSplitOptions.None);
     employeeID = int.Parse(namelst[2].Substring(1, namelst[2].Length - 2));
     string name = namelst[0] + " " + namelst[1];
     var breaks = bh.ListBreaksForEmployeeByDate(employeeID, DateTime.Parse(txtFromDate.Text), txtToDate.Text.Length > 0 ? DateTime.Parse(txtToDate.Text).AddDays(1).AddSeconds(-1) : DateTime.Today.AddDays(1).AddSeconds(-1));

     if (breaks.Count() > 0) {
         lblEmployeeTitle.Text = "Breaks for " + name;
         gridSearchBreaks.DataSource = breaks;
         gridSearchBreaks.DataBind();
     }
 } catch {}

Hope this helps. For the time being I've hidden the tab that contains this problem from the users.

Answer 1

I think you're experiencing a classic problem with ASP.NET UpdatePanel controls and jQuery. The problem is the following: jQuery code (in your case it's auto-complete, but it can be anything) works fine on the page load, but it stops working after a partial postback. If this is the case, there is a couple of things you need to understand about using jQuery with UpdatePanel controls.

First, all event bindings defined in $(document).ready stop working after the first partial postback (and I assume that your button click causes a partial postback). This is just the way ASP.NET works. So how do you fix it? Well, there are several ways to address this problem. A typical recommendation is to substitute $(document).ready with the ASP.NET AJAX's own pageLoad event. This may solve one problem, but it will most likely cause more issues because now you will be binding events on every partial postback causing repeated execution of event handlers on a single event. You can address some issues by calling unbind for your selector before performing any bindings. For simple event bindings, you can keep using $(document).ready with the live function (instead of click, hover, etc).

I haven't used jQuery plugins with UpdatePanel, so I can't say for sure what you need to do, but once you understand what is happening, it should not be hard to find the right approach. To learn more about this problem and possible solutions, please read Dave Ward's article $(document).ready() and pageLoad() are not the same! (the article includes several examples).

Answer 2

I suggest you use a tool like Firebug, using which you can pinpoint where the error occurs. You can monitor ajax requests, to see if it has actually stopped making requests, if they make it all the way through, and what response you get. You can also use it to debug javascript at runtime, and it often gives you error messages that you might not have noticed otherwise. Sounds like just the tool you need at the moment.