ASP MVC 3: LoadingElementId element only shows on first request - asp.net-mvc

Question

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" })
</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

Answer 1

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.

Answer 2

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.

Answer 3

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")
....