'TypeError: $("#city").autocomplete is not a function

This is my php page coding:

<script type="text/javascript" src="js/addclasskillclass.js"></script>
<script type="text/javascript" src="js/attachevent.js"></script>
<script type="text/javascript" src="js/addcss.js"></script>
<script type="text/javascript" src="js/tabtastic.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajax-dynamic-list1.js"></script>
<script type="text/javascript" src="js/backtotop.js"></script>
<link type="text/css" rel="stylesheet" href="calendar/dhtmlgoodies_calendar.css?random=20051112" media="screen"></LINK>
<script language="javascript" type="text/javascript" src="calendar/dhtmlgoodies_calendar.js?random=20060118"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script>
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();   
        } else {
            $('#toTop').fadeOut();
        }
    });

    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},600);
    }); 
});
</script>
<script>
$(document).ready(function(){
 $("#city").autocomplete("autocityuser.php", {
        selectFirst: true
    });
});
</script>

<form method="get" name="frm1" id="frm1" action="#">
<input type="text" id="city" name="city" value="" style="width:160px;" size="30" />
</form>

When i load this page the FF shows me this error: TypeError: $("#city").autocomplete is not a function

I've applied the same code for autocomplete on another page (but with less js imports) and it is working fine. but it is showing me error on this page, may be beacause some js is conflicting. Can anyone help me to solve this error???

P.S. I forgot mention that i have 2 forms on this page both with different ids and names

P.S. I still don't know what the problem was , but fortunately The problem is solved, i just put below code at the end of the page and everything works perfect.

<script>
    $(document).ready(function(){
     $("#city").autocomplete("autocityuser.php", {
            selectFirst: true
        });
    });
    </script>
autocomplete


Solution 1:[1]

Are any other libs using $ and overwriting jQuery's usage of it? Maybe, try jQuery("#city").autocomplete

Solution 2:[2]

You're using part of the jQuery UI (autocomplete) but it doesn't look like you have the jQuery libraries in place.

Try including the following scripts:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js" type="text/javascript"></script></script>

EDIT

I think your basic approach is wrong.

You want to call the PHP to get your autocomplete options using AJAX and stick the echoed value into a variable availableTags. Then you want to set up your autocomplete.

Something like this (not tested):

var availableTags;
$.get("autocityuser.php", function(data){
      availableTags = data;  // You need to format the data either here or in your PHP
});
$("#city").autocomplete({source: availableTags});?

Solution 3:[3]

I had this same problem recently recently. I found that two different version of jquery lib file was included from two different place.

Look for extra inclusion using firebug as js library could have been included from other included files.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Martin
Solution 2 Community
Solution 3 Jafar Ali

Related Questions