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/

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 — NealR
– NealR, Commented Apr 7, 2013 at 3:14
@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) — NealR
– NealR, Commented Apr 7, 2013 at 3:15

icktoofay · Accepted Answer · 2013-04-07 03:36:52Z

9

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:

First you include jQuery 1.8.3. This is okay(ish).
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.
Then you include more plugins, also installed on the 1.8.3 jQuery object.
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.

answered Apr 7, 2013 at 3:36

icktoofay

130k23 gold badges261 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Green Over a year ago

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

icktoofay Over a year ago

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

mswjackso · Accepted Answer · 2013-09-17 16:33:40Z

0

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.

answered Sep 17, 2013 at 16:33

mswjackso

672 silver badges11 bronze badges

Comments

Charles · Accepted Answer · 2014-01-14 18:43:00Z

0

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

answered Jan 14, 2014 at 18:43

Charles

4993 gold badges10 silver badges21 bronze badges

Comments

user391990 · Accepted Answer · 2013-10-11 16:38:08Z

-2

install

gem 'jquery-ui-rails'

and put in your application.js

//= require jquery.ui.all

answered Oct 11, 2013 at 16:38

user391990

955 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related