7

Quando utilizo este código em meu arquivo, ocorre um erro no log, e acaba dando problemas em outras chamadas javascript.

Arquivo da página atual (o javascript que dá problema está no final):

<html>
<head>

  <script src="../../assets/js/common-scripts.js"></script>
  <script type="text/javascript">
    $(document).ready(
      $.ajax('indicadores.php?id_indicador=1').done(function(data) {
        $("#collapse1").html(data);
      });
    );
  </script>

</head>

  <body>

  <section id="container" >
    <section id="main-content">
      <section class="wrapper">
        <div class="row">
          <div class="col-lg-12 main-chart">
            <h3 class="text-center"><i class="fa fa-bar-chart-o"></i> Indicadores</h3>
            <div class="panel-group" id="accordion">
              <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" id="collapse11">Teste</a>
                  </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse active">
                <!-- Carrega conteúdo do arquivo pa_nr_atendimentos.php através de Javascript-->
                </div>
              </div>      
            </div> 
          </div>
        </div>
      </section>
    </section>
  </section>

  </body>
</html>

O último script chama o conteúdo que está no arquivo indicadores.php:

<!--Com esta chamada apresenta o erro citado. Se eu tirar não apresenta o erro, porém, o conteúdo abaixo sai desconfigurado pela falta do arquivo.-->
  <script src="../../assets/js/common-scripts.js"></script>

  <div class="panel-body">
    <div class="row mt">
      <!--AQUI HTML COM GRÁFICOS QUE SE BASEIAM NO ARQUIVO COMMOM-SCRIPTS.JS-->
    </div> 
  </div>

ERRO APRESENTADO NO CONSOLE:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

Isto ocorre quando carrego o conteúdo presente na página indicadores.php através de uma chamada em ajax assíncrono, executada na página atual. Alguém sabe como posso resolver?

Conteúdo de common-scripts.js: http://fiddle.jshell.net/tamh2mo5/:

/*---LEFT BAR ACCORDION----*/
$(function() {
    $('#nav-accordion').dcAccordion({
        eventType: 'click',
        autoClose: true,
        saveState: true,
        disableLink: true,
        speed: 'slow',
        showCount: false,
        autoExpand: true,
//        cookie: 'dcjq-accordion-1',
        classExpand: 'dcjq-current-parent'
    });
});

var Script = function () {


//    sidebar dropdown menu auto scrolling

    jQuery('#sidebar .sub-menu > a').click(function () {
        var o = ($(this).offset());
        diff = 250 - o.top;
        if(diff>0)
            $("#sidebar").scrollTo("-="+Math.abs(diff),500);
        else
            $("#sidebar").scrollTo("+="+Math.abs(diff),500);
    });



//    sidebar toggle

    $(function() {
        function responsiveView() {
            var wSize = $(window).width();
            if (wSize <= 768) {
                $('#container').addClass('sidebar-close');
                $('#sidebar > ul').hide();
            }

            if (wSize > 768) {
                $('#container').removeClass('sidebar-close');
                $('#sidebar > ul').show();
            }
        }
        $(window).on('load', responsiveView);
        $(window).on('resize', responsiveView);
    });

    $('.fa-bars').click(function () {
        if ($('#sidebar > ul').is(":visible") === true) {
            $('#main-content').css({
                'margin-left': '0px'
            });
            $('#sidebar').css({
                'margin-left': '-210px'
            });
            $('#sidebar > ul').hide();
            $("#container").addClass("sidebar-closed");
        } else {
            $('#main-content').css({
                'margin-left': '210px'
            });
            $('#sidebar > ul').show();
            $('#sidebar').css({
                'margin-left': '0'
            });
            $("#container").removeClass("sidebar-closed");
        }
    });

// custom scrollbar
    $("#sidebar").niceScroll({styler:"fb",cursorcolor:"#4ECDC4", cursorwidth: '3', cursorborderradius: '10px', background: '#404040', spacebarenabled:false, cursorborder: ''});

    $("html").niceScroll({styler:"fb",cursorcolor:"#4ECDC4", cursorwidth: '6', cursorborderradius: '10px', background: '#404040', spacebarenabled:false,  cursorborder: '', zindex: '1000'});

// widget tools

    jQuery('.panel .tools .fa-chevron-down').click(function () {
        var el = jQuery(this).parents(".panel").children(".panel-body");
        if (jQuery(this).hasClass("fa-chevron-down")) {
            jQuery(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
            el.slideUp(200);
        } else {
            jQuery(this).removeClass("fa-chevron-up").addClass("fa-chevron-down");
            el.slideDown(200);
        }
    });

    jQuery('.panel .tools .fa-times').click(function () {
        jQuery(this).parents(".panel").parent().remove();
    });


//    tool tips

    $('.tooltips').tooltip();

//    popovers

    $('.popovers').popover();



// custom bar chart

    if ($(".custom-bar-chart")) {
        $(".bar").each(function () {
            var i = $(this).find(".value").html();
            $(this).find(".value").html("");
            $(this).find(".value").animate({
                height: i
            }, 2000)
        })
    }


}();

Com o common-scripts.js no arquivo indicadores.php: inserir a descrição da imagem aqui Sem o common-scripts.js no arquivo indicadores.pho: inserir a descrição da imagem aqui

Isto ocorre mesmo common-scripts.js já tendo sido carregado anteriormente na página atual.

Versão do jQuery: 1.8.3

22
  • acho que tem a ver com isto - async: true. Porém, não consegui resolver. Alguma dica? Commented 11/11/2015 às 15:27
  • Não parece que o warning está vindo deste snippet da pergunta, uma vez que o jQuery nunca faz requests síncronas por padrão. Este alerta é exibido quando uma requisição XMLHttpRequest é aberta com o parâmetro async como falso, exemplo (veja o alerta no console). Commented 12/11/2015 às 0:10
  • E como eu poderia resolver? Você saberia me ajudar? Commented 12/11/2015 às 10:09
  • O primeiro passo seria identificar qual script está fazendo a chamada ajax síncrona Commented 17/11/2015 às 22:34
  • 1
    Eu não entendi o motivo dos graficos em relação a duvida, outra coisa o seu código não pode ser reproduzido, você colocou o commo-js, mas não colocou o jquery no seu html, isto da a entender que este não é o teu código que esta com problema, já que se você não incluir o jquery.js o problema seria outro na execução do javascript.
    – Syzoth
    Commented 25/11/2015 às 19:20

4 Respostas 4

9
+25

1. AJAX assíncrono

O que você está usando (por meio do método .load) é o AJAX síncrono. Ao invés disso, use o AJAX assíncrono assim:

$.ajax("indicadores.php?id_indicador=2").done(function(data) {
    $("#collapse1").html(data);
});

Note que há algumas diferenças:

  • No AJAX síncrono, que é o que o .load faz, a página vai congelar totalmente, enquanto uma requisição é enviada ao servidor e só vai descongelar após receber a resposta do servidor. Enquanto o navegador espera o servidor responder, a página fica completamente congelada e inoperante, o que é péssimo para a experiência do usuário, ainda mais se a resposta do servidor demorar para ser carregada.

  • No AJAX assíncrono, a execução continua logo após como se nada tivesse acontecido e o corpo do callback no .done só vai ser executado bem depois.

Desta forma, este código síncrono:

alert("Antes");
$("#collapse1").load('indicadores.php?id_indicador=2');
alert("Depois");

O usuário vai ver o alert Antes, a página congelada, o conteúdo baixado do servidor vai aparecer e finalmente o alert Depois. Nesta ordem.

Isso é diferente do que ocorre com esse código assíncrono:

alert("Antes");
$.ajax("indicadores.php?id_indicador=2").done(function(data) {
    alert("Surpresa");
    $("#collapse1").html(data);
});
alert("Depois");

O usuário vai ver o alert Antes e o alert Depois logo em seguida. A página vai ficar rodando normalmente por um curto espaço de tempo, quando de repente o alert Surpresa aparece e o conteúdo dinâmico do servidor surge.

Portanto, tenha cuidado se você tiver isso:

$("#collapse1").load('indicadores.php?id_indicador=2');
var x = xpto($("#collapse1"));
var y = blabla(x);

Pois isso daqui não vai funcionar:

$.ajax("indicadores.php?id_indicador=2").done(function(data) {
    $("#collapse1").html(data);
});
var x = xpto($("#collapse1"));
var y = blabla(x);

E o que você vai ter que usar é isso:

$.ajax("indicadores.php?id_indicador=2").done(function(data) {
    $("#collapse1").html(data);
    var x = xpto($("#collapse1"));
    var y = blabla(x);
});

2. Tags <script> no <body>

As tags <script> com atributo src dentro do <body> também podem causar problemas (se estiver dentro do <head> não há problema). O motivo é que no meio do carregamento da página, quando a página já renderizou pela metade, o navegador é obrigado a parar e baixar um script do servidor, ocasionando o mesmo problema do AJAX síncrono.

Para exemplificar, veja este exemplo. Nele há três tags <script>. Duas delas estão ok, enquanto que uma causa este problema:

<html>
    <head>
        <title>Título da página</title>

        <!--
            Esta tag <script> está ok, pois não está no <body>, e sim no <head>.
            Neste momento, o navegador ainda não começou a carregar a página propriamente
            dita, ele está apenas baixando os recursos necessários para fazer isso.
        -->
        <script type="text/javascript" src="xpto1.js"></script>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet</p>

        <!--
            Esta tag <script> também está ok, pois não usa o atributo src.
            O javascript já está aqui, e portanto o navegador não vai precisar abrir uma
            nova requisição para baixá-lo.
        -->
        <script type="text/javascript">
            alert("script 2");
        </script>

        <p>Consectetuer adispiting elit</p>

        <!--
            Esta tag <script> é um problema!
            Ela vai forçar o navegador a parar o carregamento da página na metade para
            carregar o script do servidor.
        -->
        <script type="text/javascript" src="xpto2.js"></script>

        <p>Lorem ipsum dolor sit amet</p>
    </body>
</html>

E se dentro desta página eu baixar, via AJAX assíncrono, o indicadores.php com código HTML?

Primeiramente, este código HTML será apenas um fragmento de uma HTML, e não uma HTML completa (veja mais abaixo sobre isso). Desta forma, vamos supor que o fragmento HTML seja assim:

<div>
    <span>Lorem ipsum dolor sit amet</span>
    <script type="text/javascript" src="xpto3.js"></script>
    <span>Consectetuer adispiting elit</span>
</div>

Neste caso, o <script> que está lá vai te trazer problemas. Pois o navegador vai baixar este HTML de forma assíncrona (até aí tudo bem) e então vai ter que baixar o javascript de forma síncrona, e daí teremos o problema.

Uma forma de resolver isso é baixar este outro código também de forma assíncrona:

<div>
    <span>Lorem ipsum dolor sit amet</span>
    <script type="text/javascript">
        $.ajax("xpto3.js").done(function(data) {
            eval(data);
        });
    </script>
    <span>Consectetuer adispiting elit</span>
</div>

E isso dever resolver o problema. Entretanto, talvez ainda não seja a melhor solução, pois ainda estaremos fazendo duas requisições AJAX ao servidor para baixar o conteúdo, sendo que poderíamos usar uma só. Neste caso, a solução seria usar um server-side include (note o código PHP inline):

<div>
    <span>Lorem ipsum dolor sit amet</span>
    <script type="text/javascript">
        <!-- O arquivo PHP incluído abaixo contém/gera código javascript. -->
        <?php include 'xpto3.php'; ?>
    </script>
    <span>Consectetuer adispiting elit</span>
</div>

E também vale ressaltar que carregar javascripts dentro de trechos de HTML trazidos por AJAX pode ser um tanto estranho. Talvez, o melhor seja simplesmente incluir todos os javascripts necessários no <head> da página principal, ainda mais se for um conteúdo estático como isso daqui:

<!-- Deve ser colocado dentro do <head>. -->
<script src="../../assets/js/common-scripts.js"></script>

3. E se o fragmento for uma HTML completa?

Vamos supor que o que você baixe por AJAX seja isso:

<html>
<head>
  <!--Com esta chamada apresenta o erro citado. Se eu tirar não apresenta o erro, porém, o conteúdo abaixo sai desconfigurado pela falta do arquivo.-->
  <script src="../../assets/js/common-scripts.js"></script>

</head>
<body>
  <div class="panel-body">
    <div class="row mt">
      <!--AQUI HTML COM GRÁFICOS QUE SE BASEIAM NO ARQUIVO COMMOM-SCRIPTS.JS-->
    </div> 
  </div>
</body>
</html>

Isso não é uma boa ideia, porque a sua HTML no final do carregamento ficaria assim:

<html>
<head>

  <script src="../../assets/js/common-scripts.js"></script>

</head>

  <body>

  <section id="container" >
    <section id="main-content">
      <section class="wrapper">
        <div class="row">
          <div class="col-lg-12 main-chart">
            <h3 class="text-center"><i class="fa fa-bar-chart-o"></i> Indicadores</h3>
            <div class="panel-group" id="accordion">
              <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" id="collapse11">Teste</a>
                  </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse active">
<html>
<head>
  <!--Com esta chamada apresenta o erro citado. Se eu tirar não apresenta o erro, porém, o conteúdo abaixo sai desconfigurado pela falta do arquivo.-->
  <script src="../../assets/js/common-scripts.js"></script>

</head>
<body>
  <div class="panel-body">
    <div class="row mt">
      <!--AQUI HTML COM GRÁFICOS QUE SE BASEIAM NO ARQUIVO COMMOM-SCRIPTS.JS-->
    </div> 
  </div>
</body>
</html>
                </div>
              </div>      
            </div> 
          </div>
        </div>
      </section>
    </section>
  </section>

  </body>
</html>

<script type="text/javascript">
  $.ajax('indicadores.php?id_indicador=1').done(function(data) {
    $("#collapse1"+).html(data);
  });
</script>

Observe que temos duas vezes a tag <html>, o que é ilegal (a segunda tag <html> está dentro do <body>), e também estamos importanto duas vezes o mesmo javascript, o que também não é boa ideia. Além disso, o erro vai voltar porque o <script> da página baixada, embora esteja dentro do <head> desta página, também está dentro do <body> da página externa. Não é permitido em <html> se ter uma página dentro da outra desta forma.

O melhor neste caso, seria forçar que o carregamento fosse de apenas um trecho de HTML. Uma forma de se fazer isso é tornar a segunda página em apenas isso:

  <div class="panel-body">
    <div class="row mt">
      <!--AQUI HTML COM GRÁFICOS QUE SE BASEIAM NO ARQUIVO COMMOM-SCRIPTS.JS-->
    </div> 
  </div>

Observe que não há nada de <html>, nem de <head>, nem de <body> e nem de <script> nisto, pois se trata de um fragmento de HTML, e não de um HTML completo. Estas coisas que não estão nesta página interna já existem na página externa e portanto não só não são necessárias na página interna, como colocá-las lá é uma violação do padrão do HTML.

4. Onde colocar a tag <script>?

Há mais uma outra violação importante da HTML: Você NUNCA deveria ter NADA após a tag de fechamento </html>. Entretanto, você colocou um <script> lá, depois do </html>. Isso é absolutamente ilegal no padrão HTML (mas o navegador quer ser bonzinho e tolera essas coisas). O correto é tentar colocar os scripts no <head> sempre que possível:

<html>
<head>

  <script src="../../assets/js/common-scripts.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $.ajax('indicadores.php?id_indicador=1').done(function(data) {
        $("#collapse1").html(data);
      });
    });
  </script>

</head>

  <body>

  <section id="container" >
    <section id="main-content">
      <section class="wrapper">
        <div class="row">
          <div class="col-lg-12 main-chart">
            <h3 class="text-center"><i class="fa fa-bar-chart-o"></i> Indicadores</h3>
            <div class="panel-group" id="accordion">
              <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" id="collapse11">Teste</a>
                  </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse active">
                <!-- Carrega conteúdo do arquivo pa_nr_atendimentos.php através de Javascript-->
                </div>
              </div>      
            </div> 
          </div>
        </div>
      </section>
    </section>
  </section>

  </body>
</html>

Ou, se você não puder fazer isso, colocar no final do <body>, mas dentro dele:

<html>
<head>

  <script src="../../assets/js/common-scripts.js"></script>

</head>

  <body>

  <section id="container" >
    <section id="main-content">
      <section class="wrapper">
        <div class="row">
          <div class="col-lg-12 main-chart">
            <h3 class="text-center"><i class="fa fa-bar-chart-o"></i> Indicadores</h3>
            <div class="panel-group" id="accordion">
              <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" id="collapse11">Teste</a>
                  </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse active">
                <!-- Carrega conteúdo do arquivo pa_nr_atendimentos.php através de Javascript-->
                </div>
              </div>      
            </div> 
          </div>
        </div>
      </section>
    </section>
  </section>

  <script type="text/javascript">
    $(document).ready(function() {
      $.ajax('indicadores.php?id_indicador=1').done(function(data) {
        $("#collapse1").html(data);
      });
    });
  </script>

  </body>
</html>

E por fim, note que eu tirei o + que havia nisso:

<script type="text/javascript">
  $.ajax('indicadores.php?id_indicador=1').done(function(data) {
    $("#collapse1"+).html(data); // <-- Tire esse + daqui!
  });
</script>

Pois esse + sobrando aí vai causar um erro de sintaxe no javascript!

5. Algumas regras sobre a estrutura de uma página HTML

Lembre-se dessas regras de ouro abaixo. Elas NUNCA devem ser violadas:

  • A página deve ter um e apenas um elemento <html>. Não é permitido ter um elemento <html> dentro do outro nem que seja indiretamente.
  • O elemento <html> só pode ter um, e apenas um <head> dentro dele.
  • O elemento <html> só pode ter um, e apenas um <body> dentro dele.
  • O elemento <html> não pode ter nada mais do que os elementos <head> e <body> dentro dele.
  • O elemento <head> deve estar antes do elemento <body>.
  • Não deve haver nada entre a tag de abertura <html> e a tag de abertura <head>.
  • Não deve haver nada entre a tag de fechamento </head> e a tag de abertura <body>.
  • Não deve haver nada entre a tag de fechamento </body> e a tag de fechamento </html>.
  • A única coisa que pode aparecer antes da tag <html> é o doctype. No caso do HTML5, trata-se disso: <!DOCTYPE html>.
  • Nada deve aparecer depois do </html>.
1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    Commented 24/02/2017 às 18:47
3

Tente fazer assim, e veja se resolve seu problema:

<script type="text/javascript">
$(function(){
    $("#collapse1").load('indicadores.php?id_indicador=2');
});
</script>

Obs: O jquery não carrega eventos se não houver um autoload antes.

Veja um exemplo em funcionamento

EDITADO: daqui para baixo, devido à edição da pergunta:

Mesmo fazendo dessa maneira que você fez, ainda está errado, o correto seria assim:

$(document).ready(function() {
       $.ajax('indicadores.php?id_indicador=1').done(function(data) {
             $("#collapse1").html(data);
       });
});

Observe que no seu ready não está carregando uma função anônima.

3
  • Assim que estava antes de eu editar a pergunta. Apenas mudei pelas dicas aqui do pessoal. hehe Commented 25/11/2015 às 18:46
  • @RodrigoSegatto, você está tentando executar seu método, só que da forma que você fez, ficou indireto no .ready(...), o ready não irá funcionar se você não passar um valor, variável, método ou evento. Commented 25/11/2015 às 20:27
  • 2
    @RodrigoSegatto, você precisa para para pensar e saber o que você precisa no seu código, se você ficar editando a sua pergunta mesmo sem ter uma solução final ao seu problema, você irá dificultar ainda mais para que as pessoas possam te ajudar e apresentar uma solução ao problema. Commented 26/11/2015 às 1:28
1

@RodrigoSegatto

Os manipuladores de DOM nas versão mais novas dos browsers não estão mais dando suporte à chamadas síncronas. É exatamente isso que ele está te retornando.

Certamente, a biblioteca jQuery 1.8 deve ainda usar algum método já obsoleto e não mais suportado. Como vc mesmo testou e comentou, em browsers mais antigos funciona.

Tente atualizar para o jQuery 1.11.3 (desde que seja versão 1.x, vc não deve ter problemas com breaking changes), acredito que deva resolver o problema para browser mais novos.

UPDATE:

Tentar outra sintaxe, talvez?

$(function() {
    $.ajax({
        url: 'indicadores.php?id_indicador=1',
        type: 'GET',
        success: function(data) {
            $("#collapse1").html(data);
        }
    });
});
2
  • Não deu certo Thiago. Continuou funcionando tudo, mas no console segue a mesma mensagem. Commented 26/11/2015 às 16:50
  • @RodrigoSegatto, fiz um update. Commented 26/11/2015 às 17:35
0

Tive o mesmo problema, e com ele minha pagina recarregava sem eu solicitar. inseri o codigo abaixo e resolveu o problema do reload.

e.stopPropagation();
return false;

Segue um exemplo abaixo:

var saveUsuario = function (objUsuario) {
        $.ajax({
            method: 'GET',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            url: "/minhaURL",
            success: function (result) {            },
            error: function (resultErro) {           }
        });
     e.stopPropagation();
     return false;
    };

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 .