Zurb Foundation Conflit avec JQuery UI Autocomplège?

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

  •  11-12-2019
  •  | 
  •  

Question

Je ne peux pas obtenir jQuery-ui autocomplete à travailler après le chargement de la Fondation de Zurb 3.1.

Quelqu'un les a amené à travailler ensemble ou à trouver un autre plugin autocomplete qui fonctionne avec la fondation ?? 

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

Était-ce utile?

La solution

Cela fonctionne bien dans cette page, mais si vous utilisez d'autres composants comme orbite ou révélez, et que vous avez un site construit sur fondonn, alors Foundation.min.js est nécessaire.

fondation.min.js comprend la modernisation, la bibliothèque JQuery, l'orbite, la révélation, les info-bulles.Vous pouvez donc utiliser la bibliothèque de JQuery incluse dans fondation.min.js (Foundation 3.2 inclut JQuery 1.8.2).J'ai laissé ces importations à la fin du corps, puis j'ai ajouté ce dont j'avais besoin (Jquery Ui pour l'auto-emploi et la datePicker, puis le script), alors cela s'est révélé comme ça: 

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

Les scripts vont dans la commande suivante

  1. fondement.min.js Il contient jQuery 1.8
  2. fondation.min.js Il a besoin de la bibliothèque JQuery
  3. script personnalisé il a besoin de bibliothèque JQuery et de jQuery ui

Autres conseils

Il y a un conflit avec les bibliothèques du cadre de fondation utilisant JQuery.Afin d'utiliser JQuery UI avec la Fondation Zurb Framework, vous devrez supprimer les deux importations à la fin du code:

fondation.min.js et javascripts / app.js

Vous pouvez le voir travailler dans mon code d'exemple (vous devez inclure des ressources de base afin de le voir fonctionner (fondation.min.css, app.css et 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>

Je faisais face au même problème avec fondation.min.js et jQuery ui .

Puis j'ai lu la réponse de @ Snekkke et l'avons essayée ..
Cela a fonctionné pour une fonction d'interface utilisateur mais pas avec tout (c'est peut-être à cause de jQuery ui et jQuery ( groupé avec fondation.min.js ) ne fonctionne pas bien).

J'ai donc supprimé le code jQuery de fondation.min.js et ajouté google CDN pour JQuery..order était ..

  1. jQuery
  2. fondement.min.js
  3. jQuery ui

    Maintenant sa fonction de travail pour moi ...

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top