Modal does not work (synchronous AJAX)

Question

When using this JS code, using Jquery:

        $(document).ready(function(){
            $('.visualizar').click(function(){
                $('#container').fadeIn(300);
            });
        });
        function visualizarDados(codContato){
            //↓ função do ajax para mandar informações para a modal.php
            $.ajax({
                type: "GET",
                url: "modal.php",
                data: {codigo:codContato},

                success: function(dados){ 
                    $('#modal').html(dados);
                }

            });
        }

The modal does not work and this error is shown in the browser console:

[Deprecation] Synchronous Xmlhttprequest on the main thread is deprecated because of its detrimental effects to the end user’s Experience. For more help, check https://xhr.spec.whatwg.org/.

I researched and talk has something to do with AJAX being synchronous, but as I don’t have much experience in AJAX or jQuery, I didn’t understand how to solve.

Answer 1

Nowhere in your code shows that AJAX is synchronous. AJAX, by its nature, was created to be asynchronous, how it represents its own name:

AJAX (Tosynchronous JavaScript tond XML), that is to say, Asynchronous Javascript and XML.

It is not recommended to use AJAX synchronously, so browsers trigger this message on the console (see this response). In jQuery, this would be done through the option async: true, but your code doesn’t show that.

Probably your problem is another, because the code inside the $(document).ready(function(){ has nothing to do with function visualizarDados(codContato).