jQuery UI "$ (" # selector de fechas ")

Question

Cuando uso DatePicker, plugin de interfaz de usuario jQuery, en una página .aspx existente tengo errores que selector de fechas no es una función.":

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

Sin embargo, cuando Copio y pego el mismo código que crea y usa el datePicker en un archivo HTML que también está en el mismo directorio que la página aspx, funciona sin problemas. Esto me lleva a suponer que hay algunos archivos JS en la página aspx que impiden que datePicker o tal vez los archivos JQ UI de jQuery se carguen correctamente.

¿Alguien puede confirmar mis creencias o dar algún consejo sobre cómo encontrar el culpable que interfiere con los complementos de UI de jQuery?

Answer 1

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

Answer 2

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

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

También asegúrese de que su Javascript incluye están en el orden correcto para la biblioteca central jQuery se define antes de la jQuery. ui. He tenido problemas con eso.

Answer 3

Si cree que hay un conflicto, puede usar jQuery.noConflict() en su código. Los detalles están en el docs.

Hacer referencia MAGIC - atajos para JQUERY

Si no te gusta escribir el pleno "jQuery" todo el tiempo, hay algunas alternativas: atajos

Reasignar jQuery a otro atajo var $j = jQuery; (Este podría ser el mejor enfoque si desea utilizar diferentes bibliotecas) Utilice la siguiente técnica , que le permite usar $ en el interior de un bloque de código sin sobrescribir permanentemente $:

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

Nota: Si se utiliza esta técnica , usted no será capaz de utilizar métodos de prototipo dentro de este capsuled función que esperar $ para que sea Prototype $, por lo que está haciendo una elección para usar solo jQuery en ese bloque . Utilice el argumento al evento DOM listo :

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

Nota: Una vez más, dentro de ese bloque no se puede utilizar métodos de prototipo

Thats desde el final de los documentos y podría serle útil

Answer 4

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

Lo más probable es que haya un error antes de la llamada datepicker que impida la ejecución de la llamada datepicker.

Answer 5

Este error suele aparecer cuando falta un archivo del conjunto de jQuery UI.

Comprueba dos veces que tienes todos los archivos, los archivos jQuery UI, así como el CSS y las imágenes, y que están en la ubicación del archivo/directorio correctamente enlazados en tu servidor.

Answer 6

Vaya a lo obvio primero: ¿Hace referencia al archivo jquery-ui.js?

Pruebe usar la pestaña de red de firebug para encontrar si está cargada, o el código de información \ Vista de JavaScript de la barra de herramientas de desarrollador web.

Answer 7

Acabo de tener este problema, y ​​mover las referencias JS y el código hacia la parte inferior de la página antes de que la etiqueta </body> lo haya solucionado.

Answer 8

También verifique los permisos para el directorio donde descargue los archivos. Por alguna razón, cuando descargué esto, de manera predeterminada, se guardó en una carpeta sin acceso permitido. Me tomó una eternidad darme cuenta de que ese era el problema, pero solo tuve que cambiar el permiso para el directorio y su contenido, configurándolo para TODOS = LEER SOLAMENTE. Funciona muy bien ahora.

Answer 9

Me encontré con este problema recientemente: el problema era que había incluido los archivos jQuery UI en la etiqueta head, pero la biblioteca Telerik que estaba usando incluía jQuery en la parte inferior de la etiqueta body (aparentemente reiniciando jQuery) y descargar los complementos de UI previamente cargados).

La solución fue descubrir dónde se estaba incluyendo jQuery en realidad, e incluir las secuencias de comandos de jQuery UI después de eso.

Answer 10

Acabo de tropezar con un problema similar. Cuando cambié la referencia de mi script de las 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 la interfaz de usuario jQuery.

En ese momento, no me di cuenta de que esto era solo un codazo de mi cerebro si no lo cerraba correctamente para empezar. (Estoy publicando esto simplemente en caso de que alguien más se encuentre con un problema similar.)

Answer 11

Algunos archivos no se cargan antes de llamar.

Por ejemplo: Su código:

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

Cambio a esta:

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

Answer 12

Sé que este post es bastante antiguo, pero para referencia me fijo este problema la actualización de la versión de datepicker

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

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

Answer 13

jQuery “$ (” # selector de fechas “).datepicker no es una función "

He solucionado el problema al colocar los siguientes tres archivos 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" /> 

Answer 14

pude solucionar este problema quitando el paquete de jQuery en la _Layout.cshtml

Cabecera

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

Cambio pie de página a

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