jQuery UI "$ (" # datepicker "). datepicker no es una función"


125

Cuando uso DatePicker, el complemento de interfaz de usuario de jQuery, en una página .aspx existente obtengo errores que:

$("#datepicker").datepicker is not a function

Sin embargo, cuando copio y pego el mismo código que crea y usa datePicker en un archivo HTML que también está en el mismo directorio que la página aspx, funciona perfectamente. Esto me lleva a suponer que hay algunos archivos JS en la página aspx que impiden que los archivos datePicker o quizás JI UI JS se carguen correctamente.

¿Alguien puede confirmar mis creencias o proporcionar algún consejo para encontrar al culpable que interfiere con los complementos de interfaz de usuario de jQuery?


¿Puede publicar el código jQuery relevante por favor
Russ Cam

¿Cómo incluye el complemento datepicker en la página? ¿Está en un ScriptManagerProxy o lo está escribiendo directamente en la página? ¿Estás seguro de que se está cargando? Si es así, ¿qué otros complementos está incluyendo? ¿Estás seguro de que has incluido ui.core.js?
James Kolpack el

12
Encontré el problema. Desearía haber encontrado esta solución ayer en lugar de una hora después de publicar esta pregunta. El código JS que he escrito hace referencia a jQuery y jQuery UI javascript file actuó como un módulo. Su padre también hace referencia a jQuery en la parte inferior de la etiqueta del cuerpo (2 referencias a jQuery). Dado que jQuery se reinicia después de jQuery UI, jQuery UI se borra como un complemento, por lo tanto, mi código no pudo encontrar el complemento DatePicker.
burnt1ce

Como estoy usando Webpack, necesitaba usar jquery-ui-bundle en su lugar. stackoverflow.com/a/39230057/470749
Ryan

Respuestas:


210

Luché con un problema similar durante horas. Luego resultó que jQuery se incluyó dos veces, una por el programa al que estaba agregando una función jQuery y otra por nuestro depurador interno.


44
Este fue mi problema también. Tenía una referencia a mi propia biblioteca jQuery junto con jQuery Tools CDN que sin saberlo incluía jQuery.
DavGarcia

Este también fue mi problema. Estoy usando superfish y también estaba cargando jquery. No lo noté hasta ahora.
rrtx2000

45
Entonces, ¿cuál es la solución?
Henrique Ordine

8
@HenriqueOrdine verifica que jQuery no esté incluido dos veces en la página.
Eugene van der Merwe

Este también fue mi problema. Estaba usando activos comunes dentro de la tubería de activos de rails y declaraba jquery en mi metaarchivo de nivel superior (application.js) Y tenía un archivo jquery min en mi carpeta JS. Doble declaración. Acabo de eliminar la declaración jquery.
Mario

38

Si hay otra biblioteca que usa la variable $, puede hacer esto:

var $j = jQuery.noConflict();
$j("#datepicker").datepicker();

También asegúrese de que sus javascript incluidos estén en el orden correcto para que la biblioteca jquery core esté definida antes que jquery.ui. He tenido que causar problemas.


También asegúrese de que sus javascript incluidos estén en el orden correcto para que la biblioteca jquery core esté definida antes que jquery.ui. He tenido problemas de causa << esa es la respuesta correcta para mí.
macaesar

22

Este error generalmente aparece cuando falta un archivo del conjunto de IU jQuery.

Vuelva a comprobar que tiene todos los archivos, los archivos de la interfaz de usuario jQuery, así como el CSS y las imágenes, y que están en la ubicación del directorio / archivo correctamente enlazado en su servidor.


Esta respuesta es la más cercana a la solución que publiqué.
burnt1ce

Nota personal: asegúrese de que al cambiar de archivos locales a archivos CDN de Google, tenga la URL correcta. Es ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js, no ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery-ui.min.js, Déngalo.
neminem

17

jQuery "$ (" # datepicker "). datepicker no es una función"

He solucionado el problema colocando los tres archivos a continuación en la sección del cuerpo del formulario al final.

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

1
Eres un salvavidas, de alguna manera de todas las respuestas, fue ESTE el que me salvó después de 2 días de lucha sin parar.
Tejas Jaggi

8

Si crees que hay un conflicto, puedes usarlo jQuery.noConflict()en tu código. Los detalles están en los documentos .

MAGIA DE REFERENCIA: ACCESO CORTO PARA JQUERY

Si no le gusta escribir todo el "jQuery" todo el tiempo, hay algunos atajos alternativos:

Reasigne jQuery a otro acceso directo var $j = jQuery;(este podría ser el mejor enfoque si desea usar diferentes bibliotecas) Use la siguiente técnica, que le permite usar $ dentro de un bloque de código sin sobrescribir permanentemente $:

(function($) { /* some code that uses $ */ })(jQuery)

Nota: Si utiliza esta técnica, no podrá utilizar los métodos de Prototype dentro de esta función encapsulada que esperan que $ sea Prototype's $, por lo que está eligiendo usar solo jQuery en ese bloque. Utilice el argumento para el evento DOM listo:

jQuery(function($) { /*some code that uses $ */ });

Nota: Una vez más, dentro de ese bloque no puedes usar métodos Prototype

Eso es del final de los documentos y puede ser útil para usted


7

Primero ve lo obvio: ¿estás haciendo referencia bien al archivo jquery-ui.js?

Intente usar la pestaña de red de firebug para encontrar si está cargada, o el código JavaScript de Information \ View de la barra de herramientas del desarrollador web.


3

¿Has intentado usar Firebug para 1) determinar que no hay errores de Javascript y 2) que el elemento #datepicker existe en la página?

Lo más probable es que haya un error antes de la llamada datepicker que impide que se ejecute la llamada datepicker.


2

Sé que esta publicación es bastante antigua, pero como referencia solucioné este problema actualizando la versión de datepicker

Vale la pena intentarlo también para evitar horas de depuración.

https://cdnjs.com/libraries/bootstrap-datepicker


2
Esto no es aplicable a Jquery UI datepicker. Bootstrap datepicker es un animal completamente diferente.
RedSands

1

Acabo de tener este problema y moví las referencias y el código JS hacia la parte inferior de la página antes de que la </body>etiqueta me lo arreglara.


1

También verifique los permisos para el directorio en el que descarga los archivos. Por alguna razón, cuando descargué esto, ¡por defecto se guardó en una carpeta sin acceso permitido! Me llevó una eternidad descubrir que ese era el problema, pero solo tuve que cambiar el permiso para el directorio y su contenido, configurándolo para que TODOS = LEER SOLAMENTE. Funciona muy bien ahora.


1

Me encontré con este problema recientemente: el problema era que había incluido los archivos de la interfaz de usuario jQuery en la etiqueta principal, pero la biblioteca de Telerik que estaba usando incluía jQuery en la parte inferior de la etiqueta del cuerpo (aparentemente reinicializando jQuery y descargando la interfaz de usuario complementos cargados previamente).

La solución fue averiguar dónde se incluía realmente jQuery, e incluir los scripts de jQuery UI después de eso.


0

Acabo de encontrarme con un problema similar. Cuando cambié mi referencia de script de etiquetas de cierre automático (es decir,<script src=".." /> ) a nodos vacíos (es decir, <script src=".."></script>) mis errores desaparecieron y de repente pude hacer referencia a las funciones de jQuery UI.

En ese momento, no me di cuenta de que esto era solo un pedo de mi parte al no cerrarlo correctamente para empezar. (Estoy publicando esto simplemente por la posibilidad de que alguien que se encuentre con el hilo tenga un problema similar).


0

Algunos archivos no se cargan antes de llamar.

Por ejemplo: su código:

<%= javascript_include_tag "distpicker.min" %>
<%= javascript_include_tag "distpicker.data.min" %>

Cambiar a esto:

<%= javascript_include_tag "distpicker.data.min" %>
<%= javascript_include_tag "distpicker.min" %>

0

Podría solucionar este problema eliminando el paquete jquery en _Layout.cshtml

Encabezamiento

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/kendo/2015.2.902/kendo.all.min.js"></script>
    ...

Pie de página

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

Cambiar pie de página a

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

0

¿Has intentado usar $ ("# <% = txtDateElementId.ClientID%>"). Datepicker (); en lugar de $ ("# txtDateElementId"). datepicker (); al seleccionar un elemento por ID usando JQuery.


-1

En mi caso, se resolvió cambiando el orden de importación de los siguientes scripts: Antes (no funciona):

Despues de trabajar):

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.