I am new to this ajax calls using jquery. I am trying to bind the values from the Database. I have a Data Access Layer from where the data is returned in a dataset. I am trying to bind this dataset to the gridview in my .aspx page. I have written ajax jquery calls in my .aspx page but I am getting an "undefined" error.
Please guide me where am going wrong.
My code is
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script>
$(function () {
$("#form1").validate({
rules: {
txtName: "required",
txtCity: "required",
ddlDepName: "required",
txtSalary: {
required: true,
number: true
},
},
messages: {
txtName: "Please enter your Name",
txtCity: "Please enter your City",
ddlDepName: "Please select a department Name from the dropdown list",
txtSalary: {
required: "Please enter the Salary",
number: "Only Numbers are allowed"
}
},
submitHandler: function (form) {
form.submit();
}
});
$('#btnInsertEmployee').click(function () {
if ($("#form1").valid()) {
}
});
});
$(function () {
GetEmployees();
});
function GetEmployees() {
debugger;
$.ajax({
type: "POST",
url: "DataAccessLayer.cs/GetEmployees",
//data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("EmployeesList");
var row = $("[id*=GridView1] tr:last-child").clone(true);
$("[id*=GridView1] tr").not($("[id*=GridView1] tr:first-child")).remove();
$.each(EmployeesList, function () {
var customer = $(this);
$("td", row).eq(0).html($(this).find("EmployeeId").text());
$("td", row).eq(1).html($(this).find("Name").text());
$("td", row).eq(2).html($(this).find("City").text());
$("td", row).eq(2).html($(this).find("DepartmentId").text());
$("td", row).eq(2).html($(this).find("Salary").text());
$("[id*=GridView1]").append(row);
row = $("[id*=GridView1] tr:last-child").clone(true);
});
var pager = xml.find("Pager");
$(".Pager").ASPSnippets_Pager({
ActiveCssClass: "current",
PagerCssClass: "pager",
PageIndex: parseInt(pager.find("PageIndex").text()),
PageSize: parseInt(pager.find("PageSize").text()),
RecordCount: parseInt(pager.find("RecordCount").text())
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal" >
<AlternatingRowStyle BackColor="#F7F7F7" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<SortedAscendingCellStyle BackColor="#F4F4FD" />
<SortedAscendingHeaderStyle BackColor="#5A4C9D" />
<SortedDescendingCellStyle BackColor="#D8D8F0" />
<SortedDescendingHeaderStyle BackColor="#3E3277" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<table class="auto-style1">
<tr>
<td class="auto-style3">
<asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
</td>
<td class="auto-style4">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblCity" runat="server" Text="City"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblDepName" runat="server" Text="Department Name"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlDepName" runat="server" AutoPostBack="True" Height="16px" Width="122px">
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblSalary" runat="server" Text="Salary"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:Button ID="btnInsertEmployee" runat="server" OnClick="btnInsertEmployee_Click" Text="Insert Employee" OnClientClick="return validate()" />
</td>
</tr>
<tr>
<td class="auto-style2" colspan="2">
<asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
