Fares Ayyad Fares Ayyad - 4 months ago 19
Ajax Question

Change data based on selection using Ajax

I have the following ajax call:

url: "WebService.asmx/showResult",
type: "post",
data: JSON.stringify({
"dateFrom": $('#txtDateFrom').val(),
"dateTo": $('#txtDateTo').val(),
"ddlType": $("#ddlType").children("option").filter(":selected").val(),
"ddlTer": $("#ddlTer").children("option").filter(":selected").val(),
"ddlFilter": $("#filter").children("option").filter(":selected").val()
}), // parameters
beforeSend: function () {
$('#loader').html('<img src="Images/loading.gif" />');
contentType: "application/json; charset=utf-8",
success: function (result) {
//To delete the whole tr except the first one.

error: function () {


That will call the following Web method

public string showResult(DateTime dateFrom, DateTime dateTo,string ddlFilter)

string result = "";
// return dateFrom.ToString();
string filter=ddlFilter.ToString();
var sp = db.divideTypes(dateFrom, dateTo,ddlFilter).ToList();
foreach (var u in sp)
result += "<tr>";
result += "<td>"+u.depno+"</td>";
result += "</tr>";
return result;

this will append the returned result to table.
i want to add drop down list that will change the data of parameter
, so the result will be changed.

i notice that there's .change() call but where to place it?


Let's say your ajax call lives in a function called myAjaxCall

Then you can trigger the function on change of #ddlFilter like so: