Q:

MVC - Ajax - Inconsistency between Chrome and IE 9

I have an MVC view where I am doing some paging of data, using the PagedList component. My JavaScript to support this looks as follows:
$(function () {

    var getPage = function () {
        var $a = $(this);

        var options = {
            url: $a.attr("href"),
            type: "get"
        };

        $.ajax(options).done(function (data) {
            var target = $a.parents("div.pagedList").attr("data-ExchangeSite-target");
            data: $("form").serialize(),
            $(target).replaceWith(data);
        });

        return false;
    };

    $(".main-content").on("click", ".pagedList a", getPage);

});

My .cshtml file looks, in part, like this:
    @model ExchangeSite.Entities.BicycleSearchSeller

    <div id="itemList">

        <div class="pagedList" data-ExchangeSite-target="#itemList">
            @Html.PagedListPager(Model.BicycleSellerListingList, pageNumber => Url.Action("Index", new {pageNumber}),
            PagedListRenderOptions.ClassicPlusFirstAndLast)
        </div>
   ...
   ...

In IE9, this works perfectly. When I click on a specific page number, or the next/previous page, an asynch call is made to my controller to refresh the list of data ("itemList"). However, in Chrome, two calls are made to my controller. One is an Ajax call, the other is not. Can anyone tell me why, in Chrome, two calls are made to my controller? If you need to see more code, please let me know.

A:

There seems to be some buggy line in your success callback:
data: $("form").serialize(),

It is terminated with a comma instead of semicolon. It also contains a colon after data. IE might be a little more tolerant towards broken javascript compared with Google Chrome.

