Manually refreshing partial view doesn't work after automatic ajax refresh

Question

I have a partial view on my index page that shows a list of records. Every 10 seconds this partial view is updated automatically via jQuery/Ajax, using the following code:

$(document).ready(function () {
        setInterval(function () {            
            ReloadSummary();
        }, 10000);

    });

function ReloadSummary()
{
        $.ajax({
            url: "@Url.Action("FaultSummary", "Fault")",
            type: 'GET',
        dataType: 'html',
        cache: false,
        success: function (html) {
            $('#FaultSummary').html(html);
        }
    });
}

I have recently put in an image button within the view itself that shows a dropdown box and allows the user to refresh the view with different parameters. The onchange event of the dropdown set to submit the view, which then submits the selected value and refreshes the view.

@Html.DropDownList("area", (SelectList)ViewData["Area"], "Select...", new { @class = "form-control", @onchange = "this.form.submit()" })

This onchange is working as expected but once the ajax refresh has fired, any attempt to manually submit and refresh the partial view doesn't work. Instead of refreshing the partial view within the parent, it redirects to the partial view and displays that as the sole thing on screen. If you change the dropdown before the auto refresh it works fine.

Does anyone know what might be happening? If you need any more code posting then let me know, I've tried to keep it to what I thought were the main bits to begin with.

EDIT

Partial View

@using (Html.BeginForm("FaultSummary", "Fault", FormMethod.Get, new { id = "summaryForm" }))
{
    <div class="col-sm-12" style="padding-left: 0; padding-right:0;">
        <div class="summarybox summaryboxshadow" style="padding-bottom:0;padding-left: 0; padding-right:0;">
            <div class="">
                <div style="padding-top:10px"></div>
                <div class="summaryTag-Green" style="white-space:nowrap">
                    <div class="row">
                        <div class="col-sm-9">
                            <h4 style="display: inline-block"><span>Jobs Assigned to @ViewData["Area"] [@Model.Count().ToString()]</span></h4>
                        </div>
                        <div class="col-sm-2">
                            <span id="areaDropdown" style="padding-top:3px; visibility:hidden;">
                                @Html.DropDownList("area", (SelectList)ViewData["Area"], "Select...", new { @class = "form-control", })
                            </span>
                        </div>
                        <div class="col-sm-1" style="float:right;">
                            <img class="areaIcon" src="~/Content/Images/area.png" alt="Change Area" title="Change Area" onclick="toggleArea()" />
                        </div>
                    </div>
                </div>
                <div style="padding-left: 15px; padding-right:15px;">
                    <div style="max-height: 400px; overflow-y: auto;">
                        <table class="table table-responsive">
                            <tr>
                                <th></th>
                                <th>
                                    @Html.DisplayNameFor(model => model.ReportedDate)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.ReportedBy)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Description)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.JobStatus)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Priority)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.assigned_to)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.assigned_by)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Last_edit_dt)
                                </th>
                            </tr>
                            @foreach (var item in Model.Take(5))
                            {
                                <tr>
                                    <td>
                                        @Html.ActionLink(item.ID.ToString(), "Edit", new { id = item.ID })
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.ReportedDate)
                                        @Html.DisplayFor(modelItem => item.ReportedTime)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.ReportedBy)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Description)
                                    </td>
                                    <td>
                                        @Html.DisplayForLookup(modelItem => item.JobStatus, "JobStatus")
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Priority)
                                    </td>
                                    <td>
                                        @Html.DisplayForUserCode(modelItem => item.assigned_to)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.assigned_by)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Last_edit_dt)
                                    </td>
                                </tr>
                            }
                        </table>
                    </div>
                    @if (Model.Count() > 5)
                    {
                        <div>
                            @Html.ActionLink("Load More...", "Index", "Fault", new { Area = ViewData["Area"] }, null)
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#area").change(function(){
            $("#summaryForm").submit();
        });
    });

    function toggleArea() {
    if ($('#areaDropdown').css('visibility') == 'hidden')
        $('#areaDropdown').css('visibility', 'visible');
    else
        $('#areaDropdown').css('visibility', 'hidden');
}
</script>

Controller

public PartialViewResult FaultSummary(string area = null)
{
    IList<tblfault> results;

    ViewData["ShowArea"] = area;
    ViewData["Area"] = new SelectList(_faultRepository.GetAreas(), "areacode", "areaname", null);

    results = _faultRepository.GetSummary(area);

    return PartialView("_FaultSummary", results);

}

Answer 1

Calling $('#summaryForm').submit() will cause the form to do a full postback, not an ajax submit, that's why it's returning only the partial. Change it to this:

$.ajax({
  url: '@Url.Action("FaultSummary", "Fault")',
  type: 'GET',
  data: { area: $('#summaryForm').serialize() }
  dataType: 'html',
  cache: false,
  success: function (html) {
    $('#FaultSummary').html(html);
  }
});