JQuery AutoComplete does not work after Ajax Partial Postback

jQuery AutoComplete does not work after Ajax Partial Postback. when we use asp.net ajax with jquery autocomplete, after partial postback jquery autocomplete does not work. In this article i am going to explain about the solution of postback problem of jquery autocomplete textbox.

How this happens?

Let's check :
1. First create one website in visual studio 2008 and add one page into that site.
2. Now place one ScriptManager control into the page.
Code :


<asp:ScriptManager ID="ScriptManager1" runat="server">

3. Now add one UpdatePanel into the page and one textbox inside that UpdatePanel to make it AutoComplete TextBox.
Code :


<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
	<ContentTemplate>
		Enter Name :
        <asp:TextBox ID="txtName" runat="server" width="200px"></asp:TextBox>
		<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click"></asp:Button>
 	</ContentTemplate>
</asp:UpdatePanel>

4. Now add the javascript inside the head tag to make it autocomplete textbox.


<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" />	
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function() {
		$("#txtName").autocomplete({
            source: function(request, response) {
				$.ajax({
                    url: "Default.aspx/GetNames",
                    data: "{ 'sname': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
						response($.map(data.d, function(item) {
                            return {
                                value: item,
                                result:item
                            }
                        }))
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 1,
			delay:10
               
        });
    });
</script>

5. Now we need to create one webmethod with name GetNames in Default.aspx.cs file. So that we can call in jQuery AutoComplete. You can see the above code how we call webmethod using jquery.
Code :


using System.Xml.Linq;
using System.Web.Services;
using System.Collections.Generic;
[WebMethod]
public static List<string> GetNames(string sname)
{
    List<string> strNamesData=new List<string>();
    strNamesData.Add("Jitendra");
    strNamesData.Add("Manoranjan");
    strNamesData.Add("Santosh");
    strNamesData.Add("Minal");
    strNamesData.Add("Lovely");
    strNamesData.Add("Vinit");
    strNamesData.Add("Nimesh");
    strNamesData.Add("Sonal");
    strNamesData.Add("Sachin");
    strNamesData.Add("Manish");
    var namelist = strNamesData.Where(n => n.ToLower().StartsWith(sname.ToLower ()));
    return namelist.ToList();
}

6. Now just run the code and type some name from the above list. And see the effect of auto complete.
7. Now the time to test how the problem happens after ajax partial postback. To check this click on Submit button.
8. After postback type some name in that textbox. It will not show any suggestion. So what do we do now to make it working within ajax postback. We just put the AutoComplete code inside PageLoad event of page in javascript. See below code :
Code :


<script type="text/javascript">
function pageLoad(sender, args) {
    $(function() {
		$("#txtName").autocomplete({
            source: function(request, response) {
				$.ajax({
                    url: "Default.aspx/GetNames",
                    data: "{ 'sname': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
						response($.map(data.d, function(item) {
                            return {
                                value: item,
                                result:item
                            }
                        }))
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 1,
			delay:10
               
        });
    });
}
</script>

pageLoad() function is available in JavaScript if we are using ASP.NET ajax. AJAX framework automatically wires up any client-side function named pageLoad() as an Application.Load handler.

Reference: http://dotnetsquare.com/resources/58-jquery-autocomplete-does-not-work-after-ajax-partial-postback

JQuery AutoComplete does not work after Ajax Partial Postback

How this happens?

Comments

About dotnetspider.com

Quick Links

General

Services