Geek Answers Handbook

How to populate DropDown with jQuery Ajax Call?

I have a WebMethod that receives the data that I want to populate DropDown in a DataSet. I am currently populating a drop down menu using a hard-coded object. But I want to replace this hard coded object with the data returned by webmethod.

[System.Web.Services.WebMethod] public static string GetDropDownDataWM(string name) { //return "Hello " + name + Environment.NewLine + "The Current Time is: " // + DateTime.Now.ToString(); var msg = "arbaaz"; string[] name1 = new string[1]; string[] Value = new string[1]; name1[0] = "@Empcode"; Value[0] = HttpContext.Current.Session["LoginUser"].ToString().Trim(); DataSet ds = new DataSet(); dboperation dbo = new dboperation(); ds = dbo.executeProcedure("GetDropDownsForVendor", name1, Value, 1); return ds.GetXml(); }

CLIENT PARTY (UPDATE 1):

  <script type = "text/javascript"> function GetDropDownData() { var myDropDownList = $('.myDropDownLisTId'); $.ajax({ type: "POST", url: "test.aspx/GetDropDownDataWM", data: '{name: "abc" }', contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { $.each(jQuery.parseJSON(data.d), function () { myDropDownList.append($("<option></option>").val(this['FieldDescription']).html(this['FieldCode'])); }); }, failure: function (response) { alert(response.d); } }); } function OnSuccess(response) { console.log(response.d); alert(response.d); } </script>
+7
source share
4 answers
 function GetDropDownData() { $.ajax({ type: "POST", url: "test.aspx/GetDropDownDataWM", data: '{name: "abc" }', contentType: "application/json; charset=utf-8", dataType: "json", success: function(data.d) { $.each(data.d, function (){ $(".myDropDownLisTId").append($("<option />").val(this.KeyName).text(this.ValueName)); }); }, failure: function () { alert("Failed!"); } }); }
+13
source

From WebMethod , do not send the DataSet directly, send the XML ...

 [System.Web.Services.WebMethod] public static string GetDropDownDataWM(string name) { DataSet ds = new DataSet(); ds.Tables.Add("Table0"); ds.Tables[0].Columns.Add("OptionValue"); ds.Tables[0].Columns.Add("OptionText"); ds.Tables[0].Rows.Add("0", "test 0"); ds.Tables[0].Rows.Add("1", "test 1"); ds.Tables[0].Rows.Add("2", "test 2"); ds.Tables[0].Rows.Add("3", "test 3"); ds.Tables[0].Rows.Add("4", "test 4"); return ds.GetXml(); }

Before calling Ajax ...

 var myDropDownList = $('.myDropDownLisTId');

Try as shown below ... (inside an Ajax call)

 success: function (response) { debugger; $(response.d).find('Table0').each(function () { var OptionValue = $(this).find('OptionValue').text(); var OptionText = $(this).find('OptionText').text(); var option = $("<option>" + OptionText + "</option>"); option.attr("value", OptionValue); myDropDownList.append(option); }); },

Note:

  • OptionValue and OptionText are columns of the DataSet table.

  • $(response.d).find('Table0').each(function (){}) - Here Table0 is the name of the table inside the DataSet .

+1
source 
  var theDropDown = document.getElementById("myDropDownLisTId"); theDropDown.length = 0; $.each(items, function (key, value) { $("#myDropDownLisTId").append($("<option></option>").val(value.PKId).html(value.SubDesc));

here "SubDesc", PKId describes the value coming out of the database. You need to separate your value from the data set.

0
source 
 [System.Web.Services.WebMethod] public static string GetDropDownDataWM(string name) { //return "Hello " + name + Environment.NewLine + "The Current Time is: " // + DateTime.Now.ToString(); var msg = "arbaaz"; string[] name1 = new string[1]; string[] Value = new string[1]; name1[0] = "@Empcode"; Value[0] = HttpContext.Current.Session["LoginUser"].ToString().Trim(); DataSet ds = new DataSet(); dboperation dbo = new dboperation(); ds = dbo.executeProcedure("GetDropDownsForVendor", name1, Value, 1); return DataSetToJSON(ds); } public static string DataSetToJSON(DataSet ds) { Dictionary<string, object> dict = new Dictionary<string, object>(); foreach (DataTable dt in ds.Tables) { object[] arr = new object[dt.Rows.Count + 1]; for (int i = 0; i <= dt.Rows.Count - 1; i++) { arr[i] = dt.Rows[i].ItemArray; } dict.Add(dt.TableName, arr); } var lstJson = Newtonsoft.Json.JsonConvert.SerializeObject(dict); return lstJson; }

Ajax call

 function GetAssociation() { var myDropDownList = $("#myDropDownLisTId"); var post_data = JSON.stringify({ "name": "xyz"}); $.ajax({ type: "POST", url: "test.aspx/GetDropDownDataWM", data: post_data, contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { json_data = JSON.parse(response.d); myDropDownList.empty(); for(i=0; i<json_data.Table.length; i++) { myDropDownList.append($("<option></option>").val(json_data.Table[i][0]).html(json_data.Table[i][1])); } }, failure: function (response) { alert(response.d); } }); }
0
source

More articles:


All Articles