Is this a valid jquery callback function call?

Question

I executing a function like this,

<script type="text/javascript">
        $(document).ready(function() {

        getEntities("Clients/GetClients", 0, formatClientsResult);

        var maxvalues = $("#HfId").val();
        $(".pager").pagination(maxvalues, {
            callback: getEntities("Clients/GetClients", formatClientsResult),
            current_page: 0,
            items_per_page: 5,
            num_display_entries: 5,
            next_text: 'Next',
            prev_text: 'Prev',
            num_edge_entries: 1
        });
     });
  </script>

$(function() {
    $.ajaxSetup({
        contentType: 'application/json; charset=utf-8',
        global: false,
        async: false,
        dataType: 'json',
        beforeSend: function() { $('.loading').show(); },
        complete: function() { $('.loading').hide(); }
    });
});

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;
}


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 i inspected through firebug i found my request was,

http://localhost:1115/0?currentPage=[object+HTMLDivElement]1&pageSize=5... Am i missing something...

When executing on initial load the request is,

http://localhost:1115/Clients/GetClients?currentPage=1&pageSize=5

This seems to work but Only the callback function fails...

I am using this jquery pagination plugin

As suggested by darin,

$(document).ready(function() {

            getEntities("Clients/GetClients", 0, formatClientsResult);
            var maxvalues = $("#HfId").val();
            $(".pager").pagination(maxvalues, {
                callback: function() {
                    getEntities("Clients/GetClients", 0, formatClientsResult);
                },
                current_page: 0,
                items_per_page: 5,
                num_display_entries: 5,
                next_text: 'Next',
                prev_text: 'Prev',
                num_edge_entries: 1
            });

My controller action,

 public JsonResult GetClients(int currentPage, int pageSize)
        {
            if (Session["userId"]!=null)
            {
                var clients = clirep.FindAllClients(Convert.ToInt32(Session["userId"])).AsQueryable();
                var count = clients.Count();
                var results = new PagedList<ClientBO>(clients, currentPage - 1, pageSize);
                var genericResult = new { Count = count, Results = results ,isRedirect=false};
                return Json(genericResult);
            }
            else
            {
                var genericResult = new {redirectUrl = Url.Action("Create", "Registration"), isRedirect = true };
                return Json(genericResult);
            }

        }

And my model,

public IQueryable<ClientBO> FindAllClients(int userId)
        {
            var client = from c in taxidb.Clients
                         where c.CreatedBy == userId && c.IsDeleted == 0 
                         select new ClientBO()
                         {
                             ClientId = c.ClientId,
                             ClientName= c.ClientName,
                             ClientMobNo= Convert.ToString(c.ClientMobNo),
                             ClientAddress= c.ClientAddress
                         };
            return client;
        }

and my view,

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<TaxiMVC.Models.Client>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Clients</h2>
    <input type="hidden" id="hfId" />
    <input type="hidden" id="hfEditId" />
    <div id="ErrorDiv">
    </div>
    <div id="ImageButtonDiv">
        <input type="button" class="addbuttons" onclick="return showadd();" />
        <input type="button" class="editbuttons" onclick="if(editdetails()){return getClientbyId($('#hfId').val());}" />
        <input type="button" class="deletebuttons" onclick="if(deletedetails()){return deleteClients($('#hfId').val());}" />
    </div>
    <div id="ResultsDiv">
    </div>
    <div id="PagerDown" class="pager">
    </div>
    <div id="adddiv" style="display: none;">
        <form id="addform" autocomplete="off" action="">
        <fieldset>
            <legend>Client Details</legend>
            <table cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td class="tdfields" style="width: 25%; padding-right: 20px;" align="right">
                        Client Name&nbsp;:
                    </td>
                    <td style="width: 20%;">
                        <%= Html.TextBox("Name", null, new { @class = "text_box_height_14_width_150" })%>
                        &nbsp;
                    </td>
                    <td style="width: 55%;" class="status">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td class="tdfields" style="width: 25%; padding-right: 20px;" align="right">
                        Mobile No&nbsp;:
                    </td>
                    <td style="width: 20%;">
                        <%= Html.TextBox("MobileNo", null, new { @class = "text_box_height_14_width_150" })%>
                        &nbsp;
                    </td>
                    <td style="width: 55%;" class="status">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td class="tdfields" style="width: 25%; padding-right: 20px;" align="right">
                        Address&nbsp;:
                    </td>
                    <td style="width: 20%;">
                        <%= Html.TextArea("Address", null, 6, 42, new { @class = "multiline_text_box_height_14_width_200" })%>
                        &nbsp;
                    </td>
                    <td style="width: 55%;" class="status">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <div class="form-submit">
                            <input type="submit" value="Submit" id="submit" />
                            &nbsp;&nbsp;<input type="button" value="Cancel" id="cancel" onclick="return showResultsdiv();" />
                        </div>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </fieldset>
        </form>
    </div>
    <input id="HfId" type="hidden" />

    <script type="text/javascript">
        $(document).ready(function() {
            //        getClients(0);
            getEntities("Clients/GetClients", 0, formatClientsResult);
            var maxvalues = $("#HfId").val();
            $(".pager").pagination(maxvalues, {
                callback: function() {
                    getEntities("Clients/GetClients", 0, formatClientsResult);
                },
                current_page: 0,
                items_per_page: 5,
                num_display_entries: 5,
                next_text: 'Next',
                prev_text: 'Prev',
                num_edge_entries: 1
            });

            var validator = $("#addform").validate({
                rules: {
                    Name: "required",
                    MobileNo: {
                        required: true,
                        number: true,
                        minlength: 10
                    },
                    Address: "required"
                },

                messages: {
                    Name: "please provide a client name",
                    MobileNo: {
                        required: "Please provide a mobile phone no",
                        number: "Please provide a mobile phone no",
                        rangelength: jQuery.format("Enter at least {0} characters")
                    },
                    Address: "please provide client address"
                },
                // the errorPlacement has to take the table layout into account
                errorPlacement: function(error, element) {
                    error.appendTo(element.parent().next());
                },
                // set this class to error-labels to indicate valid fields
                success: function(label) {
                    // set &nbsp; as text for IE
                    label.html("&nbsp;").addClass("checked");
                },

                submitHandler: function(form) {
                    if ($("#hfEditId").val() == "") {
                        $.ajax({
                            url: "Clients/ClientCreate",
                            data: { 'clientName': $("#Name").val(), 'clientMobNo': $("#MobileNo").val(), 'clientAddress': $("#Address").val() },
                            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") {
                                    $("#hfEditId").val('');
                                    $("#addform").clearForm();
                                    getEntities("Clients/GetClients", 0, formatClientsResult);
                                    $("#adddiv").hide();
                                    $("#ResultsDiv").show();
                                    $("#PagerDown").show();
                                    $("#ImageButtonDiv").show();
                                    var maxvalues = $("#HfId").val();
                                    $(".pager").pagination(maxvalues, {
                                        callback: getEntities("Clients/ClientCreate", 0, formatClientsResult),
                                        current_page: 0,
                                        items_per_page: 5,
                                        num_display_entries: 5,
                                        next_text: 'Next',
                                        prev_text: 'Prev',
                                        num_edge_entries: 1
                                    });
                                    $("#alert").remove();
                                    topBar('successfully added');
                                    return false;
                                }
                            }
                        });
                    }
                    else {
                        $.ajax({
                            url: "Clients/Clientupdate",
                            data: { 'clientId': $("#hfEditId").val(), 'clientName': $("#Name").val(), 'clientMobNo': $("#MobileNo").val(), 'clientAddress': $("#Address").val() },
                            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") {
                                    $("#hfEditId").val('');
                                    $("#addform").clearForm();
                                    getEntities("Clients/GetClients", 0, formatClientsResult);
                                    $("#adddiv").hide();
                                    $("#ResultsDiv").show();
                                    $("#PagerDown").show();
                                    $("#ImageButtonDiv").show();
                                    var maxvalues = $("#HfId").val();
                                    $(".pager").pagination(maxvalues, {
                                        callback: getEntities("Clients / Clientupdate", 0, formatClientsResult),
                                        current_page: 0,
                                        items_per_page: 5,
                                        num_display_entries: 5,
                                        next_text: 'Next',
                                        prev_text: 'Prev',
                                        num_edge_entries: 1
                                    });
                                    $("#alert").remove();
                                    topBar('successfully updated');
                                    return false;
                                }
                            }
                        });
                    }
                }
            });
        });

    </script>

</asp:Content>

Answer 1

The getEntities function expects 3 arguments. Here you are passing only 2:

callback: getEntities("Clients/GetClients", formatClientsResult)

Also the second argument needs to be an integer and not another function. And as it is a callback it needs to be defined as such:

callback: function() {
    getEntities("Clients/GetClients", 0, formatClientsResult);
}

---

UPDATE:

The reason you are always getting the same AJAX request is that you always pass 0 to the getEntities function in the pagination callback.

Try this:

$(".pager").pagination(maxvalues, {
    callback: function (new_page_index, pagination_container) {
        // Notice how the new_page_index is passed
        getEntities("home/GetClients", new_page_index, formatClientsResult);
    },
    current_page: 0,
    items_per_page: 5,
    num_display_entries: 5,
    next_text: 'Next',
    prev_text: 'Prev',
    num_edge_entries: 1
});

Answer 2

The callback of the pagination plugin here which I assume you are using is defined internally as

opts.callback(current_page, containers);

This is different to the signature of your callback so no it will not work the same.

Answer 3

Apparently the currentPage parameter of getEntities() is an object, so adding 1 to it is not a sensible operation. Check with firebug what the type and contents of currentPage is.

Answer 4

Try this:

    $(document).ready(function() {
        var helper = function() {
            getEntities("Clients/GetClients", 0, formatClientsResult);
        };
        helper();
        var maxvalues = $("#HfId").val();
        $(".pager").pagination(maxvalues, {
            callback: helper,
            current_page: 0,
            items_per_page: 5,
            num_display_entries: 5,
            next_text: 'Next',
            prev_text: 'Prev',
            num_edge_entries: 1
        });