Interfaccia jQuery "$ (" # datepicker "). datepicker non è una funzione"


125

Quando uso DatePicker, plug-in dell'interfaccia utente di jQuery, in una pagina aspx esistente ricevo errori che:

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

Tuttavia, quando copio e incollo lo stesso codice che crea e usa datePicker in un file HTML che si trova anche nella stessa directory della pagina aspx, funziona perfettamente. Questo mi porta a supporre che ci siano alcuni file JS nella pagina aspx che impediscono il corretto caricamento dei file JS dell'interfaccia utente di datePicker o jQuery.

Qualcuno può confermare le mie convinzioni o fornire qualche suggerimento su come trovare il colpevole che interferisce con i plugin dell'interfaccia utente di jQuery?


Puoi pubblicare il relativo codice jQuery per favore
Russ Cam

In che modo includi il plug-in datepicker nella pagina: si trova in uno ScriptManagerProxy o lo scrivi direttamente nella pagina? Sei sicuro che sia in fase di caricamento? In tal caso, quali altri plugin stai includendo? Sei sicuro di aver incluso ui.core.js?
James Kolpack,

12
Ho trovato il problema. Vorrei aver trovato questa soluzione ieri invece di 1 ora dopo aver pubblicato questa domanda. Il codice JS che ho scritto fa riferimento a jQuery e jQuery UI javascript file ha funzionato come un modulo. Il suo genitore fa anche riferimento a jQuery nella parte inferiore del tag body (quindi 2 riferimenti a jQuery). Poiché jQuery viene reinizializzato dopo l'interfaccia utente di jQuery, l'interfaccia utente di jQuery viene cancellata come plug-in, quindi il mio codice non è riuscito a trovare il plug-in DatePicker.
bruciato il

Dato che sto usando Webpack, ho dovuto usare invece jquery-ui-bundle. stackoverflow.com/a/39230057/470749
Ryan,

Risposte:


210

Ho lottato con un problema simile per ore. Si è poi scoperto che jQuery è stato incluso due volte, una volta dal programma in cui stavo aggiungendo una funzione jQuery e una volta dal nostro debugger interno.


4
Anche questo era il mio problema. Avevo un riferimento alla mia libreria jQuery insieme alla CDN di jQuery Tools che includeva inconsapevolmente jQuery.
DavGarcia,

Questo è stato anche il mio problema. Sto usando superfish e stava anche caricando jquery. Non l'ho notato fino ad ora.
rrtx2000,

45
Quindi qual è la soluzione?
Henrique Ordine,

8
@HenriqueOrdine ricontrolla che jQuery non sia incluso due volte nella pagina.
Eugene van der Merwe,

Questo era anche il mio problema. Stavo usando le risorse comuni all'interno della pipeline delle risorse di rotaie e stavo entrambi dichiarando jquery nel mio meta file di livello superiore (application.js) E avevo un file min jquery nella mia cartella JS. Doppio-dichiarare. Ho appena rimosso la dichiarazione jquery.
Mario,

38

Se esiste un'altra libreria che utilizza la variabile $, è possibile effettuare ciò:

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

Assicurati anche che le tue inclusioni javascript siano nell'ordine corretto, quindi la libreria core jquery è definita prima di jquery.ui. Ho avuto problemi di causa.


Assicurati anche che le tue inclusioni javascript siano nell'ordine corretto, quindi la libreria core jquery è definita prima di jquery.ui. Ho avuto problemi di causa << che è la risposta corretta per me.
macaesar,

22

Questo errore si verifica in genere quando manca un file dal set di UI jQuery.

Controlla di avere tutti i file, i file dell'interfaccia utente jQuery, nonché i CSS e le immagini e che si trovano nella posizione corretta di file / directory sul tuo server.


Questa risposta è la più vicina alla soluzione che ho pubblicato.
burnt1ce

Nota per sé: assicurati che nel passaggio da file locali a file CDN di Google, tu abbia effettivamente l'URL giusto. È ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js, non ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery-ui.min.js, Dannalo.
neminem,

17

jQuery “$ (” # datepicker “). datepicker non è una funzione”

Ho risolto il problema inserendo i tre file seguenti nella sezione del corpo del modulo alla fine.

  <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
Sei un salvavita, in qualche modo di tutte le risposte, è stato QUESTO che mi ha salvato dopo 2 giorni di lotta senza sosta.
Tejas Jaggi,

8

Se ritieni che ci sia un conflitto, puoi usarlo jQuery.noConflict()nel tuo codice. I dettagli sono nei documenti .

MAGIA DI RIFERIMENTO - SCORCIATOIE PER JQUERY

Se non ti piace digitare l'intero "jQuery" per tutto il tempo, ci sono alcune scorciatoie alternative:

Riassegna jQuery a un altro collegamento var $j = jQuery;(questo potrebbe essere l'approccio migliore se desideri utilizzare librerie diverse) Usa la seguente tecnica, che ti consente di usare $ all'interno di un blocco di codice senza sovrascrivere permanentemente $:

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

Nota: se usi questa tecnica, non sarai in grado di usare i metodi Prototype all'interno di questa funzione con capsula che prevedono $ come $ Prototype, quindi stai facendo la scelta di usare solo jQuery in quel blocco. Utilizzare l'argomento per l'evento pronto per DOM:

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

Nota: anche in questo blocco non è possibile utilizzare i metodi prototipo

Questo è dalla fine dei documenti e potrebbe esserti utile


7

Vai per ovvio prima: stai facendo bene riferimento al file jquery-ui.js?

Prova a utilizzare la scheda di rete di firebug per scoprire se è caricato o il codice javascript Informazioni \ Visualizza della barra degli strumenti per sviluppatori Web.


3

Hai provato a utilizzare Firebug per 1) determinare che non ci sono errori Javascript e 2) che l'elemento #datepicker esiste sulla pagina?

Molto probabilmente c'è un errore prima della chiamata di datepicker che impedisce l'esecuzione della chiamata di datepicker.


2

So che questo post è piuttosto vecchio, ma per riferimento ho risolto questo problema aggiornando la versione di datepicker

Vale la pena provare anche questo per evitare ore di debug.

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


2
Questo non è applicabile al datepicker dell'interfaccia utente di Jquery. Bootstrap Datepicker è un animale completamente diverso.
RedSands,

1

Ho appena avuto questo problema e ho spostato i riferimenti e il codice JS nella parte inferiore della pagina prima che il </body>tag lo risolvesse per me.


1

Controlla anche le autorizzazioni per la directory in cui scarichi i file. Per qualche motivo quando l'ho scaricato, per impostazione predefinita è stato salvato in una cartella senza accesso consentito! Ci è voluta un'eternità per capire che era il problema, ma dovevo solo cambiare l'autorizzazione per la directory e il suo contenuto - impostandola su TUTTI = SOLO LEGGERE. Funziona benissimo ora.


1

Di recente ho riscontrato questo problema: il problema era che avevo incluso i file dell'interfaccia utente jQuery nel tag head, ma la libreria Telerik che stavo usando includeva jQuery nella parte inferiore del tag body (quindi apparentemente reinizializza jQuery e scarica l'interfaccia utente plugin precedentemente caricati).

La soluzione era scoprire dove era effettivamente incluso jQuery e in seguito includere gli script dell'interfaccia utente jQuery.


0

Ho appena riscontrato un problema simile. Quando ho cambiato il riferimento al mio script da tag a chiusura automatica (ad es. <script src=".." />) A nodi vuoti (ad es.<script src=".."></script> ) I miei errori sono scomparsi e ho potuto improvvisamente fare riferimento alle funzioni dell'interfaccia utente di jQuery.

A quel tempo, non mi ero reso conto che questa era solo una mia scoreggia cerebrale che non chiudeva correttamente per cominciare. (Sto pubblicando questo semplicemente sulla possibilità che qualcun altro abbia incontrato il thread abbia un problema simile.)


0

Alcuni file non vengono caricati prima di chiamare.

Ad esempio: il tuo codice:

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

Cambia in questo:

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

0

Potrei risolvere questo problema rimuovendo il bundle jquery su _Layout.cshtml

Intestazione

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

footer

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

Cambia piè di pagina in

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

0

Hai provato a usare $ ("# <% = txtDateElementId.ClientID%>"). Datepicker (); invece di $ ("# txtDateElementId"). datepicker (); quando si seleziona un elemento tramite ID utilizzando JQuery.


-1

Nel mio caso, è stato risolto modificando l'ordine di importazione dei seguenti script: Prima (non funziona):

Dopo il lavoro):

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.