How to load asp gridview control from client side?

Question

I have a method in a web service which is like this :

[WebMethod(EnableSession = true)]
 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
 public location[] getLocation()
 {
     string companyCode = Convert.ToString(Session["companyCode"]);
     //string userID = Convert.ToString(Session["userID"]);
     DataTable dt = new DataTable();
     //DataSet ds = new DataSet();
     List<location> list = new List<location>();

     try
     {
         conn.Open();

         SqlCommand cmd = new SqlCommand();
         cmd.Connection = conn;
         cmd.CommandText = "getLocation";
         cmd.Parameters.Clear();
         cmd.CommandType = CommandType.StoredProcedure;
         cmd.Parameters.AddWithValue("@companyCode", companyCode);
         cmd.Parameters.AddWithValue("@status", DBClass.cns_Active);
         SqlDataAdapter da = new SqlDataAdapter(cmd);
         da.Fill(dt);
         conn.Close();
         foreach (DataRow dr in dt.Rows)
         {
             var loc = new location();
             loc.ID=Convert.ToInt32(dr["ID"]);
             loc.APIAddress = Convert.ToString(dr["APIAddress"]);
             loc.PostCode = Convert.ToString(dr["postCode"]);
             loc.ShostCode = Convert.ToString(dr["shortCode"]);
             loc.latLong=Convert.ToString(dr["latLong"]);
             list.Add(loc);
         }
     }
     catch
     {
         conn.Close();
     }
     return list.ToArray();
 }   

where location is a class

and i am trying to load a grid using this method from client side, and here is the the code:

function getItems() {
$.ajax({
    type: "POST",
    url: "../WebService.asmx/getLocation",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",

    success: function (data) {
        for (var i = 0; i < data.d.length; i++) {
            $('#gvTrip').append("<tr class='gradeX'><td>" + data.d[i].ID + "</td><td>" + data.d[i].APIAddress + "</td><td>" + data.d[i].PostCode + "</td><td>" + data.d[i].ShostCode + "</td><td>" + data.d[i].latLong + "</td></tr>");
        }
    },
    error: function () {
        alert("Error in fetching record");
    }


});
}

here gvTrip is a asp gridview control

so the problem that i am facing is that the grid is not loading with data but data is coming from that method , i have checked using alert Please help

Answer 1

The gvTrip inside ajax is a server side control. so try using:

$('<%=gvTrip.ClientID %>').append("Your string");