source

jQuery UI "$("#datepicker"). 날짜 선택기는 함수가 아닙니다."

lovecheck 2023. 4. 27. 22:31
반응형

jQuery UI "$("#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 코어 라이브러리가 정의되도록 javascript 포함 순서가 올바른지 확인합니다.저는 그런 문제들을 겪었습니다.

jQuery "$("#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 UI 세트에 파일이 없을 때 나타납니다.

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

되면 사할수있충있생경각우는되다고돌이용는경우▁use를 사용하면 됩니다.jQuery.noConflict()당신의 코드로.자세한 내용은 문서에 있습니다.

참조 마법 - JQUIRY용 단축키

항상 전체 "jQuery"를 입력하는 것을 좋아하지 않는 경우 다음과 같은 몇 가지 대체 바로 가기가 있습니다.

를 다른 가기 jQuery에 합니다.var $j = jQuery; 라이브러리를 이 가장 일 수 있습니다를 으로 덮어쓰지 코드 에서 $를할 수 .: " 음 기 를 술 를 " 수 을 사 " 있 습 " 니 " 다 " 할 " 사 " 용 " 다 " 서 " 내 " 용 " 하 " 에 " 블 " 면 " 부 " 록 " 코 " 드 " 고 " 지 " 않 " 쓰 " 으 " 적 " 어 " 영 " 로 구 " 덮 " 음 를 ▁of ▁inside ▁without ,

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

참고: 이 기법을 사용하면 $가 프로토타입의 $일 것으로 예상되는 이 캡슐화된 함수 내에서 프로토타입 메서드를 사용할 수 없으므로 해당 블록에서 jQuery만 사용하도록 선택하는 것입니다.DOM 준비 이벤트 인수 사용:

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

참고: 이 블록 안에서는 프로토타입 메소드를 사용할 수 없습니다.

그것은 문서의 끝에서 나온 것이고 당신에게 유용할 수 있습니다.

당연한 것부터 시작합니다.jquery-ui.js 파일은 잘 참조하고 있습니까?

Firebug의 Network 탭을 사용하여 로딩되었는지 확인하거나 Information\웹 개발자 도구 모음의 Javascript 코드를 봅니다.

1) Javascript 오류가 없는지 확인하고 2) 페이지에 #datepicker 요소가 있는지 확인하기 위해 Firebug를 사용해 본 적이 있습니까?

대부분 날짜 선택기 호출 전에 오류가 발생하여 날짜 선택기 호출을 실행할 수 없습니다.

이 게시물이 꽤 오래된 것으로 알고 있지만 참고로 날짜 선택기 버전을 업데이트하여 이 문제를 해결했습니다.

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

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

이를 페이지 하단으로 한 후 " 참조", "JS 참조"를 참조합니다.</body>태그가 고쳐줬어요.

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

최근에 이 문제가 발생했습니다. 문제는 제가 헤드 태그에 jQuery UI 파일을 포함시켰는데, 제가 사용하던 Telerik 라이브러리는 바디 태그 하단에 jQuery를 포함했습니다(따라서 jQuery를 다시 초기화하고 이전에 로드된 UI 플러그인을 언로드한 것으로 보입니다).

솔루션은 jQuery가 실제로 포함된 위치와 그 이후의 jQuery UI 스크립트를 확인하는 것이었습니다.

저는 스크립트 선언에서 "지연" 속성을 제거하는 것이 필요했습니다.

저는 방금 비슷한 문제에 부딪혔습니다. 참조를 폐쇄 , 트참자조닫를즉변태때을경서했그에힘동스립크즉▁(때▁self(,<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"를 사용해 보셨습니까?클라이언트 ID %>.".datepicker(); $("#txtDateElementId").datepicker(); JQuery를 사용하여 ID로 요소를 선택하는 경우.

이전 질문 - 의 최신 버전.NET(4.5.6) - 동일 이슈 - 새로운 답변

NuGet 사용

NuGet을 통해 다음을 설치해야 합니다.

  • jQuery
  • AsNet.ScriptManager.jQuery
  • jQuery.UI.합쳐진
  • AsNet.ScriptManager.jQuery.UI.합쳐진

여기서 설치 [도구 > NuGet Package Manager > 솔루션용 NuGet 패키지 관리]

그런 다음 jquery와 jquery.ui.combined를 사이트의 ScriptManager에 추가해야 합니다.사부님, 다음과 같이 보입니다.

    <asp:ScriptManager runat="server">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager>

이것으로 저의 같은 문제가 해결되었습니다.감사해요.

("#날짜 선택기").날짜 선택기가 함수가 아닙니다.

저도 며칠 전에 이 문제에 부딪혔습니다.파일에 jquery 링크가 두 번 이상 있기 때문일 수 있습니다.전체 파일에서 중복된 내용을 검색해 보십시오.

다음과 같이 표시됩니다.

<script src="https://code.jquery.com/jquery-1.12.1.js"></script>

1개를 보관합니다.<head></head>태그를 지정하고 나머지를 모두 제거합니다.이렇게 하면 문제가 해결됩니다.

Laravel을 사용하는 사용자의 경우 기본값app.js을 가지고 있습니다.defer그 성명서에
삭제

여기에 이미지 설명 입력

jQuery를 두 번 참조하면 문제가 발생할 수 있습니다.

코드에 JQuery UI가 포함되어 있어야 합니다. jQuery 스크립트 뒤에 붙여넣으십시오.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

1.12에는 몇 가지 취약점이 있고 Google은 아직 최신 버전을 호스팅하지 않기 때문에 더 높은 보안을 원한다면 PC에 버전 1.13을 다운로드할 수 있습니다.

잘못된 날짜 형식으로 인해 오류가 발생했습니다.

잘못된 코드:

<script>
    $('#targetDate').datepicker({
        format : 'dd/MM/yyyy'
    });
</script>

유효한 코드:

<script>
    $('#targetDate').datepicker({
        format : 'dd/mm/yyyy'
    });
</script>

주의:MM날짜의 형식이 올바른지 확인하십시오.도움이 되길 바랍니다!

저의 경우 다음 스크립트의 가져오기 순서를 변경하여 해결했습니다.이전(작업 아님):

작업 후:

언급URL : https://stackoverflow.com/questions/1212696/jquery-ui-datepicker-datepicker-is-not-a-function

반응형