How to use Update Panel for ASP.Net and Javascript?

I have a textbox with onkeyup event that call JavaScript function GetEmployee() this function gets items from database where full name contains value typed on textbox.

Everything is working, but I want to add a button save with server-side functionality which is doing an error on post back .

I want to use asp:updatepanel as solution for the error but don't know how to do it .

Here is my code

   <asp:TextBox ID="txtSelectUser" AutoPostBack="true" runat="server" class="InputFormStyle form-control" OnKeyUp="GetEmployee();"></asp:TextBox>
    <asp:ListBox ID="lstEmployee" runat="server" onchange="SelectUser();"></asp:ListBox>
       <asp:Button Text="Save" runat="server" OnClick="btnadd_Click" ID="btnadd"/>
<script type="text/javascript">
    var selectedUserId = 0;
    $(document).ready(function () {
        $("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].style.display = "none";

        $("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].onchange()
        {
            SelectUser();
        }
    });
    function SelectUser() {
        for (var i = 0; i < $("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].options.length; i++) {
            if ($("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].options[i].selected) {
               
                $("#ContentPlaceHolder1_EmployeeControl_txtSelectUser")[0].value = $("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].options[i].text;
                selectedUserId = $("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].options[i].value;
                $("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].style.display = "none";
                return;
            }
        }
    }
    function GetEmployee() {
        selectedUserId = 0;
        var FN = $("#ContentPlaceHolder1_EmployeeControl_txtSelectUser")[0].value;
        if (FN == "") {
            $("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].style.display = "none";
        }
        else {
            $.ajax({
                url: '..../GetDataByFn',
                data: JSON.stringify({
                    fullname: $("#ContentPlaceHolder1_EmployeeControl_txtSelectUser")[0].value
                }),

                type: 'post',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].options.length = 0;
                    if (data.d.length != 0) {
                        for (var i = 0; i < data.d.length; i++) {
                            var opt = document.createElement("option");
                            $("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].options.add(opt);
                            opt.text = data.d[i].FullNameEN;
                            opt.value = data.d[i].Id;
                            $("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].options.add(opt);
                        }
                        $("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].style.display = "inline-block";
                    }
                    else {
                        $("#ContentPlaceHolder1_EmployeeControl_lstEmployee")[0].style.display = "none";
                    }
                },
                error: function (error) {
                    console.log(JSON.stringify(error));
                }

            });
        }
    }
</script>


Comments

Popular posts from this blog

Today Walkin 14th-Sept

Spring Elasticsearch Operations

Hibernate Search - Elasticsearch with JSON manipulation