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

125

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?

burnt1ce
fonte
Você pode postar o código jQuery relevante, por favor #
Russ Cam
Como você está incluindo o plug-in datepicker na página - está em um ScriptManagerProxy ou está escrevendo diretamente na página? Tem certeza de que está sendo carregado? Se sim, quais outros plugins você está incluindo? Tem certeza de que incluiu ui.core.js?
James Kolpack 31/07/2009
12
Eu encontrei o problema Eu gostaria de ter encontrado esta solução ontem, em oposição a uma hora depois de postar esta pergunta. O código JS que eu escrevi faz referência ao arquivo jQuery e jQuery UI javascript agiu como um módulo. Seu pai também faz referência ao jQuery na parte inferior da tag body (portanto, 2 referências ao jQuery). Como o jQuery é reinicializado após a interface do usuário do jQuery, a interface do usuário do jQuery é eliminada como um plug-in, portanto, por que meu código não conseguiu encontrar o plug-in DatePicker.
burnt1ce
Como estou usando o Webpack, eu precisava usar o jquery-ui-bundle. stackoverflow.com/a/39230057/470749
Ryan

Respostas:

210

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.

Eugene van der Merwe
fonte
4
Este foi o meu problema também. Eu tinha uma referência à minha própria biblioteca jQuery, juntamente com o CDN jQuery Tools, que, sem saber, incluía o jQuery.
DavGarcia
Este também foi o meu problema. Estou usando o superfish e ele também estava carregando o jquery. Eu não notei isso até agora.
precisa saber é o seguinte
45
Então, qual a solução?
Henrique Ordine
8
@HenriqueOrdine verifique se o jQuery não está incluído duas vezes na página.
Eugene van der Merwe
Este também foi o meu problema. Eu estava usando ativos comuns no pipeline de ativos do Rails e estava declarando jquery no meu meta arquivo de nível superior (application.js) E tinha um arquivo jquery min na minha pasta JS. Declaração dupla. Acabei de remover a declaração jquery.
Mario
38

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.

MacAnthony
fonte
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 << que é a resposta correta para mim.
Macaesar 17/10
22

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.

aleatória
fonte
Esta resposta está mais próxima da solução que eu publiquei.
31511
Nota para si mesmo: verifique se, ao mudar de arquivos locais para os arquivos CDN do Google, você realmente possui o URL correto. É ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js, não ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery-ui.min.js, que droga.
neminem
17

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" />
Krishna
fonte
1
Você é um salva-vidas, de alguma forma de todas as respostas, foi ESTE que me salvou após 2 dias de luta sem parar.
Tejas Jaggi 18/06
8

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ê

AutomatedTester
fonte
7

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.

eKek0
fonte
3

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.

1kevgriff
fonte
2

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

Yannickv
fonte
2
Isso não se aplica ao datepicker da interface do usuário do Jquery. O datepicker do Bootstrap é um animal totalmente diferente.
RedSands 10/10/19
1

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.

Banjer
fonte
1

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.

Matthew Fries
fonte
1

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.


fonte
0

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

Peter Bernier
fonte
0

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" %>
David tsang
fonte
0

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)
jaimenino
fonte
0

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

Emil Filip
fonte
-1

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

Depois de trabalhar):

Matías W.
fonte