Strange problem Ajax enabled MVCContrib Grid pager

Question

Let's explain the context: I have a person form inside a jquery dialog that has some tabs to group informations related to this person (Personal data, addresses, emails, position, etc.)

One of the tab show the Person addresses through an ajax call to this controller action

[HttpGet]
public ActionResult GetAddresses( int id, int? page ) {
    IEnumerable<AddressModel> list = _manager.GetAddressesByContact( id ).AsPagination( page ?? 1, 2 );
    ViewData["__ContactID"] = id;
    return PartialView( "AddressList", list );
}

then I have on the partial the following code that create the grid and the pager

<%= Html.Grid(Model).Columns( column => {
    column.For(addr => addr.GetAddressTypeList().First(at => at.AddressTypeID == addr.AddressTypeID).Description).Named("Tipo");
    column.For( addr => ( addr.IsPostalAddress ) ? Html.Image( "/_assets/images/PostalAddress.gif", "Indirizzo per la corrispondenza" ) : "&nbsp;" ).Encode(false).Named("Posta");
    column.For(addr => addr.StreetAddress + "<br />" + addr.ZipCode + ", " + addr.City + "<br />" + 
        addr.GetProvinceList().First( p => p.ProvinceID == addr.ProvinceID).Description + ", " +
        addr.GetCountryList().First( c => c.CountryID == addr.CountryID).Name).Named("Indirizzo").Encode(false);
    column.For( addr => 
        "<a href='/Contact/EditAddress/" + addr.AddressID + "' class='ajaxLink' title='Modifica'><img src='/_assets/images/edit.png' alt='' /></a>"
        ).Attributes( style => "width:16px").Encode(false);
    column.For( addr =>
        "<a href='/Contact/DeleteAddress/" + addr.AddressID + "' class='ajaxLink' title='Elimina'><img src='/_assets/images/delete.png' alt='' /></a>"
        ).Attributes( style => "width:16px" ).Encode( false );
    } ).Attributes( @class => "table-list" )%>

<br />
<%= Html.Pager((IPagination)Model).First("Prima").Next("Successiva").Previous("Precedente").Last("Ultima").Format("Visualizzati {0}-{1} di {2}") %>

To enable ajax on the pager I have used the following code:

$(".paginationRight > a").live("click", function(event) {
    //stop the browser from going to the relevant URL
    event.preventDefault();
    $.ajax({
        type: "get",
        dataType: "html",
        url: this.href,
        data: {},
        success: function (response) {
            $("#addressListPlaceholder").html('').html(response);
        }
    });
});

Everything works very good except one thing. When I click on a paging link there are infinite request to the server as you can see from the following Fiddler screenshot. What is going to happen????

Update: Following Vinzenz advice I have added the event.stopPropagation() and return false instructions after the ajax call. Then I have

• first clicked once on the Next link of the pager (request 48) and Fiddler showed 1 request.
• Clicked on the Previous link. Fiddler shows two request (49 and 50)
• Clicked again on the Next link. Fiddler reports 4 request (51, 52, 53 and 54)

Generally if I continue clicking back and forth the number of requests made to the server is always increasing.... :(

Answer 1

I would for test reasons return false; from this event handler, or call event.stopPropagation();

It could be that there's some thing going on with your code somewhere else that you have registered the same handler twice or more times and they somehow trigger each other or whatever. It's hard to tell without having more information.

However try to use my suggestions and you will see if it helps.

Answer 2

my suggestion is to live attach is to "live attach" your code:

$(".paginationRight > a").live("click", function(event) {
    //stop the browser from going to the relevant URL
    event.preventDefault();
    $.ajax({
        type: "get",
        dataType: "html",
        url: this.href,
        data: {},
        success: function (response) {
            $("#addressListPlaceholder").html('').html(response);
        }
    });
});

on the page where you defined the tab (the "parent page"), not on the partial view.