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

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?

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.

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

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.

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

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ć

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.

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.

Wiem, że ten post jest dość stary, ale dla odniesienia naprawiłem ten problem, aktualizując wersję Datepicker

Warto też tego spróbować, aby uniknąć godzin debugowania.

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

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

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.

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.

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

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

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)

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

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

Po pracy):