I am unable to bind gridview with json data ..although data is returning from json webservice
here is the code
any one not need to check whole code just consider following information in pasted code :
Gridname : gdRows
javascript method call : getUsers
here is the code
Code:
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site1.Master" CodeBehind="AdminMainPage1.aspx.cs" Inherits="SIM.AdminMainPage" %>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainContent">
<title>jQuery UI Tabs - Vertical Tabs functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script type="text/javascript">
// $(document).ready(function ()
// {
function getUsers() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService1.asmx/getUsers",
data: "{}",
dataType: "json",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
$("#gdRows").append("<tr><td>" + data.d[i].UserName + "</td><td>" + data.d[i].password + "</td><td>" + data.d[i].Name + "</td></tr>");
}
},
error: function (result) {
alert("Error");
}
});
}
// });
</script>
<script type="text/javascript">
function ChangePassword() {
var username = 'erum'
$.ajax({
type: "POST",
url: "WebService1.asmx/ChangePassword",
//data: "{ 'value1': " + "'" + $("#TextBox5").val() + "'" + ", 'value2': " + "'" + username + "'" + "}",
data: "{ 'value2': " + "'" + $("#TextBox5").val() + "'" + ", 'value1': " + "'" + username + "'" + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
// success: OnSuccess,
// error: OnError
});
}
</script>
<script>
$(document).ready(function () {
$("#flip-DeleteUpdateuser").click(function () {
$("#panel-DeleteUpdateuser").slideDown("slow");
getUsers();
});
});
</script>
<script>
$(document).ready(function () {
$("#flip-RemoveCategory").click(function () {
$("#panel-RemoveCategory").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip-RemoveItem").click(function () {
$("#panel-RemoveItem").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip").click(function () {
$("#panel").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip-updatePrice").click(function () {
$("#panel-updatePrice").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip-user").click(function () {
$("#panel-user").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip-category").click(function () {
$("#panel-category").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip1").click(function () {
$("#panel1").slideDown("slow");
});
});
</script>
<script>
$(document).ready(function () {
$("#flip2").click(function () {
$("#panel2").slideDown("slow");
});
});
$(document).ready(function () {
$("#<%=gdRows.ClientID%> tr").
filter(":odd").css("background-color", "grey");
});
</script>
<script>
$(function () {
$("#tabs").tabs();
});
</script>
<style>
#panel,#flip,#panel1,#flip1,#panel2,#flip2,#panel-user,#flip-user,#flip-category,#panel-category,#flip-updatePrice,#panel-updatePrice,#flip-RemoveItem,#panel-RemoveItem,#panel-RemoveCategory,#flip-RemoveCategory,#flip-DeleteUpdateuser,#panel-DeleteUpdateuser
{
padding:5px;
text-align:center;
/*background-color:black;*/
width:400px;
color:white;
border:solid 1px #c3c3c3;
font:smaller;
font-family:Trebuchet MS;
font-size:small;
}
#flip,#flip1,#flip2,#flip-user,#flip-category,#flip-updatePrice,#flip-RemoveItem,#flip-RemoveCategory,#flip-DeleteUpdateuser
{
background-color:black;
}
#panel,#panel1,#panel2,#panel-user,#panel-category,#panel-updatePrice,#panel-RemoveItem,#panel-RemoveCategory,#panel-DeleteUpdateuser
{
/*//padding:50px;*/
display:none;
height:auto;
background-color:#99004c;
}
#table
{
}
.ul {
font-size:7px;
}
</style>
<script>
$(function () {
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
</script>
<style>
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
<div id="tabs">
<ul>
<li><a href="#tabs-4">Password Change</a></li>
<li><a href="#tabs-5">Create new user</a></li>
<li><a href="#tabs-6">Add Category</a></li>
<li><a href="#tabs-1">Update Product Price</a></li>
<li><a href="#tabs-2">Remove Item</a></li>
<li><a href="#tabs-3">Remove Category</a></li>
<li><a href="#tabs-7">Delete and update Users</a></li>
</ul>
<div id="tabs-4">
<div id="flip2">
Click here to change Password
</div>
<div id="panel2"><table border="0">
<tr>
<td>Change Password</td>
<td> <input type="text" id="TextBox5" />
<%-- <asp:TextBox ID="TextBox54" runat="server"></asp:TextBox>--%>
</td>
</tr>
<tr>
<td>Verify Password</td>
<td><asp:TextBox ID="TextBox6" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Button ID="Button2" OnClientClick="ChangePassword(); return false;" runat="server" Text="Change" /></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="tabs-5">
<div id="flip-user">
Click here to Add New User
</div>
<div id="panel-user"><table border="0">
<tr>
<td>Add Users</td>
<td> <input type="text" id="txt_user" /></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Button ID="btn1" runat="server" Text="Add" /></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="tabs-6">
<div id="flip-category">
Click here to Add Category
</div>
<div id="panel-category">
<table border="0">
<tr>
<td>Add Categories</td>
<td><asp:TextBox ID="txt_category" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Button ID="btn3" runat="server" Text="Add" /></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="tabs-1">
<div id="flip-updatePrice">
Click here to update product Price
</div>
<div id="panel-updatePrice"><table border="0">
<tr>
<td>selct category</td>
<td><asp:TextBox ID="txt_category2" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>select item</td>
<td><asp:TextBox ID="txt_item" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Button ID="btn_priceupdate" runat="server" Text="Update" /></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="tabs-2">
<div id="flip-RemoveItem">
Click here to Remove Item
</div>
<div id="panel-RemoveItem">
<table border="0">
<tr>
<td>selct category</td>
<td><asp:TextBox ID="cat" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>select item</td>
<td><asp:TextBox ID="it" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Button ID="btn_Remove_Item" runat="server" Text="Remove" /></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="tabs-3">
<div id="flip-RemoveCategory">
Click here to Remove Category
</div>
<div id="panel-RemoveCategory"><table border="0">
<tr>
<td>select category</td>
<td><asp:TextBox ID="txt_cat2" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>select item</td>
<td><asp:TextBox ID="txt_item2" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><asp:Button ID="btn_category3" runat="server" Text="Remove" /></td>
<td> </td>
</tr>
</table></div>
</div>
<div id="tabs-7">
<div id="flip-DeleteUpdateuser">
Click here to Update/Delete Users
</div>
<div id="panel-DeleteUpdateuser">
<asp:GridView ID="gdRows" runat="server">
</asp:GridView>
</div>
</div>
</div>
</asp:Content>Gridname : gdRows
javascript method call : getUsers