jQuery UI "$ ("# datepicker "). datepicker는 함수가 아닙니다."

jQuery의 UI 플러그인 인 DatePicker를 사용할 때 기존 .aspx 페이지에서 다음과 같은 오류가 발생합니다.

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

그러나 datePicker를 만들고 사용하는 동일한 코드를 aspx 페이지와 동일한 디렉토리에있는 HTML 파일에 복사하여 붙여 넣으면 완벽하게 작동합니다. 이로 인해 aspx 페이지에 datePicker 또는 jQuery의 UI JS 파일이 제대로로드되지 않는 일부 JS 파일이 있다고 가정하게됩니다.

누구든지 내 신념을 확인하거나 jQuery의 UI 플러그인을 방해하는 범인을 찾는 팁을 제공 할 수 있습니까?

나는 몇 시간 동안 비슷한 문제로 고생했습니다. 그런 다음 jQuery가 jQuery 함수를 추가하는 프로그램에 의해 한 번, 사내 디버거에 의해 한 번, 두 번 포함 된 것으로 밝혀졌습니다.

$ 변수를 사용하는 다른 라이브러리가있는 경우 다음을 수행 할 수 있습니다.

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

또한 자바 스크립트 포함이 올바른 순서로되어 있는지 확인하여 jquery.ui 앞에 jquery 코어 라이브러리를 정의하십시오. 나는 문제를 일으켰습니다.

이 오류는 일반적으로 jQuery UI 세트에서 파일이 누락 된 경우에 나타납니다.

모든 파일, jQuery UI 파일, CSS 및 이미지가 있고 서버의 올바르게 연결된 파일 / 디렉터리 위치에 있는지 다시 확인합니다.

jQuery "$ ("# datepicker "). datepicker는 함수가 아닙니다."

마지막에있는 양식의 본문 섹션에 아래 세 개의 파일을 배치하여 문제를 해결했습니다.

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

충돌이 있다고 생각되면 jQuery.noConflict()코드에서 사용할 수 있습니다 . 자세한 내용은 문서에 있습니다.

참조 마법-JQUERY에 대한 단축키

항상 전체 "jQuery"를 입력하는 것을 좋아하지 않는 경우 몇 가지 대체 단축키가 있습니다.

jQuery를 다른 바로 가기에 다시 할당 var $j = jQuery;(다른 라이브러리를 사용하려는 경우 가장 좋은 방법 일 수 있음) 다음 기술을 사용하면 $를 영구적으로 덮어 쓰지 않고 코드 블록 내에서 $를 사용할 수 있습니다.

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

참고 :이 기술을 사용하면 $가 Prototype의 $ 일 것으로 예상하는이 캡슐화 된 함수 내에서 Prototype 메서드를 사용할 수 없으므로 해당 블록에서 jQuery 만 사용하도록 선택합니다. DOM 준비 이벤트에 대한 인수를 사용하십시오.

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

참고 : 다시 말하지만, 해당 블록 내에서 Prototype 메서드를 사용할 수 없습니다.

그것은 문서의 끝에서 왔으며 당신에게 유용 할 것입니다.

분명한 첫 번째로 가십시오 : jquery-ui.js 파일을 잘 참조하고 있습니까?

Firebug의 네트워크 탭을 사용하여로드되었는지 확인하거나 웹 개발자 도구 모음의 Information \ View javascript 코드를 사용해보십시오.

Firebug를 사용하여 1) 자바 스크립트 오류가 없는지 확인하고 2) 페이지에 #datepicker 요소가 있는지 확인한 적이 있습니까?

datepicker 호출이 실행되지 못하게하는 오류가 datepicker 호출 전에있을 가능성이 높습니다.

이 게시물이 꽤 오래되었다는 것을 알고 있지만 참고 로 datepicker 버전을 업데이트 하여이 문제를 해결했습니다.

몇 시간의 디버깅을 피하기 위해 시도해 볼 가치가 있습니다.

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

나는 방금이 문제가 있었고 </body>태그가 나를 위해 수정 하기 전에 JS 참조와 코드를 페이지 하단으로 이동 했습니다.

또한 파일을 다운로드하는 디렉토리에 대한 권한도 확인하십시오. 어떤 이유로 다운로드했을 때 기본적으로 액세스가 허용되지 않는 폴더에 저장되었습니다! 그것이 문제라는 것을 알아내는 데는 오랜 시간이 걸렸지 만 디렉토리와 그 내용에 대한 권한을 변경해야했습니다. EVERYONE = READ ONLY로 설정했습니다. 지금 잘 작동합니다.

최근에이 문제가 발생했습니다. 문제는 head 태그에 jQuery UI 파일을 포함했지만 내가 사용하고 있던 Telerik 라이브러리에는 body 태그 하단에 jQuery가 포함되어 있다는 것입니다 (따라서 jQuery를 다시 초기화하고 UI를 언로드하는 것). 이전에로드 된 플러그인).

해결책은 jQuery가 실제로 어디에 포함되어 있는지 확인하고 그 후에 jQuery UI 스크립트를 포함하는 것이 었습니다.

비슷한 문제가 발생했습니다. 스크립트 참조를 자체 닫는 태그 (예 :)에서 <script src=".." />빈 노드 (예 :)로 변경하면 <script src=".."></script>오류가 사라지고 갑자기 jQuery UI 함수를 참조 할 수 있습니다.

그 당시 나는 이것이 시작을 위해 제대로 닫히지 않은 나의 뇌 방울이라는 것을 깨닫지 못했습니다. (나는 스레드를 접하는 다른 사람이 비슷한 문제를 겪고있을 가능성에 대해 간단히 게시하고 있습니다.)

호출하기 전에 일부 파일이로드되지 않습니다.

예 : 코드 :

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

이것으로 변경 :

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

_Layout.cshtml에서 jquery 번들을 제거하면이 문제를 해결할 수 있습니다.

헤더

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

보행인

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

바닥 글을 다음으로 변경

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

$ ( "# <% = txtDateElementId.ClientID %>"). datepicker ();를 사용해 보셨습니까? $ ( "# txtDateElementId"). datepicker (); 대신 JQuery를 사용하여 ID로 요소를 선택할 때.

제 경우에는 다음 스크립트의 가져 오기 순서를 변경하여 해결되었습니다. Before (Not work) :

(근무) 이후 :