MVC JQuery - lose styling after an asynchronous load

Question

I have a grid on my form which is colour banded with the following jquery;

$("#tblePagedList tr:even").addClass("row1");
$("#tblePagedList tr:odd").addClass("row2");

This works fine except when I do a search and refresh my grid via an Asyncronous call to the server with Ajax, this particular styling disappears.

The form is reloaded with the following jquery;

   var ajaxFormSubmit = function () {
        var $form = $(this);

        var options = {
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize()
        };

        $.ajax(options).done(function (data) {
            var $target = $($form.attr("data-scd-target"));
            var $newHtml = $(data);
            $target.replaceWith($newHtml);
            $newHtml.effect("highlight");
        });

        return false;
    };

One attempted solution was to copy and paste the 2 styling lines in the done function above, but this made no difference.

My form looks like;

@using SCD.Helpers
@model IPagedList<SCD.ViewModels.SubcontractorLineViewModel>

@{
    ViewBag.Title = "List Subcontractors";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<fieldset>
<legend>Subcontractors</legend>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

    <form method="get" action="@Url.Action("ListSubcontractors")" 
          data-scd-ajax="true" data-scd-target="#subcontractorList">
        <table class="searchTable">
            <tr>
                <td>Company: <input type="text" name="searchCompany" /></td>
                <td>Address: <input type="text" name="searchAddress" /></td>
                <td>Town/City: <input type="text" name="searchCity" /></td>
            </tr>
            <tr>
                <td>County: <input type="text" name="searchCounty" /></td>
                <td>Trade: <input type="text" name="searchTrade" /></td>
                <td>Other Trade: <input type="text" name="searchOtherTrade" /></td>
            </tr>
            <tr>
                <td colspan="2">@this.TempData["SearchMessage"].ToSafeString()</td>
                <td><input type="submit" value="Search" /> </td>
            </tr>
        </table>
    </form>
@Html.Partial("_Subcontractors")

</fieldset>

My PartialView looks like

@model IPagedList<SCD.ViewModels.SubcontractorLineViewModel>
<div id="subcontractorList">
    <div class="pagedList" data-scd-target="#subcontractorList">
        @Html.PagedListPager(Model, page => Url.Action("ListSubcontractors", new { page }),
        PagedListRenderOptions.DefaultPlusFirstAndLast)
    </div>
    <table id="tblePagedList">
        <thead>
            <tr>
                <th>
                    Company
                </th>
                <th>
                    Address
                </th>
                <th style="width:100px;">
                    Telephone
                </th>
                <th style="width:100px;">
                    Contact
                </th>
                <th style="width:100px;">
                    Trade
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody id="tblePagedListBody"></tbody>
        @foreach (var item in Model) {
            <tr>
                <td>
                    @item.Company
                </td>
                <td>
                    @item.AddressLine
                </td>
                <td>
                    @item.Telephone
                </td>
                <td>
                    @item.Contact
                </td>
                <td>
                    @item.TradeName
                </td>
                <td>
                    @Html.ActionLink("Details", "DetailsSubcontractor", new { id = item.CompanyId })
                </td>
            </tr>
        }

    </table>
</div>

Answer 1

The problem is that the returned HTML from the AJAX call is not styled. The solution is that after you have replaced the grid with the returned html, simply restyle your grid.

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-scd-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        $newHtml.effect("highlight");

        $("#tblePagedList tr:even").addClass("row1");
        $("#tblePagedList tr:odd").addClass("row2");
    });