Help with Jquery $ is not a Function

Asked

Viewed 99 times

0

My file . js

$(document).ready(function () {

$("#uf").on("change", function () {
    atualizaProfissional();
});

$("#botao").on("click", function(){
    s = $("#municipio").val();
    if (s == 1){
        $("#imagem").attr("src","https://drglass.com.br/uf/popup1.png");
        $("#mensagem").html('Uhul! Nós atendemos sua região. Temos uma unidade de atendimento pertinho de você. Ligue agora mesmo e faça um orçamento.');
    }else{
        $("#imagem").attr("src","https://drglass.com.br/uf/popup0.png");
        $("#mensagem").html('Ops! Ainda não estamos na sua cidade. Mas muito em breve levaremos a melhor empresa de Vidros para sua região, consulte nosso plano de expansão.');
    }
});

function atualizaProfissional() {
    var options = {};
    options.url = "https://drglass.com.br/uf/listaCidades.php";
    options.type = "POST";
    options.data = { "uf": $("#uf").val() };
    options.dataType = "json";
    options.success = function (data) {
        $('#municipio').empty();
        for (var i = 0; i < data.length; i++) {
            $("#municipio").append("<option value='" + data[i].atende + "'>" + data[i].Nome + "</option>");
        }
    };
    $.ajax(options);
}
});

What am I calling:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://drglass.com.br/uf/municipios.js"></script>

Error link:

https://drglass.com.br/regioes/

I have no idea how to fix it. On my local machine, it works well, when I upload it gives this error.

jquery wordpress
  • 1

    See this article: https://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function. Wordpress already injects a Jquery. You’re trying to reinsert the library. Here’s how to do it: https://pt.blogpascher.com/wordpress-tutorial/como-add-corretamente-the-code-jquery-on-wordpress

  • One person posted the solution here and then deleted it. Very strange, but I was able to copy the code in time rsrsr. Just change the first line by jQuery(document).ready(function($){

1 answer

1


Dear Italo, I don’t know if there has to be, but Wordpress itself adds this:

Line 103:

<script type='text/javascript' src='https://drglass.com.br/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

and in line 381 you added this:

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

It may be the cause of the conflict, I really recommend removing the second jQuery, even if it has nothing to do with the problem, this is not right.

I could not test or analyze more things, there were many .js to look, but I already tell you, if it is not the first problem mentioned, something must be preventing or overwriting the global variable $, note that if using jQuery works normally, it’s probably some lib or add-on, or it’s own wordpress you’re using jQuery.noConflict

What you can do is isolate the scope by doing this:

(function ($) {

    $(document).ready(function () {

    $("#uf").on("change", function () {
        atualizaProfissional();
    });

    $("#botao").on("click", function(){
        s = $("#municipio").val();
        if (s == 1){
            $("#imagem").attr("src","https://drglass.com.br/uf/popup1.png");
            $("#mensagem").html('Uhul! Nós atendemos sua região. Temos uma unidade de atendimento pertinho de você. Ligue agora mesmo e faça um orçamento.');
        }else{
            $("#imagem").attr("src","https://drglass.com.br/uf/popup0.png");
            $("#mensagem").html('Ops! Ainda não estamos na sua cidade. Mas muito em breve levaremos a melhor empresa de Vidros para sua região, consulte nosso plano de expansão.');
        }
    });

    function atualizaProfissional() {
        var options = {};
        options.url = "https://drglass.com.br/uf/listaCidades.php";
        options.type = "POST";
        options.data = { "uf": $("#uf").val() };
        options.dataType = "json";
        options.success = function (data) {
            $('#municipio').empty();
            for (var i = 0; i < data.length; i++) {
                $("#municipio").append("<option value='" + data[i].atende + "'>" + data[i].Nome + "</option>");
            }
        };
        $.ajax(options);
    }
    });

})(jQuery);

Or simply adapt everything to jQuery()...

Browser other questions tagged jquery wordpress

You are not signed in. Login or sign up in order to post.