jQuery UI “$ (” # datepicker “). datepicker não é uma função”

Question

Quando eu uso DatePicker, plug-in interface do usuário do jQuery, em uma página .aspx existente recebo erros que:

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

No entanto, quando eu copiar e colar o mesmo código que cria e utiliza o datePicker para um arquivo HTML que é também no mesmo diretório que a página aspx, ele funciona perfeitamente. Isso me leva a supor que existem alguns arquivos JS na página aspx que está impedindo a datePicker ou talvez arquivos UI JS do jQuery para carregar corretamente.

Alguém pode confirmar a minha opinião ou fornecer qualquer dicas sobre como encontrar o culpado que está interferindo com plugins de interface do usuário do jQuery?

Answer 1

Eu lutava com um problema semelhante durante horas. Em seguida, descobriu-se que jQuery foi incluída duas vezes, uma pelo programa que eu estava adicionando uma função jQuery para e uma vez por nosso depurador in-house.

Answer 2

Se houver outra biblioteca que está usando o $ variável, você pode fazer isso:

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

Certifique-se também o seu javascript inclui estão na ordem correta para que a biblioteca núcleo jQuery é definida antes do jquery.ui. Eu tive que questões de causa.

Answer 3

Este erro geralmente aparece quando você está faltando um arquivo do conjunto jQuery UI.

Verifique com atenção se você tem todos os arquivos, o jQuery UI arquivos, bem como o CSS e imagens, e que eles estão no local do diretório corretamente ligados arquivo / no seu servidor.

Answer 4

Se você acha que existe um conflito que você pode usar jQuery.noConflict() em seu código. Os detalhes estão no docs .

REFERENCING Magic - atalhos para JQUERY

Se você não gosta de digitar o completo "JQuery" o tempo todo, há alguns atalhos alternativos:

Reassign jQuery para outro atalho var $j = jQuery; (Este pode ser o melhor abordagem se você deseja usar diferentes bibliotecas) Use a seguir técnica, que permite que você use $ dentro de um bloco de código sem sobrescrever permanentemente $:

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

Nota: Se você usar este técnica, você não será capaz de usar métodos protótipo no interior deste capsuled função que esperar $ para ser do protótipo $, então você está fazendo um escolha para usar somente jQuery em que quadra. Use o argumento para o DOM pronto evento:

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

Nota: Mais uma vez, dentro desse bloco que você não pode usar métodos de protótipo

Isso é a partir do final dos docs e pode ser útil para você

Answer 5

jQuery “$ (” # datepicker “). Datepicker não é uma função”

Eu tenho corrigido o problema, colocando as seguintes três arquivos na seção corpo do formulário no final.

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

Answer 6

Vá para o óbvio primeiro: Você está fazendo referência bem o arquivo jquery-ui.js?

Tente usar a guia rede de Firebug para descobrir se ele é carregado, ou o código javascript Information \ Vista do Web Developer Toolbar.

Answer 7

Você já tentou usar o Firebug para 1) determinar que não há erros de Javascript e 2) que o elemento #datepicker existe na página?

Provavelmente há um erro antes da chamada datepicker que está impedindo a chamada datepicker de execução.

Answer 8

Eu sei que este post é bastante antiga, mas para referência eu fixo este problema, atualizar a versão do datepicker

Vale a pena tentar isso também para horas Evitar de depuração.

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

Answer 9

Eu apenas tive este problema, e movendo-se as referências JS e código para a parte inferior da página antes da tag </body> fixa-lo para mim.

Answer 10

Além disso, verifique as permissões para o diretório que você baixar os arquivos para. Por alguma razão quando eu baixei este, por padrão, ele foi salvo em uma pasta que não tem acesso permitido! Não demorou muito para descobrir que era o problema, mas eu só tinha que alterar a permissão para o diretório e seu conteúdo - definindo-o para que todos = READ ONLY. Funciona muito bem agora.

Answer 11

Eu corri para este problema recentemente - a questão era que eu tinha incluído os arquivos jQuery UI na marca de cabeça, mas a biblioteca Telerik Eu estava usando incluído jQuery na parte inferior da tag body (assim, aparentemente, re-inicialização jQuery e descarga dos encaixes UI previamente carregadas).

A solução foi descobrir onde jQuery estava sendo incluído, e incluindo os scripts jQuery UI depois disso.

Answer 12

Eu apenas corri para um problema semelhante. Quando eu mudei de referência de script a partir de tags de fecho automático (ou seja, <script src=".." />) para nós vazios (ou seja, <script src=".."></script>) meus erros foi embora e de repente eu poderia referenciar as funções jQuery UI.

No momento, eu não sabia que isso era apenas um cérebro-peido de mim não fechá-lo corretamente, para começar. (Estou postando isso simplesmente na esperança de que ninguém vindo do outro lado da linha está a ter um problema semelhante.)

Answer 13

Alguns arquivos sem carga antes de telefonar.

Por exemplo: Seu código:

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

Alterar a esta:

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

Answer 14

Eu poderia corrigir esse problema removendo o pacote jquery na _Layout.cshtml

Header

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

Rodapé

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

Alterar rodapé para

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

Answer 15

Você já tentou usar . $ ( "# <% = TxtDateElementId.ClientID%>") datepicker (); ao invés de $ ( "# TxtDateElementId") datepicker (.); ao selecionar um elemento por ID usando JQuery.