Manoj Maharana Manoj Maharana - 4 months ago 9
Javascript Question

How to Fetch Id of html dropdown in jQuery and Filter

I want to show the table rows according to DropdownList id selected event.
This is my html table:

$(function () {
debugger
$.ajax({

type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebForm7.aspx/BindProjectsDatatable",
//data: "{}",
// data: { catid: 1 },
data: JSON.stringify({ catid: 0 }),
dataType: "json",
success: function (dt) {
debugger;

for (var i = 0; i < dt.d.length; i++) {

$("#tblid > tbody").append("<tr><td> <input type='checkbox' class='chk' id=" + dt.d[i].projectid + " /></td><td>" + dt.d[i].projectname + "</td><td>" + dt.d[i].Name + "</td><td>" + dt.d[i].technology + "</td><td>" + dt.d[i].projectliveurl + "</td><td><input type='image' src=" + dt.d[i].StatusImage + " onclick='actvstatus(" + dt.d[i].projectid + ", " + dt.d[i].status + ")' alt='Submit' width='18' height='18'> </td><td>" + dt.d[i].DisplayOrder + "</td><td> <i class='ui-tooltip fa fa-pencil' onclick='btnQueryString_Click(" + dt.d[i].projectid + ")' style='font-size:22px;margin-left: 32px;'></i><i class='ui-tooltip fa fa-trash-o' onclick='deleteRecord(" + dt.d[i].projectid + ")' style='font-size: 22px;margin-left: 32px;color:red'></i> </tr>");

}
$("#tblid").DataTable();

},
error: function (result) {
alert("Error");
}
});



});


Codebehind c# code:

[WebMethod]
public static List<mProjects> BindProjectsDatatable(int catid)
{
clsProjectBL objcategory = new clsProjectBL();

List<mProjects> modelCategory = new List<mProjects>();
DataTable dtCategory = new DataTable();

//dtCategory = objcategory.GetAllCategoryDetails("admin");
dtCategory = objcategory.GetAllProjectDetails("admin", Convert.ToInt32(catid));
if (dtCategory.Rows.Count > 0)
{
modelCategory = (from DataRow dr in dtCategory.Rows
select new mProjects()
{


projectid = Convert.ToInt32(dr["projectid"]),
CategoryID = Convert.ToInt32(dr["CategoryID"]),
projectname = dr["projectname"].ToString(),
Name = dr["Name"].ToString(),
technology = dr["technology"].ToString(),
projectliveurl = dr["projectliveurl"].ToString(),
DisplayOrder = Convert.ToInt32(dr["DisplayOrder"]),
status = Convert.ToBoolean(dr["status"]),
StatusImage = dr["StatusImage"].ToString(),
//Deleted = Convert.ToBoolean(dr["Deleted"])
}).ToList();


}
return modelCategory;

}


This is my dropdown binding jquery code:

$(document).ready(function () {
debugger;
$.ajax({
type: "POST",
url: "WebForm7.aspx/BindCategoryDatatable",
//data: { },
data: JSON.stringify({ catid: 0 }),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (r) {
debugger;
var ddlCustomers = $("[id=ddlCustomers]");
ddlCustomers.empty().append('<option selected="selected" value="0">Please select</option>');
$.each(r.d, function () {
ddlCustomers.append($("<option></option>").val(this['CategoryID']).html(this['Name']));
debugger;
});
},
error: function (data) {
alert("error found");
}
});
});


This is my c# code for binding dropdown:

[WebMethod]
public static List<mCategory> BindCategoryDatatable()
{
clsCategoryBL objcategory = new clsCategoryBL();
List<mCategory> modelCategory = new List<mCategory>();
DataTable dtCategory = new DataTable();

dtCategory = objcategory.GetAllCategoryDetails("admin");
if (dtCategory.Rows.Count > 0)
{
modelCategory = (from DataRow dr in dtCategory.Rows
select new mCategory()
{
CategoryID = Convert.ToInt32(dr["CategoryID"]),
Name = dr["Name"].ToString(),

}).ToList();


}
return modelCategory;

}


I want to show the table according to the dropdownlist id.I am binding dropdown dynamically.

Answer

The wording is not 100% clear but I think you are you saying you want to run the ajax which creates the table whenever an item in the dropdown list is selected. Correct me if I've misunderstood.

If that's the case then you need to handle the dropdownlist's change event:

$("#ddlCustomers").change(function(event) {
  //put your ajax call to populate the table in here
});

Alternatively, if the dropdownlist itself is created dynamically as well as the options (this is also not entirely clear from the wording) then you can't bind to it the normal way. Instead you need to use delegated events, which jQuery makes easy with the ".on" function.

$(document).on("change", "#ddlCustomers", function(event) {
  //put your ajax call to populate the table in here
});

Lastly, if you want to use the selected value of the dropdown list to pass to the server, you can change the "data" property in the ajax options to this:

 data: JSON.stringify({ catid: $("#ddlCustomers").val() }),
Comments