Reusable jquery ajax requests - asp.net-mvc

Question

I am developing a web application using asp.net mvc... I am listing out the details of Clients,Staff,Reports via ajax requests using jquery... What i am doing is writing seperate functions(jquery ajax requests) for each actions (ie) view,add,edit,Delete ...
//Clients
function getClients(currentPage) {
$.ajax({
url: "Clients/GetClients",
data: { 'currentPage': (currentPage + 1), 'pageSize': 5 },
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
success: function(data) {
if (data.isRedirect && data.isRedirect === true) {
alert('must redirect to ' + data.redirectUrl);
location = 'http://www.google.com';
}
else {
var divs = '';
$("#hfId").val('');
$("#ResultsDiv").empty();
$.each(data.Results, function() {
divs += '<div class="resultsdiv"><br /><span style="display: inline-block;width:220px;" class="resultName">' + this.ClientName + '</span><span class="resultfields" style="padding-left:10px;">Mobile No :</span> <span class="resultfieldvalues">' + this.ClientMobNo + '</span><span style="float:right; padding-right:2px;"><input type="checkbox" value=' + this.ClientId + ' onclick="storeIds();"/></span><br/><br/><span class="resultfields">Address :</span> <span class="resultfieldvalues">' + this.ClientAddress + '</span></div>';
});
$("#ResultsDiv").append(divs);
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
$(this).addClass("resultshover");
}, function() {
$(this).removeClass("resultshover");
});
$("#HfId").val("");
$("#HfId").val(data.Count);
}
}
});
return false;
}
//Drivers
function getDrivers(currentPage) {
$.ajax({
url: "Staff/GetDrivers",
data: { 'currentPage': (currentPage + 1), 'pageSize': 5 },
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
success: function(data) {
if (data.isRedirect && data.isRedirect === true) {
alert('must redirect to ' + data.redirectUrl);
location = 'http://www.google.com';
}
else {
var divs = '';
$("#hfId").val('');
$("#ResultsDiv").empty();
$.each(data.Results, function() {
divs += '<div class="resultsdiv"><br /><span style="display: inline-block;width:220px;" class="resultName">' + this.DriverName + '</span><span class="resultfields" style="padding-left:10px;">Mobile No :</span> <span class="resultfieldvalues">' + this.DriverMobileNo + '</span><span style="float:right; padding-right:2px;"><input type="checkbox" value=' + this.DriverId + ' onclick="storeIds();"/></span></div>';
});
$("#ResultsDiv").append(divs);
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
$(this).addClass("resultshover");
}, function() {
$(this).removeClass("resultshover");
});
$("#HfId").val("");
$("#HfId").val(data.Count);
}
}
});
return false;
}
//get client by id
function getClientbyId(clientId) {
$.ajax({
url: "Clients/getClientById",
data: { 'clientId': clientId },
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
success: function(data) {
$("#Name").val(data.ClientName);
$("#MobileNo").val(data.ClientMobNo);
$("#Address").val(data.ClientAddress);
$("#hfEditId").val(data.ClientId);
$("#adddiv").show();
$("#ResultsDiv").hide();
$("#PagerDown").hide();
$("#ImageButtonDiv").hide();
}
});
return false;
}
//get driver by id
function getDriverById(driverId) {
$.ajax({
url: "Staff/getDriverById",
data: { 'driverId': driverId },
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
success: function(data) {
$("#Name").val(data.DriverName);
$("#MobileNo").val(data.DriverMobileNo);
$("#hfEditId").val(data.DriverId);
$("#adddiv").show();
$("#ResultsDiv").hide();
$("#PagerDown").hide();
$("#ImageButtonDiv").hide();
}
});
return false;
}
//clients delete
function deleteClients(clientIds) {
$.ajax({
url: "Clients/deleteClients",
data: { 'ids': clientIds },
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
success: function(data) {
if (data.Result == "Success") {
getClients(0);
var maxvalues = $("#HfId").val();
$(".pager").pagination(maxvalues, {
callback: getClients,
current_page: 0,
items_per_page: 5,
num_display_entries: 5,
next_text: 'Next',
prev_text: 'Prev',
num_edge_entries: 1
});
return false;
}
}
});
$("#alert").remove();
topBar('successfully deleted');
return false;
}
//delete drivers
function deleteDrivers(driverIds) {
$.ajax({
url: "Staff/deleteDrivers",
data: { 'ids': driverIds },
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
success: function(data) {
if (data.Result == "Success") {
getDrivers(0);
var maxvalues = $("#HfId").val();
$(".pager").pagination(maxvalues, {
callback: getDrivers,
current_page: 0,
items_per_page: 5,
num_display_entries: 5,
next_text: 'Next',
prev_text: 'Prev',
num_edge_entries: 1
});
return false;
}
}
});
$("#alert").remove();
topBar('successfully deleted');
return false;
}
How to make these functions into a single function and just pass the values to the function... Is there way to do this...

Answer 1

As all your functions have similar AJAX setup options I would recommend you to setup common options globally using the $.ajaxSetup function:
$(function() {
$.ajaxSetup({
contentType: 'application/json; charset=utf-8',
global: false,
async: false,
dataType: 'json',
beforeSend: function() { $('.loading').show(); },
complete: function() { $('.loading').hide(); },
});
});
Next let's first consider the getClients and getDrivers functions. Those look pretty much the same. The only difference I can see between them is the url you are sending the AJAX request and the html that's being appended to the #ResultsDiv. So you could have two separate functions that handle the result:
function formatDriversResult(result) {
return '<div class="resultsdiv"><br /><span style="display: inline-block;width:220px;" class="resultName">' + result.DriverName + '</span><span class="resultfields" style="padding-left:10px;">Mobile No :</span> <span class="resultfieldvalues">' + result.DriverMobileNo + '</span><span style="float:right; padding-right:2px;"><input type="checkbox" value=' + result.DriverId + ' onclick="storeIds();"/></span></div>';
}
and
function formatClientsResult(result) {
return '<div class="resultsdiv"><br /><span style="display: inline-block;width:220px;" class="resultName">' + result.ClientName + '</span><span class="resultfields" style="padding-left:10px;">Mobile No :</span> <span class="resultfieldvalues">' + result.ClientMobNo + '</span><span style="float:right; padding-right:2px;"><input type="checkbox" value=' + result.ClientId + ' onclick="storeIds();"/></span><br/><br/><span class="resultfields">Address :</span> <span class="resultfieldvalues">' + result.ClientAddress + '</span></div>';
}
And finally the two functions could be merged into a single one:
function getEntities(url, currentPage, formatResultFunction) {
$.ajax({
url: url,
data: { 'currentPage': (currentPage + 1), 'pageSize': 5 },
success: function(data) {
if (data.isRedirect && data.isRedirect === true) {
alert('must redirect to ' + data.redirectUrl);
location = 'http://www.google.com';
}
else {
var divs = '';
$("#hfId").val('');
$("#ResultsDiv").empty();
$.each(data.Results, function() {
divs += formatResultFunction(this);
});
$("#ResultsDiv").append(divs);
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
$(this).addClass("resultshover");
}, function() {
$(this).removeClass("resultshover");
});
$("#HfId").val("");
$("#HfId").val(data.Count);
}
}
});
return false;
}
Now when you want to get the current clients:
var clients = getEntities("Clients/GetClients", currentPage, formatClientsResult);
and when you want to get the current drivers:
var drivers = getEntities("Staff/GetDrivers", currentPage, formatDriversResult);
Next let's consider the getClientbyId and getDriverById functions. They could be simplified to:
function getEntityById(data, url, formatResultFunction) {
$.ajax({
url: url,
data: data,
success: function(data) {
formatResultFunction(data);
$("#adddiv").show();
$("#ResultsDiv").hide();
$("#PagerDown").hide();
$("#ImageButtonDiv").hide();
}
});
return false;
}
The same pattern could be used for the rest.