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

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?

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.

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.

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.

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

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

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.

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

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

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.

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.

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.

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

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

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)

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

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

Despues de trabajar):