Partial view displays as empty when populated by ajax call

Question

I was having an issue earlier where I could not get a partial view to simply update instead of redirecting to another page. Got that issue solved in that it no longer redirects the page, but for some reason it refuses to show the content of the partial view in question. I have checked the page source code and it is properly rendering the partial view, but it is not being displayed.

View that is calling the partial view: (Should be noted that this is also a partial view)

<br />
@using (Html.BeginForm("LoadRelease", "Home", FormMethod.Post, new { id = "DropDownForm", style = "" }))
{
    @*Dropdowns*@
    <select id="BusinessAreaDropDown" name="BusinessArea" onchange="javascript: FillGenericProject(); FillProject(); FillReleases();" style="width: 12em;">
        @Html.Partial(@"Dropdowns\_BusinessArea", Model.ProjectViewModels);
    </select>
    <select id="GenericProjectDropDown" name="GenericProject" onchange="javascript: FillProject(); FillReleases();" style="width: 12em;"></select>
    <select id="ProjectDropDown" name="Project" style="width: 12em;" onchange="javascript: FillReleases();"></select>
    <select id="ReleaseDropDown" name="Release" style="width: 12em;"></select>
    <button type="submit" id="GoButton" style="visibility:hidden;"/>
}

<form id="ReleaseTableBody" style="text-align:center;">
    @Html.Partial("_TableBody", Model.OpenCloseViewModels)
</form>
<br />

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        $("#DropDownForm").on("submit", function (event) {
            event.preventDefault();
            var form = $(this);
            var Project = $('#ProjectDropDown').val();
            var Release = $('#ReleaseDropDown').val();
            $.ajax({
                url: form.attr("action"),
                async: false,
                method: form.attr("method"),
                data: form.serialize()
            })
            .done(function (result) {
                $("#ReleaseTableBody").empty();
                $("#ReleaseTableBody").html(result);
            });
        });
    });
</script>

Partial view being called:

@model List<ProblemReportPredictions.Models.PlannedOpenClose>



<table align="center"
       style=" border:solid;
               border-width:thin;
               border-color:lightgray;
               font: lighter 12px 'Segoe UI';
               color: slategray;
               text-align: left;">
    <tr>
        <th field="Project" width="150">Project</th>
        <th field="Period" width="125">Period</th>
        <th field="Planned Open" width="100">Planned Open</th>
        <th field="Planned Close" width="100">Planned Close</th>
        <th field="Forecast Open" width="100">Forecast Open</th>
        <th field="Forecast Close" width="100">Forecast Close</th>
        <th field="Service Ceiling" width="100">Service Ceiling</th>
    </tr>
@{var color = "White"; }

@foreach (var item in Model)
{
    if (color == "LightGray")
    {
        color = "White";
    }
    else
    {
        color = "LightGray";
    }
    <tr style="background-color:@color">
        <td width="150">@ViewBag.Project</td>
        <td width="125">@String.Format("{0:dd-MM-yyyy}",item.Period)</td>
        <td><input type="text" value=@item.PlanOpen></td>
        <td width="100">@item.PlanClosed</td>
        <td width ="100">@item.ForecastOpen</td>
        <td width="100">@item.ForecastClosed</td>
        <td width="100">@item.GateCeiling</td>
    </tr>   
}
</table>

<br />
<div style="text-align:center;">
    <button>Submit</button>
</div>

Controller:

public ActionResult LoadRelease(string Project, string Release)
{
    var ProjectID = _ProblemReportsDB.ProjectMaps
         .Where(r => r.Project == Project)
         .Select(r => r.ID).FirstOrDefault();

    ViewBag.Project = Project;

    var Releases = from row in _ProblemReportsDB.PlannedOpenCloses
                   where (row.Project == ProjectID && (Release == null || row.Release == Release))
                   select row;

    return PartialView("_TableBody", Releases.ToList());
}

Now when I run the page and view source, this is the source I get in place of the partial view render (intentionally used on a release that won't be found):

<form id="ReleaseTableBody" style="text-align:center;">


    <table align="center"
           style=" border:solid;
                   border-width:thin;
                   border-color:lightgray;
                   font: lighter 12px 'Segoe UI';
                   color: slategray;
                   text-align: left;">
        <tr>
            <th field="Project" width="150">Project</th>
            <th field="Period" width="125">Period</th>
            <th field="Planned Open" width="100">Planned Open</th>
            <th field="Planned Close" width="100">Planned Close</th>
            <th field="Forecast Open" width="100">Forecast Open</th>
            <th field="Forecast Close" width="100">Forecast Close</th>
            <th field="Service Ceiling" width="100">Service Ceiling</th>
        </tr>


    </table>

    <br />
        <div style="text-align:center;">
        <button>Submit</button>
    </div>


</form>

Except that none of this html is actually rendered on the page... It just produces a blank spot on the page.

Answer 1

The issue lied within the element:

<button type="submit" id="GoButton" style="visibility:hidden;"/>

For some reason, even though it had the />, it wasn't closing the button element. I changed it to:

<button type="submit" id="GoButton" style="visibility:hidden;"></button>

and it started working. Might have been an issue with internet explorer 9 (unfortunately what my company uses...) Considering that it applied the style to everything after the button (including that they were all considered in a button), you would think that setting the element itself to visible would have done the same for the html after, but this was not the case.