Zurb Foundation Conflitti con JQuery UI Autocompleto?

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

  •  11-12-2019
  •  | 
  •  

Domanda

Non riesco a ottenere JQuery-UI Autocomplete per funzionare dopo aver caricato la Fondazione Zurb 3.1.

Qualcuno li ha portati a lavorare insieme o ha trovato un altro plugin autocompleto che funziona con Fondazione ?? 

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
.

È stato utile?

Soluzione

Funziona in generale in quella pagina, ma se usi altri componenti come orbita o rivelare, e hai un sito costruito in cima alla fondazioneNN allora Foundation.min.js è necessario.

Foundation.min.js Include modernizr, biblioteca jquery, orbita, rivelare, strumenti.Quindi è possibile utilizzare JQuery Library incluso in Foundation.min.js (Fondazione 3.2 include jQuery 1.8.2).Ho lasciato quelle importazioni alla fine del corpo e poi ho aggiunto ciò di cui avevo bisogno (JQuery UI per il completamento automatico e il datepicker e poi lo script), quindi è finito in questo modo: 

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

Gli script vanno nell'ordine successivo

    .
  1. fondamento.min.js contiene jQuery 1.8
  2. fountation.min.js ha bisogno di libreria jquery
  3. Script personalizzato Ha bisogno di jQuery Library e JQuery UI

Altri suggerimenti

C'è un conflitto con le biblioteche del quadro di fondazione che stanno usando jQuery.Per utilizzare JQuery UI con Fondazione Zurb Framework dovrai rimuovere le due importazioni alla fine del codice:

Foundation.min.js e JavaScripts / App.JS

Puoi vederlo lavorare nel mio codice di esempio (devi includere risorse di fondazione per vederlo funzionante (Foundation.min.css, app.css e 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>
.

Stavo affrontando lo stesso problema con Foundation.min.js e JQuery UI .

Allora leggo la risposta @ Snekkke e provato ..
Ha funzionato per una funzione UI ma non con tutto (questo potrebbe essere a causa di JQuery UI e JQuery ( bundled con Foundation.min.js ) non stanno lavorando bene insieme).

Così ho rimosso il codice JQuery da Foundation.min.js e aggiunto Google CDN per jQuery..order era ..

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

    Ora funziona bene per me ...

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top