Ah! Cracked it.
Evidently, the DOM does not get properly loaded when an Ajax update occurs and things get lost or are unavailable for being wired up, so you have to find a new way to wire up controls when posting back. I saw a number of articles online about using pageLoad() and livequery(), but I couldn't get any of these to work.
Instead, I've simply wired-up the autocomplete using the onfocus event:
- <input type="text" id="Box1" onfocus="javascript: setBox1AutoComplete();" />
...and then included a function:
- <script type="text/javascript">
function setBox1AutoComplete()
{
$("#Box1").autocomplete({
source: function (request, response) {
$.getJSON("<%=Url.Action("GetItems", "Home") %>", { term: request.term }, function (data) {
response($.map(data, function (el) {
return {
id: el.Id,
label: el.Name,
value: el.Name
};
}));
});
},
dataType: 'json',
minLength: 3,
delay: 100,
mustMatch: true,
select: function (event, ui) {
},
close: function(event, ui) {
}
});
};
</script>
...so that everytime you enter the textbox, the autocomplete wires up. This feels kinda messy, but it works reliably, and for some reason it DOESN'T handle the event multiple times when if you enter and re-enter the text box repeatedly without an update.
While this won't work for all jQuery issues, it should solve any that require a control to be entered/hovered over before functionality is required.
Cheers,
Steve.