Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Zurb Foundation conflicts with jQuery UI autocomplete?

I can't get jQuery-UI Autocomplete to work after loading Zurb Foundation 3.1.

Anyone got them to work together or found another autocomplete plugin that works with Foundation??

Uncaught TypeError: Object [object Object] has no method 'autocomplete'
(anonymous function) order.js:7
l foundation.min.js:18
c.fireWith foundation.min.js:18
v.extend.ready foundation.min.js:18
A foundation.min.js:18
like image 694
dannepanne Avatar asked Sep 30 '12 23:09

dannepanne


1 Answers

It works great in that page, but if you use other components like Orbit or Reveal, and you have a site built on top of Foundationn then foundation.min.js is necessary.

foundation.min.js includes Modernizr, jQuery library, orbit, reveal, tooltips. So you can use jQuery library included in foundation.min.js (foundation 3.2 includes jQuery 1.8.2). I left those imports at the end of the body and then added what I needed (jQuery ui for the autocomplete and datepicker and then the script), so it ended up like this:

<script src="javascripts/foundation.min.js"></script>
<script src="javascripts/app.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

<script type="text/javascript">
    $(function () {
        var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
        $("#tags").autocomplete({
            source: availableTags
        });
    });
    $(function () {
        $("#datepicker").datepicker();
    });
</script>

The scripts go in the next order

  1. foundation.min.js it contains jquery 1.8
  2. foundation.min.js it needs jquery library
  3. custom script it needs jquery library and jquery ui
like image 179
snekkke Avatar answered Nov 03 '22 00:11

snekkke