ASP.NET jQueryオートコンプリート - 最初の検索後にテキストボックスが応答しない

Question

これまでのところ、このサイトの他の質問で同じ問題が見つかりません。

私は、jQueryオートコンプリートに使用するASP：TextBoxを持つ検索エリアを含むUpdatePanelを持つASP.NET WebFormsアプリケーションを使用しています。

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

これ全部が正常に動作しますが、私はASPをクリックした場合：ボタンと検索領域のためのいくつかのコードは、Javascriptもはや作品オートコンプリートを処理します。

jsコードを呼び出すようにテキストボックスをリセットする解決策が必要です。

[更新 - より多くのコード] は、ここで更新ボタンは、オートコンプリートのコードから分離された検索領域のために何をするかです：

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

この情報がお役に立てば幸いです。当分の間、私はこの問題を含んでいるタブをユーザーから隠しました。

Answer 1

ASP.NET UpdatePanelコントロールとjQueryの古典的な問題が発生していると思います。問題は次のとおりです：jQueryコード（あなたのケースでは自動完成ですが、何でも構いません）はページの読み込みでうまく動作しますが、部分的なポストバックの後は動作しなくなります。このような場合は、UpdatePanelコントロールでjQueryを使用することについて理解する必要があります。

最初に、$（document）.readyで定義されたすべてのイベントバインディングは、最初の部分的なポストバックの後で機能しなくなります（ボタンをクリックすると部分的なポストバックが発生すると仮定します）。これはASP.NETが動作する単なる方法です。あなたはどうやってそれを修正するのですか？さて、この問題に対処するにはいくつかの方法があります。一般的な推奨事項は、ASP.NET AJAXの独自のページロードイベントで$（document）.readyを置き換えることです。これは1つの問題を解決する可能性がありますが、単一のイベントでイベントハンドラの繰り返し実行を引き起こすすべての部分的なポストバックでイベントをバインドするようになるため、多くの問題が発生する可能性が高くなります。バインディングを実行する前に、セレクタにのバインドを解除してを呼び出すことで、いくつかの問題に対処することができます。単純なイベントバインディングの場合は、live機能（クリック、ホバーなどの代わりに）を使用して$（document）.readyを使用し続けることができます。

私はUpdatePanelでjQueryプラグインを使用していないので、何をする必要があるのか​​はっきりとは言えませんが、何が起こっているのかを理解すれば正しいアプローチを見つけるのは難しくありません。この問題と解決策の詳細については、Dave Wardの記事$(document).ready() and pageLoad() are not the same!（いくつかの例があります）をご覧ください。

Answer 2

Firebugのようなツールを使用して、エラーの発生箇所を特定することをお勧めします。あなたはajaxリクエストを監視し、リクエストを実際に停止したかどうか、完了までに至ったかどうか、そしてレスポンスを得ることができます。また、実行時にjavascriptをデバッグするために使用することもできます。また、それ以外の点で気づいていなかったエラーメッセージが表示されることがあります。あなたが今必要とするツールのように聞こえます。