fldavem fldavem - 1 month ago 12
Javascript Question

jQuery-ui Autocomplete not finding control on Master page

I'm struggling with the jQuery-UI Autocomplete on a master page.
I've loaded the jQuery.js and jQuery-ui.js in that order, in the head section of the master page.
What I need to do is very common, I'm sure, but perhaps the idea it's on a master page is getting in the way.
Here is code that will fill the autocomplete input (id=autocomplete) with hard-coded values outside an ajax call.

I realize it's useless to call ajax for data and not use it, but I'll deal with that later...baby steps

<%-- Trying some autocomplete stuff --%>
<label for="autocomplete" style="color:yellow;">Language: </label>
<input id="autocomplete" />

<script type="text/javascript">
var wsUrl = '<%= ResolveUrl("http://localhost/CommonContent/CCWebService.asmx/HelloWorld") %>';
var fillMe = "[id$='autocomplete']";
$.ajax({
type: "POST",
url: wsUrl,
contentType: "application/json; charset=utf-8",
dataType: "text",
success: function (dave) {
alert(dave);
//FillAutocomplete(fillMe);
},
error: function (jqXHR, textStatus, errorThrown) {
alert("1!\n" + errorThrown + "\n" + jqXHR + "\n" + textStatus);
}
});
FillAutocomplete(fillMe);
function FillAutocomplete(id) {
autodata = ["c++-001", "java-002", "php-003", "coldfusion-004", "javascript-005", "asp-006", "ruby-007"];
alert(autodata);
//$("[id$='autocomplete']").autocomplete({
$(id).autocomplete({
source: autodata,
select: function (event, ui) {
var label = ui.item.label.split('-')[0];
alert(label);
var value = ui.item.value.split('-')[1];
alert(value);
//store in session
document.valueSelectedForAutocomplete = value
}
});
alert("Filled");
}
</script>


Again, this WORKS (but the data is hardcoded). I get the alerts in the following order: success from ajax, then the autodata, then the filled notice.
Additionally, it works if I use the fillMe variable set to "#autocomplete" or if I hard code it in the FillAutocomplete function.
Obviously, since it works, the input is able to have the autocomplete property.

Here's everywhere else where I tried that I simply get
Object doesn't support property or method 'autocomplete'


  1. Putting the autocomplete code directly inside the success

  2. Call the filling of the autocomplete INSIDE the success of the ajax call (uncomment
    //FillAutocomplete
    ) (comment the other call)

  3. Starting with
    $(function() {
    $('#autocomplete).autcomplete({...

  4. Using some form of
    <#='autocomplete.ClientID()'#>



I have a sneaking suspicion it's not finding the control, not really that the control doesn't have support it.

Any ideas?




UPDATE: More Information
I've added the screenshot below to show the error in it's full glory. And sorry for repeating myself but I'm wondering if it's due to master page somehow, or somehow the jquery-ui is NOT loading before the call to the autocomplete method (since it's "object doesn't support....")
enter image description here




The Cause and Solution:

It seems that the Ajax call was trying to complete before the remote file jQuery-UI was loaded. As RAM suggested in the comments below, I downloaded all remote files and they're part of the project now. Now the scripts load in the correct order and the autocomplete method is available on the input. Thanks RAM.

ram ram
Answer