Zurb Foundation conflicts with jQuery UI autocomplete?

StackOverflow https://stackoverflow.com//questions/12666114

  •  11-12-2019
  •  | 
  •  

Question

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
Was it helpful?

Solution

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

OTHER TIPS

There's a conflict with the libraries of Foundation framework that are using jquery. In order to use jQuery UI with Foundation Zurb Framework you will need to remove the two imports at the end of the code:

foundation.min.js and javascripts/app.js

You can see it working in my sample code (you must include foundation resources in order to see it working(foundation.min.css, app.css and modernizr.foundation.js)

 <!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />    
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />   
<title>jQuery UI Autocomplete - Default functionality</title>   
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />     
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<script src="javascripts/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

    <script>
    $(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>
    </script>
</head>
<body>
    <br>
    <br>
    <div class="row">
        <div class="four columns">      
            <label for="tags">Programing Language: </label>
            <input type="text" id="tags" placeholder="Language"/>
        </div>
        <div class="four columns">
            <label for="city">Name: </label>
            <input type="text" id="city" placeholder="State" />
        </div>
        <div class="four columns">
            <label for="tags">Date: </label>
            <input type="text" id="datepicker" placeholder="dd/mm/yyyy"/>
        </div>
    </div>  


</body>
</html>

I was facing the same problem with foundation.min.js and jQuery UI.

then i read the @snekkke's answer and tried it..
it worked for some UI Function but not with all( thats might be because of jQuery UI and jQuery(Bundled with foundation.min.js) are not working together well).

So i have removed the jQuery Code from foundation.min.js and added Google CDN for jQuery..Order was..

  1. jQuery
  2. foundation.min.js
  3. jQuery UI

Now its working fine for me...

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top