uable to bind grid with jsons data

I am unable to bind gridview with json data ..although data is returning from json webservice


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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>

---

any one not need to check whole code just consider following information in pasted code :

Gridname : gdRows

javascript method call : getUsers

Hi,

Here's a sample on databinding asp.net gridview using jQuery. I used webmethod approach as oppose to asmx. Databinding-ASP-NET-GridView-with-jQuery

KGC