Uncaught TypeError: Object [object Object] has no method 'autocomplete'

Question

I am trying to use the jQuery autocomplete feature on an ASP MVC 3 web page. Unfortunately I keep getting this error. I've looked at version 1.9.2, which I'm using, and it does have the autocomplete method. I am, however, completely new to jQuery and not sure if there are too many declarations in the header, conflicting libraries, or missing ones.

Below is the code from the view

<link href="../../Content/jquery-ui-1.9.2.custom.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.min.js")" type="text/javascript"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">

    $(document).ready( function() {
      $('#BankName').autocomplete('@Url.Action("GetBanks", "AgentTransmission")', {
          dataType: 'json',
          parse: function(data) {
              var rows = new Array();
              for(var i=0; i<data.length; i++){
                  rows[i] = { data:data[i], value:data[i].SignalName, result:data[i].SignalName };
              }
              return rows;
          },
          formatItem: function(row, i, n) {
              return row.SignalName + ' - ' + row.Description;
          },
          width: 300,
          mustMatch: true,
      });
    });

Full html can be found here: http://jsfiddle.net/qpvBv/

Flag

Why are you including two different versions of jQuery? – Peony

There's a bunch of Razor syntax in there so the display won't work properly, but you can view the HTML and Javascript here: jsfiddle.net/qpvBv – Flag

@j08691: That's part of my question. Like I said, I'm completely new to jQuery and I'm not sure what these declarations are for. (i.e. do I need a cooresponding ui declaration for each library? Can you use different versions together, etc) – Flag

Answer 1

You're using multiple versions of jQuery. Include only one and put it at the top of all the scripts.

Including multiple versions of jQuery does not work because:

1. First you include jQuery 1.8.3. This is okay(ish).
2. Then you include jQuery UI 1.9.2. This is also okay, although I'd probably make sure that the versions of jQuery and jQuery UI match up. jQuery UI 1.9.2 is installed on the 1.8.3 jQuery object.
3. Then you include more plugins, also installed on the 1.8.3 jQuery object.
4. Then you include jQuery 1.6.4. Apart from it being out of date, it overwrites the 1.8.3 jQuery object with its own 1.6.4 jQuery object, overwriting all the plugins on the old one with it.

Shelf

What if I have only one version included and still have the problem? – Ankylosis

@Green: Then you most likely forgot to include jQuery UI. If that's not the case, please ask a new question. – Shelf

Answer 2

I was having this same issue and it turned out that jQuery was being included multiple times just like icktoofay said.

I was having trouble finding out where it was getting included though. I found an easy way to find where though, if you are including the files locally instead of importing them then you can just add alert('JQUERY INCLUDED'); at the top of the document.

Then when a page is loading it will freeze whenever you are importing the library and pop up a window saying so. For me it turned out to be during an ajax call which would have been a nightmare to debug otherwise. Hopefully this will help someone else out.

Eberly

Answer 3

I marked up icktoofay's answer but I want to add to it that you should put the link after a conflicting link for example:

  <script src="~/fullcalendar/fullcalendar.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>

If you dare reverse the order of these two links then the autocomplete method can not be seen. So while icktoofay says we should put it at the top, I'm of the opinion that we should put them at the bottom. Just saying....

Pericynthion

Answer 4

install

gem 'jquery-ui-rails'

and put in your application.js

//= require jquery.ui.all

Bacciferous