views:

233

answers:

4

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&amp;pageSize=5... Am i missing something...

When executing on initial load the request is,

http://localhost:1115/Clients/GetClients?currentPage=1&amp;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>
+3  A: 

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.

redsquare
@redsquare ya that was the error i got in web developer toolbar javascript error console... Any resolution...
Pandiya Chendur
just hardcode the url and format function inside the callback, it does not look they are dynamic through the plugin so why pass them into that function?
redsquare
@redsquare i used `callback: getEntities("Clients/GetClients", formatClientsResult)` but still get the error `opts.callback is not a function`
Pandiya Chendur
can you paste the full js again as it stands now
redsquare
@redsquare just check it now..
Pandiya Chendur
@redsquare still the same problem exists
Pandiya Chendur
@redsquare i ve edited my question please have a look at it..
Pandiya Chendur
A: 

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.

Tgr
@Tgr it works on intial request but the problem lies with the callback function...
Pandiya Chendur
@Tgr i ve edited my question please have a look at it..
Pandiya Chendur
+1  A: 

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
});
Darin Dimitrov
@Darin if i give `callback: getEntities("Clients/GetClients", 0,formatClientsResult)` i get the error `Error: opts.callback is not a function`
Pandiya Chendur
@Darin what happens is the same ajax request for all page numbers with `currentPage:1,pageSize:5` for all pages...
Pandiya Chendur
Pandiya Chendur
@Darin please help me out..
Pandiya Chendur
@Darin still the same problem exists..
Pandiya Chendur
@Pandiya, please try to write a **full** example (model, controller, view) that shows the problem you are having and which will help me replicate your scenario.
Darin Dimitrov
Pandiya Chendur
@Darin Though i ve edited my question for you...
Pandiya Chendur
@Pandiya, please see if my update helps.
Darin Dimitrov
@Darin great man it worked...
Pandiya Chendur
@Darin http://stackoverflow.com/questions/3278381/good-repository-pattern-for-asp-net-mvc
Pandiya Chendur
A: 

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
        });
Erik Escobedo
@Erick that doesn't seem to work man...
Pandiya Chendur