I have a page with multiple dropdown boxes. I want to make some dropdowns as ready only after the AJAX finish the dropdown content load and the default value selection.
So in each dropdown's Ajax function, I have
complete: function () {
$("#Country").enable();
$("#ORG_ID").enable();
$('#Country option[value="@TempData["Country"]"]').prop('selected', true).change();
$('#ORG_ID option[value="@TempData["ORG_ID"]"]').prop('selected', true).change();
}
"@TempData["Country"]"] is an ASP.NET MVC Razor variable.
I hope after all the Ajax events are fired and completed, the JavaScript DOM can set the Country and ORG_ID field as ready only with the codes -
<script type="text/javascript">
function pageLoad() {
document.getElementById('Country').readOnly = true;
document.getElementById('ORG_ID').readOnly = true;
}
</script>
It is supposed that pageLoad or window.onload will be fired after AJAX's complete event is finished. But after pageLoad has been set the Ajax events still continue to fire for the changes. The readOnly can never be set for these fields.
What have I missed? Is there a more complete page load event than pageLoad or window.onload in Javescript?
Thanks
Update: The AJAX call is from
$(document).ready(function () {
GetCountry();
}
The above AJAX function codes are in
function GetCountry() {
$("#Country").disable();
$("#ORG_ID").disable();
$.ajax({
type: 'POST',
url: '@Url.Action("GetCountry/" + ViewBag.Id.ToString(), "RequestList")',
data: { Direct: isDirect },
success: function (data, textStatus, jqXHR) {
if (textStatus != "success") {
alert("There was an error processing your request.");
return;
}
$.each(data, function (i, item) {
$('#Country').append($('<option>').val(item.Id).text(item.Text));
});
},
error: function (jqXHR, textStatus, errorThrown) {
alert("There was an error processing your request.");
},
complete: function () {
$("#Country").enable();
$("#ORG_ID").enable();
$('#Country option[value="@TempData["Country"]"]').prop('selected', true).change();
}
})
}