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
Post a Comment