Fares Ayyad Fares Ayyad - 3 months ago 14
Ajax Question

Change data based on selection using Ajax

I have the following ajax call:

.ajax({
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) {
$('#loader').html('');
//To delete the whole tr except the first one.
$("#tblUsers").find("tr:gt(0)").remove();
$('#tblUsers').append(JSON.stringify(result));

},
error: function () {
alert('error');
}


});


That will call the following Web method

[WebMethod]
public string showResult(DateTime dateFrom, DateTime dateTo,string ddlFilter)


{
System.Threading.Thread.Sleep(500);
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
"ddlFilter"
, so the result will be changed.

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

Answer

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

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

$('#ddlFilter').change(myAjaxCall);