IpagedList in ajax tabbed pane with partial view not rendering correctly

Question

I have a paged list in a ajax tabbed pane where I load partial views. I have made use of the built in ajax in IPagedlist but partial view is not being replaced properly, what am I doing wrong

My Ajax calls /Account/CustomerTab this finds the correct view and redirectsAction to Customer Controller and calls the partial view and inserts it in the tab div.

When clicking next it calls /Customer/Invoice?page=2 and returns that in the url instead of replacing the div 'replaceDiv'.....Now I sit with just the partial view in the window without the rest of the site.

Here is the main page with the tabbed pane, if you look in the ajax call you will see I insert n div with a class "replaceDiv"

    <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <h3>Account Information</h3>

        <div class="tab-container left clearfix">
            <ul id="tabStrip" class="nav-tabs clearfix">
                <li class="active"><a href="#0" data-toggle="tab">Business Information</a></li>
                <li class=""><a href="#1" data-toggle="tab">Addresses</a></li>
                <li class=""><a href="#2" data-toggle="tab">Pro forma Invoice</a></li>
                <li class=""><a href="#3" data-toggle="tab">Invoices</a></li>
                <li class=""><a href="#4" data-toggle="tab">Order History</a></li>
            </ul>

            <div class="tab-content clearfix">
                <div class="tab-pane active" id="0">@Html.Action("Information", "Customer")</div>
                <div class="tab-pane" id="1"></div>
                <div class="tab-pane" id="2"></div>
                <div class="tab-pane" id="3"></div>
                <div class="tab-pane" id="4"></div>
            </div><!-- End .tab-content -->
        </div><!-- End .tab-container -->
    </div><!-- End .col-md-12 -->
</div><!-- End .row -->



@section scripts{
    <script type="text/javascript">
        $('#tabStrip a').click(function (e) {
            e.preventDefault()
            var tabID = $(this).attr("href").substr(1);

            $(".tab-pane").each(function () {
                $(this).empty();
            });

            $("#" + tabID).empty().append("<div class='loader'><img src='/Content/img/Loader/ajax-loader.gif' alt='Loading' /></div>");

            $.ajax({
                url: "/Account/CustomerTab",
                data: { Id: tabID },
                cache: false,
                type: "get",
                dataType: "html",
                success: function (result) {
                    $("#" + tabID).empty().append("<div id='replaceDiv'>" + result + "</div>");
                }
            });
            $(this).tab('show')
        });
    </script>
}

here is my partial view with the page list where I try to replace the html but all i get is a new html page with just my list in and not replacing the div.

    <h2 class="sub-title">Invoices</h2>

@using (Html.BeginForm("Invoices", "Customer", FormMethod.Get))
{
    <p>
        Find by Invoice Number: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
        <input type="submit" value="Search" />
    </p>
}
<table class="table table-hover">
    <thead>
        <tr>
            <th>Invoice Number</th>
            <th>Date</th>
            <th>Total</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var inv in Model)
            {
            <tr>
                <td>@inv.InvoiceNumber</td>
                <td>@inv.DateCompleted</td>
                <td>@inv.TotalAmount</td>
            </tr>
        }
    </tbody>
</table>
@Html.PagedListPager(Model, page => Url.Action("Invoices", "Customer", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions { HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "replaceDiv" }))

EDIT

I find that if I add if (Request.IsAjaxRequest()) in my controller then it doesn't get hit. so its not an ajax request being sent through. This is what the rendered HTML looks like

<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#replaceDiv" href="/Customer/Invoices?page=3">3</a>

Answer 1

I found the problem. All the code is correct except My knowledge of javascript is a bit limited. I needed to include the jquery.unobtrusive-ajax.min.js package and now its working like a charm.