I have added a Jquery loader to my function that is triggered on button click.
Here is an example of the code:
function fnLoadVendorData() {
var vendorSel = $("#ddlVendorName option:selected").text();
var strCircle = $("#lblRole").text();
// $('#imgLoader').show();
if (vendorSel != "--Select Vendor--" && typeof (vendorSel) != 'undefined') {
$.ajax({
type: "POST",
url: "Ipfee.aspx/GetVendorData",
data: JSON.stringify({ "vendorName": vendorSel, "strCircle": strCircle }),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response) {
if (response.d != "NoDataFound") {
$('#imgLoader').show();
var getDatalist = JSON.parse(response.d);
Create_vendorDataTable(getDatalist);
$('#imgLoader').hide();
} else {
// $('#imgLoader').hide();
jAlert("Data not available !!", "Information");
return false;
}
$('#imgLoader').hide();
},
error: function (response, textStatus, errorThrown) {
// $('#imgLoader').hide();
jAlert(textStatus, "Information");
}
});
}
}<img src="Images/ipload.gif" id="imgLoader" style="display: none; width: 100%; height: 100%; z-index: 9999;" />
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select name="ddlVendorName" id="ddlVendorName" class="form-control">
<option value="--Select Vendor--">--Select Vendor--</option>
<option value="1032">IPFEE_INDUS</option>
<option value="1028">IPFEE_TVIPL</option>
<option value="1033">IPFEE_ASCEND</option>
<option value="1029">IPFEE_BIL</option>
<option value="1031">IPFEE_GTL</option>
</select>
<label>Vendor Name</label>
</div>
</div>
<div class="col-md-3 filterButton">
<div class="form-group">
<button type="button" class="btn btn-danger button" id="btnFilterClick"><i class="fa fa-filter" aria-hidden="true"></i>Filter</button>
</div>
</div>
</div>Please advise on any corrections I should make.