Interfejs użytkownika jQuery „$ (” # datepicker „). datepicker nie jest funkcją”


125

Kiedy używam DatePicker, wtyczki UI jQuery, na istniejącej stronie .aspx otrzymuję błędy, które:

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

Jednak gdy kopiuję i wklejam ten sam kod, który tworzy i używa datePicker do pliku HTML, który również znajduje się w tym samym katalogu co strona aspx, działa bezbłędnie. To prowadzi mnie do założenia, że ​​na stronie aspx znajdują się pliki JS, które uniemożliwiają prawidłowe załadowanie plików DatePicker lub być może plików JS interfejsu użytkownika jQuery.

Czy ktoś może potwierdzić moje przekonania lub udzielić wskazówek, jak znaleźć winowajcę, który zakłóca działanie wtyczek interfejsu użytkownika jQuery?


Czy możesz wysłać odpowiedni kod jQuery
Russ Cam

W jaki sposób umieszczasz wtyczkę Datepicker na stronie - czy znajduje się ona w ScriptManagerProxy, czy piszesz ją bezpośrednio na stronie? Czy na pewno jest ładowany? Jeśli tak, jakie inne wtyczki dodajesz? Czy na pewno umieściłeś ui.core.js?
James Kolpack

12
Znalazłem problem. Żałuję, że nie znalazłem tego rozwiązania wczoraj, a nie godzinę po wysłaniu tego pytania. Kod JS, który napisałem, odwołuje się do pliku javascript jQuery i jQuery UI działającego jako moduł. Jego rodzic również odwołuje się do jQuery na dole tagu body (więc 2 odniesienia do jQuery). Ponieważ jQuery jest ponownie inicjowany po UI jQuery, interfejs użytkownika jQuery jest usuwany jako wtyczka, stąd mój kod nie mógł znaleźć wtyczki DatePicker.
spalony1ce

Ponieważ używam Webpack, musiałem zamiast tego użyć jquery-ui-bundle. stackoverflow.com/a/39230057/470749
Ryan

Odpowiedzi:


210

Z podobnym problemem zmagałem się godzinami. Okazało się wtedy, że jQuery zostało dołączone dwukrotnie, raz przez program, do którego dodawałem funkcję jQuery i raz przez nasz wewnętrzny debugger.


4
To też był mój problem. Miałem odniesienie do mojej własnej biblioteki jQuery wraz z CDN jQuery Tools, który nieświadomie zawierał jQuery.
DavGarcia,

To też był mój problem. Używam superfish i ładuje również jquery. Nie zauważyłem tego aż do teraz.
rrtx2000

45
Więc jakie rozwiązanie?
Henrique Ordine

8
@HenriqueOrdine sprawdź dokładnie, czy jQuery nie jest uwzględnione dwukrotnie na stronie.
Eugene van der Merwe

To też był mój problem. Używałem wspólnych zasobów w potoku zasobów railsów i zarówno deklarowałem jquery w moim pliku meta najwyższego poziomu (application.js), jak i miałem plik jquery min w moim folderze JS. Zadeklaruj dwukrotnie. Właśnie usunąłem deklarację jquery.
Mario

38

Jeśli istnieje inna biblioteka, która używa zmiennej $, możesz to zrobić:

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

Upewnij się również, że dołączenia javascript są w odpowiedniej kolejności, tak aby podstawowa biblioteka jquery została zdefiniowana przed jquery.ui. Miałem problemy z tą przyczyną.


Upewnij się również, że dołączenia javascript są w odpowiedniej kolejności, tak aby podstawowa biblioteka jquery została zdefiniowana przed jquery.ui. Miałem problemy z tą przyczyną << to jest dla mnie poprawna odpowiedź.
macaesar

22

Ten błąd pojawia się zwykle, gdy brakuje pliku z zestawu interfejsu użytkownika jQuery.

Dokładnie sprawdź, czy masz wszystkie pliki, pliki interfejsu użytkownika jQuery, a także CSS i obrazy, i czy znajdują się one w prawidłowo połączonej lokalizacji pliku / katalogu na serwerze.


Ta odpowiedź jest najbliższa rozwiązaniu, które opublikowałem.
spalony1ce

Uwaga dla siebie: upewnij się, że przełączając się z plików lokalnych na pliki CDN Google, faktycznie masz właściwy adres URL. To jest ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js, a nie ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery-ui.min.js, cholera.
neminem

17

jQuery „$ (” # datepicker ”). datepicker nie jest funkcją”

Rozwiązałem ten problem, umieszczając poniższe trzy pliki w sekcji treści formularza na końcu.

  <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
Ratujesz życie, jakoś ze wszystkich odpowiedzi, to właśnie TEN uratował mnie po 2 dniach nieustannej walki.
Tejas Jaggi

8

Jeśli uważasz, że istnieje konflikt, możesz użyć go jQuery.noConflict()w swoim kodzie. Szczegóły w dokumentacji .

MAGIA REFERENCYJNA - SKRÓTY DLA JQUERY

Jeśli nie lubisz cały czas wpisywać całego „jQuery”, możesz skorzystać z kilku alternatywnych skrótów:

Ponownie przypisz jQuery do innego skrótu var $j = jQuery;(może to być najlepsze podejście, jeśli chcesz używać różnych bibliotek). Użyj następującej techniki, która umożliwia użycie znaku $ wewnątrz bloku kodu bez trwałego nadpisywania $:

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

Uwaga: Jeśli użyjesz tej techniki, nie będziesz w stanie użyć metod Prototype wewnątrz tej funkcji zamkniętej, które oczekują, że $ będzie $ Prototype, więc dokonujesz wyboru, aby używać tylko jQuery w tym bloku. Użyj argumentu dla zdarzenia DOM ready:

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

Uwaga: Ponownie, wewnątrz tego bloku nie można używać metod prototypowych

To od końca dokumentacji i może ci się przydać


7

Wybierzmy najpierw oczywiste: czy dobrze odwołujesz się do pliku jquery-ui.js?

Spróbuj użyć karty sieciowej programu firebug, aby dowiedzieć się, czy jest załadowana, lub informacji \ Wyświetl kod javascript paska narzędzi Web Developer Toolbar.


3

Czy próbowałeś użyć Firebuga, aby 1) ustalić, że nie ma błędów JavaScript i 2) że na stronie istnieje element #datepicker?

Najprawdopodobniej wystąpił błąd przed wywołaniem datepicker, który uniemożliwia wykonanie wywołania datepicker.



1

Właśnie miałem ten problem i przesunąłem referencje JS i kod na dół strony, zanim </body>tag naprawił to za mnie.


1

Sprawdź także uprawnienia do katalogu, do którego pobierasz pliki. Z jakiegoś powodu, kiedy to pobrałem, domyślnie zostało zapisane w folderze bez dostępu! Wieki zajęło mi ustalenie, że to był problem, ale musiałem tylko zmienić uprawnienia do katalogu i jego zawartości - ustawiając go tak, aby WSZYSCY = TYLKO ODCZYT. Teraz działa świetnie.


1

Niedawno napotkałem ten problem - problem polegał na tym, że umieściłem pliki interfejsu użytkownika jQuery w tagu head, ale biblioteka Telerik, której używałem, zawierała jQuery na dole tagu body (w ten sposób najwyraźniej ponownie zainicjowałem jQuery i wyładowałem interfejs użytkownika wtyczki załadowane wcześniej).

Rozwiązaniem było ustalenie, gdzie faktycznie jest dołączane jQuery, a następnie włączenie skryptów interfejsu użytkownika jQuery.


0

Właśnie napotkałem podobny problem. Kiedy zmieniłem odwołanie do skryptu z samozamykających się tagów (tj. <script src=".." />) Na puste węzły (tj. <script src=".."></script>), Moje błędy zniknęły i mogłem nagle odwołać się do funkcji interfejsu użytkownika jQuery.

Wtedy nie zdawałem sobie sprawy, że to tylko pierdnięcie w mózgu, że nie zamknąłem go właściwie. (Publikuję to po prostu na wypadek, gdyby ktoś inny napotkany w wątku miał podobny problem.)


0

Niektóre pliki nie są ładowane, zanim zadzwonisz.

Na przykład: Twój kod:

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

Zmień na to:

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

0

Mogę rozwiązać ten problem, usuwając pakiet jquery w pliku _Layout.cshtml

nagłówek

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

Stopka

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

Zmień stopkę na

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

0

Czy próbowałeś użyć $ ("# <% = txtDateElementId.ClientID%>"). Datepicker (); zamiast $ ("# txtDateElementId"). datepicker (); podczas wybierania elementu według identyfikatora za pomocą JQuery.


-1

W moim przypadku zostało to rozwiązane poprzez zmianę kolejności importu następujących skryptów: Przed (Nie działa):

Po pracy):

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.