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

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?

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.

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.

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.

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

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

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.

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.

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

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.

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.

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.

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

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

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)

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

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

Dopo il lavoro):