ansaurus

Question

Answer 1

+3 A:

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&nbsp;:</span>&nbsp;<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&nbsp;:</span>&nbsp;<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&nbsp;:</span>&nbsp;<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.

Darin Dimitrov 2010-07-04 06:39:44

@Darin for add,edit and delete? Should i use the same format?

Pandiya Chendur 2010-07-04 06:41:50

@Pandiya, yes the same pattern could be used.

Darin Dimitrov 2010-07-04 06:54:59

@Darin i am learning quite lot of stuff from you... Thanks man... You really rock..

Pandiya Chendur 2010-07-04 06:56:53

@Pandiya, always glad to help.

Darin Dimitrov 2010-07-04 07:00:59

@darin i tried yours but the callback function doesn't seem to work http://stackoverflow.com/questions/3174249/is-this-a-valid-jquery-callback-function-call

Pandiya Chendur 2010-07-04 09:41:27

ansaurus

tags:

views:

answers:

Reusable jquery ajax requests...

related questions