¿Conflictos de la Fundación Zurb con JQUERY UI AUTOCOMPLETLE?

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

  •  11-12-2019
  •  | 
  •  

Pregunta

No puedo obtener un autocompletar de jquery-ui para trabajar después de cargar la Fundación Zurb 3.1.

¿Alguien los llevó a trabajar juntos o encontró otro complemento autocompletar que funciona con la fundación? 

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

¿Fue útil?

Solución

Funciona muy bien en esa página, pero si usa otros componentes como la órbita o revela, y tiene un sitio construido sobre la parte superior de la Fundación, entonces Foundation.min.js es necesario.

Foundation.min.js incluye modernizr, jquery biblioteca, órbita, revelación, herramientas.Para que pueda usar la biblioteca de jquery incluida en Foundation.min.js (la Fundación 3.2 incluye jquery 1.8.2).Dejé esas importaciones al final del cuerpo y luego agregué lo que necesitaba (jQuery UI para el autocompletar y DatePicker y luego el script), así que terminó así: 

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

Los scripts van en el siguiente orden

  1. Foundation.min.js contiene jquery 1.8
  2. Foundation.min.js necesita jquery biblioteca
  3. Script personalizado necesita jquery biblioteca y jQuery ui

Otros consejos

Hay un conflicto con las bibliotecas del marco de la Fundación que utilizan JQuery.Para utilizar jquery ui con la Fundación Zurb Framework, deberá eliminar las dos importaciones al final del Código:

Foundation.min.js y javascripts / app.js

Puede verlo trabajando en mi código de muestra (debe incluir recursos de la Fundación para verlo funcionando (Foundation.min.csss, app.css y 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>

Me enfrenté el mismo problema con Foundation.min.js y jquery ui .

Luego leí la respuesta de @ Snekkke y lo probé ...

Funcionó para una función de UI, pero no con todas (eso podría ser debido a jQuery ui y jquery ( con Foundation.min.js ) no están trabajando bien bien).

Así que he eliminado el código jquery de Foundation.min.js y agregó Google CDN para jquery..order fue ...

  1. jquery
  2. Foundation.min.js
  3. jquery ui

    ahora está funcionando bien para mí ...

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top