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

Quando uso o DatePicker, o plugin de interface do usuário do jQuery, em uma página .aspx existente, recebo erros que:

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

No entanto, quando copio e colo o mesmo código que cria e usa o datePicker em um arquivo HTML que também está no mesmo diretório da página aspx, ele funciona perfeitamente. Isso me leva a supor que existem alguns arquivos JS na página aspx que impedem que os arquivos JS da UI do datePicker ou talvez do jQuery sejam carregados corretamente.

Alguém pode confirmar minhas crenças ou fornecer dicas sobre como encontrar o culpado que está interferindo nos plugins de interface do usuário do jQuery?

Eu lutei com um problema semelhante por horas. Aconteceu que o jQuery foi incluído duas vezes, uma vez pelo programa em que eu estava adicionando uma função jQuery e uma vez pelo nosso depurador interno.

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

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

Verifique também se as inclusões do javascript estão na ordem correta, para que a biblioteca principal do jquery seja definida antes do jquery.ui. Eu tive que causar problemas.

Esse erro geralmente aparece quando um arquivo está faltando no conjunto de UI do jQuery.

Verifique se você possui todos os arquivos, os arquivos da interface do usuário do jQuery, bem como o CSS e as imagens, e se eles estão no local do arquivo / diretório vinculado corretamente no seu servidor.

jQuery "$ (" # datepicker "). datepicker não é uma função"

Corrigi o problema colocando os três arquivos abaixo na seção do 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" />

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

MÁGICA DE REFERÊNCIA - ATALHOS PARA SOLICITAÇÃO

Se você não gosta de digitar o "jQuery" completo o tempo todo, existem alguns atalhos alternativos:

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

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

Nota: Se você usar essa técnica, não poderá usar os métodos Prototype dentro dessa função capsulada que esperam que $ seja $ do Prototype, portanto, você pode optar por usar apenas jQuery nesse bloco. Use o argumento para o evento pronto para DOM:

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

Nota: Novamente, dentro desse bloco, você não pode usar métodos Prototype

Isso é do final dos documentos e pode ser útil para você

Escolha o óbvio primeiro: você está fazendo referência bem ao arquivo jquery-ui.js?

Tente usar a guia de rede do firebug para descobrir se está carregada ou o código javascript Information \ View da barra de ferramentas do desenvolvedor da Web.

Você 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, ocorreu um erro antes da chamada do datepicker que está impedindo a execução da chamada do datepicker.

Eu sei que este post é bastante antigo, mas, para referência, corrigi esse problema atualizando a versão do datepicker

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

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

Acabei de ter esse problema e movi as referências e o código JS para o final da página antes que a </body>tag o corrigisse.

Verifique também as permissões do diretório em que você baixa os arquivos. Por algum motivo, quando eu baixei isso, por padrão, ele foi salvo em uma pasta sem acesso permitido! Demorou uma eternidade para descobrir qual era o problema, mas eu apenas tive que alterar a permissão para o diretório e seu conteúdo - configurando-o para TODOS = LER SOMENTE. Funciona muito bem agora.

Encontrei esse problema recentemente - o problema era que eu havia incluído os arquivos da interface do usuário do jQuery na tag head, mas a biblioteca Telerik que eu estava usando incluía o jQuery na parte inferior da tag do corpo (aparentemente, reinicializando o jQuery e descarregando a interface do usuário plugins previamente carregados).

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

Acabei de encontrar um problema semelhante. Quando alterei minha referência de script de tags de fechamento automático (ou seja <script src=".." />) para nós vazios (ou seja <script src=".."></script>) , meus erros desapareceram e, de repente, pude referenciar as funções da interface do usuário do jQuery.

Naquela época, eu não sabia que isso era apenas um peido do meu cérebro que não o fechava corretamente para começar. (Estou postando isso simplesmente com a chance de alguém encontrar o problema.)

Alguns arquivos não carregam antes de você ligar.

Por exemplo: Seu código:

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

Mude para isto:

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

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

Cabeçalho

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

Você já tentou usar $ ("# <% = txtDateElementId.ClientID%>"). Datepicker (); em vez de $ ("# txtDateElementId"). datepicker (); ao selecionar um elemento pelo ID usando JQuery.

No meu caso, foi resolvido alterando a ordem de importação dos seguintes scripts: Antes (Não funciona):

Depois de trabalhar):