ASP MVC 3: LoadingElementId element only shows on first request

I have the following problem. I am using an AjaxForm in ASP MVC 3 and the LoadingElementId works fine only in the first request, it is not shown on the next ones. Why can this be happening?

View:

@model ICollection<Indirect_eSod.ViewModels.OrderSearchViewModel>
@using Indirect_eSod.Helpers

@{
    ViewBag.Title = "Sales Order Lookup";
}
    <script type="text/javascript">
        $(document).ready(function () {
            $("#id").keyup(function () {
                this.value = this.value.replace(/[^0-9\.]/g, '');
            });
        });
    </script>

@using ( Ajax.BeginForm(new AjaxOptions()
{
    HttpMethod = "GET",
    UpdateTargetId = "results",
    LoadingElementId = "ajaxSplash",
    InsertionMode = InsertionMode.Replace
}))
{   
    <div id="Criteria" style="width: 800px;margin-left:10%">
        <table id="tblSearchCriteria" class="FunnyRedLine" width="100%">    
            <tr class="SODRow">
                <td class="SODLabel">
                    eSod ID:
                </td>
                <td colspan="4">
                    @Html.TextBox("id", null, new { @class = "Text"})
                </td>
                <td style="width: 40%"></td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                   Start Date:
                </td>
                <td>
                    @Html.TextBox("startDate", null, new { @class = "Text", @readonly="readonly" })
                    @Ajax.Calendar("startDate")
                </td>
                <td class="SODSpacer75px">
                </td>
                <td class="SODLabel">
                    End Date:
                </td>
                <td>
                    @Html.TextBox("endDate", null, new { @class = "Text", @readonly = "readonly" })
                    @Ajax.Calendar("endDate")
                </td>
                <td style="width: 40%"></td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                    Post Code:
                </td>
                <td colspan="4">
                    @Html.TextBox("postCode", null, new { @class = "Text" })
               开发者_Python百科 </td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                    Sales Person:
                </td>
                <td colspan="4">
                    @Html.DropDownList("salesPersonId", new SelectList(ViewBag.SalesPeople, "UserId", "FullName"), String.Empty, new { @class = "Text" })
                </td>
                <td style="width: 40%">
                </td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                   Sales Person Ref:
                </td>
                <td colspan="4">
                    @Html.TextBox("salesPersonRef", null, new { @class = "Text" })
                </td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                    Order Type:
                </td>
                <td colspan="4">
                    @Html.DropDownList("orderTypeId", new SelectList(ViewBag.OrderTypes, "SodTypeID", "SodTypeDesc"), String.Empty, new { @class = "Text" })
                </td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                    Serial No:
                </td>    
                <td colspan="4">
                    @Html.TextBox("serialNo", null, new { @class = "Text" })
                </td>
            </tr>

            <tr class="SODRow">
                <td class="SODLabel">
                    Customer PO:
                </td>
                <td colspan="4">
                    @Html.TextBox("customerPO", null, new { @class = "Text" })
                </td>
                <td style="width: 40%">
                    <input id="btnSearch" type="submit" value="Search" class="Text" />
                    @Html.Hidden("hdnNoCache",@DateTime.Now)
                </td> 
            </tr>

        </table>
    </div>

}

<div id="results" />

@Html.Partial("AjaxSplash")

The AjaxSplash Source

<div id="ajaxSplash" style="display:none;z-index:60;" class="transparent">
    <table id="Table1" width="100%" style="height: 100%; text-align: center">
        <tr align="center">
            <td align="center" valign="middle">
                <img alt="" src="/Content/Images/ajax-loader2.gif" id="img2" />
            </td>
        </tr>
        <tr align="center">
            <td align="center" style="font-family: Verdana; font-size: 8pt; font-weight: bold;
                color: Navy;">
                Please Wait..
            </td>
        </tr>
    </table>
</div>

The Controller

[Ajax(true)]
[CacheControl(HttpCacheability.NoCache),HttpGet]
public ActionResult Index(string id, string startDate, string endDate, string postCode, string salesPersonId, string salesPersonRef,
    string orderTypeId, string serialNo, string customerPO)
{
        var service = new eSodSrv();
        var viewModel = service.GetHeaders(id.ToInt32(), salesPersonId.ToInt32(), orderTypeId.ToInt32(), startDate.ToDate(), endDate.ToDate(), postCode, customerPO, serialNo, salesPersonRef);
        return PartialView("SearchResults",viewModel);
}

---

EDIT

I think I've tracked what the problem is. After the AJAX call when I make a document.getElementById('ajaxSplash') I get null. I still have no idea why this is happening though

---

I actually prefer not to do it this way and instead in my layout define a div and attach

$('#waitImageDiv')
    .hide()
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

ANY ajax events will automatically show this image then automatically.

---

OK I found the solution, it seems that LoadingElementId will only work if the div is inside the AJAX Form, otherwise the div will end up as a null after the first call.

---

It looks like the loading element div must be the first element in the ajax form for the feature to work properly.

Try the following:

@using ( Ajax.BeginForm(new AjaxOptions()
{
    HttpMethod = "GET",
    UpdateTargetId = "results",
    LoadingElementId = "ajaxSplash",
    InsertionMode = InsertionMode.Replace
}))
{ 
   @Html.Partial("AjaxSplash")
   ....