Monday, 3 December 2012

Getting records using jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
    <script src="Script/jquery-1.6.2.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {

             LoadData();
         });

         var filldata=null;
         function LoadData() {
             $.ajax(
            {
                type: "POST",
                async: true,
                url: "ListDisplay.aspx/Result",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (list) {
                    $("#list").append("<ul id='bullets'></ul>");
                    alert(list.d.length);
//                    for (i = 0; i < list.d.length; i++) {
//                        $("#bullets").append("<li>" + list.d[i].Topping
//                                             + " : " + list.d[i].Slices + "</li>");
//                    }
                    //                    $("#Something").closest("tr").remove();
                    document.getElementById("Something").deleteTHead();
                    for (var i = document.getElementById("Something").rows.length; i > 0; i--) {
                        document.getElementById("Something").deleteRow(i - 1);
                    }

                    var resultAsJson = list.d
                    $("#Something").append("<thead style='background-color:Red;'><td>Food</td><td>No.</td></thead>");
                    for (var i in resultAsJson) {
                        var Food = resultAsJson[i]
                        var user_name = Food.Topping
                        $("#Something").append("<tr style='background-color:Silver;'><td>" + Food.Topping
                            + "</td>  <td>" + Food.Slices + "</td> <td><button name='button1' value='clicked' onclick='Click()'><img src='Image/LoginWhite1.jpg' width='32' height='32' alt='submit' border='0' /></button></td></tr>");
                        // Here you append that value to your label
                    }
                    //                        $("#row").css('background-color', 'silver');    -->reflact only one row.
                },
                error: function (e) {
                    $("#Something").html("There was an error retrieving records");
                }
            });

        }


        function Click() {
            $.ajax({
                type: "Post",
                async: true,
                url: "ListDisplay.aspx/Test",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                success: function (json) {
                    alert(json.d);
                    alert(json.d.length);
                    filldata = "data";
                    //Fill the data
                    document.getElementById("Something").deleteTHead();
                    for (var i = document.getElementById("Something").rows.length; i > 0; i--) {
                        document.getElementById("Something").deleteRow(i - 1);
                    }
                    var resultAsJson = json.d
                    $("#Something").append("<thead style='background-color:Red;'><td>Food</td><td>No.</td></thead>");
                    for (var i in resultAsJson) {
                        var Food = resultAsJson[i]
                        var user_name = Food.Topping
                        $("#Something").append("<tr style='background-color:Silver;'><td>" + Food.Topping
                            + "</td>  <td>" + Food.Slices + "</td> <td><button name='button1' value='clicked' onclick='Click()'><img src='Image/LoginWhite1.jpg' width='32' height='32' alt='submit' border='0' /></button></td></tr>");
                        // Here you append that value to your label
                    }

                    //                    LoadData();
                },
                error: function (e) {
                    $("#Something").html("There was an error retrieving records");
                }
            });

          
         
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <div id="list"></div>
       
        <table id="Something" cellpadding="2" cellspacing="2" style="background-color:Orange;border-color:White; border-width:1px; border-style:dashed;"><thead style="background-color:Red;"><td>Food</td><td>No.</td></thead></table>
        <%--<thead style="background-color:Red;"><td>Food</td><td>No.</td></thead><tbody ></tbody>--%>
    </div>
    </form>
</body>

</html>




Code Behind:-

 [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<Food> Result()
        {
            List<Food> res = new Food().Get();
            return res;
        }


        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static object Test()
        {
            try
            {
                List<Food> res = new Food().Get();
                return res;
            }
            catch (Exception)
            {
                return "Record deleted succesfully";
            }
           
        }

posted by Asif Sayyad @ December 03, 2012   0 Comments

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home