1

estou com um problema em um seletor de filtro, quando escolho uma cidade para filtrar informações sobre ela, o console do navegador me mostra o erro abaixo. Não sei dizer qual versão do Jquery está sendo usada no site, estou caindo de paraquedas no mundo do js rs.

Em localhost com o jquery 2 funcionou perfeitamente, depois que subi para o servidor, começou a dar esse erro e parou de funcionar o filtro.

Jquery utilizado no site: https://jsfiddle.net/gLep8kdn/

Código completo do custom js https://jsfiddle.net/0kLjj0y5/

Uncaught TypeError: $ is not a function at HTMLSelectElement.filterList (custom.js:3)

Código

$('select[name="list_citys"]').change(filterList);   3 ª linha

function filterList(e) {
var value = e.target.value;
$(".list_citys_shop .new-citys").parent().parent().removeClass("hidden");
if (value == "all_city") $(".list_citys_shop .new-citys").slideDown();
else {
    $(".list_citys_shop .new-citys").slideUp();

    $(".list_citys_shop ul:not([data-category*=" + value + "])").parent().addClass("hidden");
    $(".list_citys_shop ul[data-category*=" + value + "]").find(".new-citys").stop().slideDown();
  }                                                                           
}
15
  • 2
    Provavelmente o jQuery não foi carregado. Commented 5/05/2017 às 17:22
  • Está sendo carregado normalmente, pois as demais funções do site funcionam.
    – Leonardo
    Commented 5/05/2017 às 17:23
  • Tem como colocar todo o código JS? O que tem nas duas linhas anteriores à linha que dá o erro?
    – Woss
    Commented 5/05/2017 às 17:26
  • 1
    O código no jsfiddle dá o mesmo erro, pelo mesmo (provável) motivo pelo qual dá erro no seu site. Verifique o ponto no qual indica o caminho para o jQuery. Commented 5/05/2017 às 17:35
  • 2
    @AndersonCarlosWoss é algum script que esta sobrescrevendo o $, talvez o Angular.js
    – Syzoth
    Commented 5/05/2017 às 17:54

2 Respostas 2

7

Provavelmente é a ordem que adicionou o jQuery, a ordem no HTML deve ser sempre esta:

<script src="caminho do jquery/jquery.js"></script>
<script src="caminho do jquery/plugin-jquery1.js"></script>
<script src="caminho do jquery/plugin-jquery2.js"></script>
<script src="caminho do jquery/plugin-jquery3.js"></script>
<script src="/assets/custom.js"></script>

Se estiver usando bootstrap, então a ordem será esta:

<script src="caminho do jquery/jquery.js"></script>
<script src="caminho do jquery/bootstrap.js"></script>
<script src="caminho do jquery/plugin-jquery1.js"></script>
<script src="caminho do jquery/plugin-jquery2.js"></script>
<script src="caminho do jquery/plugin-jquery3.js"></script>
<script src="/assets/custom.js"></script>

Se fizer algo como isto:

<script src="caminho do jquery/bootstrap.js"></script>
<script src="caminho do jquery/jquery.js"></script>
<script src="/assets/custom.js"></script>

Ou assim:

<script src="/assets/custom.js"></script>
<script src="caminho do jquery/jquery.js"></script>

Vai falhar, porque o bootstrap usa o jQuery mas na ordem do carregamento o jQuery ainda não foi solicitado.

Então lembre-se, o jQuery deve vir antes de tudo

Note que se você estiver usando o atributo async pode também ocasionar falhas, como por exemplo:

<script async src="caminho do jquery/jquery.js"></script>
<script src="/assets/custom.js"></script>

Pois o custom.js não vai esperar o jquery.js carregar, outra coisa importante notar é se não esta carregando dois jQuery ao mesmo tempo, por exemplo:

<script src="caminho do jquery/jquery.js"></script>
<script src="caminho do jquery/jquery.min.js"></script>

Protegendo o escopo

Outra coisa que pode estar ocorrendo é que alguma biblioteca como o Angular.js (ou outra) pode estar sobrescrevendo a variável $:

  • Uma maneira de resolver é trocar o $ por jQuery

  • Outra maneira é isolar o escopo, assim por exemplo:

    (function ($) {
        $(...).funcao(...);
    })(jQuery);
    

nota: Realmente não vejo a necessidade de usar misturar angular.js com jQuery, mesmo que ambos sejam distintos, Angular é bem especifico, se for usar pra uma coisa simples como um botão apenas então melhor nem usar Angular.

6
  • Acredito que a ordem esteja correta, Guilherme, código em produção > loja.bluebeach.com.br/preview/testelojas2-126/v
    – Leonardo
    Commented 5/05/2017 às 17:42
  • @Leonardo Atualizei a resposta, de uma olhada no final que adicionei, isso deve ajudar a corrigir
    – Syzoth
    Commented 5/05/2017 às 17:50
  • vou testar as duas maneiras, mas provavelmente só vou obter resposta do suporte (Alterar o arquivo) lá por segunda a tarde, aí eu comento aqui se deu certo. Obrigado pela ajuda.
    – Leonardo
    Commented 5/05/2017 às 18:00
  • @Leonardo vai por mim, o provável erro é misturar angular.js com jquery :/, mas pode esperar um retorno do suporte se desejar.
    – Syzoth
    Commented 5/05/2017 às 18:01
  • 1
    Recebi uma resposta do suporte, sua sugestão em trocar todos os $ por jQuery funcionou perfeitamente. Muito obrigado @Guilherme.
    – Leonardo
    Commented 5/05/2017 às 19:57
2

Caso você esteja trabalhando com Wordpress, como em meu caso, use esta solução:

;(function($){
    // seu código
})(jQuery);

Pego em SOF em inglês

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .