0

Estou fazendo um Sistema GED aqui para a empresa onde trabalho (bem simples, apenas para organizar melhor).

Estou desenvolvendo as telas primeiro, pra depois conectar com o BD e fazer as coisas funcionarem.

Eu tenho um menu que fica a esquerda com os links para navegar entre as páginas. A direita eu insiro o conteúdo das páginas em uma DIV chamada #conteudo, pra isso estou utilizando a função load() do jQuery. Conforme abaixo:

// Carrega o conteúdo das páginas dentro da div#conteudo    
$('.carrega_pagina').click( function(){ 

    var href = $(this).attr('href'); // pega o valor do atributo href da âncora clicada
    $('#conteudo').load(href);
    return false;
});

Isso tem funcionado bem, porém, ao clicar nos links umas 8-10 vezes ou mais, a tela solicitada demora a aparecer (é como se o navegador tivesse travando), além disso, o navegador chega a consumir até 70% da CPU quando solicito uma página (lembrando que isso tudo só ocorre após navegar várias vezes entre as páginas, quando dou um refresh na página tudo volta ao normal).

Queria saber se existe uma maneira melhor de inserir o conteúdo das outras páginas nessa DIV.

4
  • Provavelmente você está carregando um javascript que adiciona a função nos itens do menu. Conforme mais cliques você fizer, mas funções você adicionará aos itens e mais requisições esses itens irão fazer. O ideal é você utilizar uma requisição simples (pode ser $.GET) e carregar somente o que precisa. (Sem os JS já adicionados). 7/03/2018 às 14:07
  • Tenta usar html() no lugar de load() 7/03/2018 às 14:07
  • @ValdeirPsr, é exatamente o que está acontecendo! Coloquei um alert no success do $.ajax e vi que cada vez que clico em um link a requisição é feita outra vez e vai incrementando... 7/03/2018 às 14:35
  • @ValdeirPsr Poderia me dar um exemplo de como fazer com $.get? Outra dúvida, eu estou inserindo meu arquivo de script junto as páginas porque tentei fazer antes sem inserir e não funcionou as funções que tenho nas páginas solicitadas. Fazendo com $.get mesmo sem inseri-los novamente as funções irão funcionar? 7/03/2018 às 14:38

2 Respostas 2

0

Isso acontece pois durante do .load( URL ) você está trazendo alguns códigos JavaScript repetidos. Isso faz com que os elementos do menu fiquem adicionando mais e mais eventos de clique.

Esses eventos são adicionados tantas vezes, que ao invés de fazer uma requisição, você pode chegar a fazer 100 requisições de uma só vez. Claro que vai depender da quantidade de vezes que você clicar.

Para corrigir isso, é necessário que você filtre o que vai adicionar, por exemplo:

page1.html

<!DOCTYPE hml>
<html>
    <head>
        <title>Title of the document</title>
    </head>

    <body>
        <ul id="menu">
            <li><a href="page1.html">Page 1</a></li>
            <li><a href="page2.html">Page 2</a></li>
            <li><a href="page3.html">Page 3</a></li>
            <li><a href="page4.html">Page 4</a></li>
        </ul>

        <div id="content">
            <p>The content of the document...</p>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            /* Carrega a página */
            $("#menu li a").click(function(e) {
                e.preventDefault();

                $.get( $(this).attr("href") , function(result){
                    let d = document.createElement("div");
                    d.innerHTML = result;

                    /* Adiciona o conteúdo da div#content da página dois na div#content da página atual */
                    document.querySelector("#content").replaceWith( d.querySelector("div#content") );

                    /* Executa todos os javascript que está dentro da div#content */
                    document.querySelectorAll("#content script").forEach( script => eval(script.innerHTML) )
                });
            })

            /**
             * Utilize o .on para elementos dinâmicos
             * Dessa forma, o jQuery irá verificar todos
             * os eventos "click" e depois irá verificar
             * se o evento percente ao elemento #btnTest
             * caso pertença, executa a função
             */
            $("body").on("click", "#btnTest", function() {
                alert( $(this).attr("data-msg") )
            })
        </script>
    </body>
</html>

page2.html

<!DOCTYPE hml>
<html>
    <head>
        <title>Title of the document</title>
    </head>

    <body>
        <ul id="menu">
            <li><a href="page1.html">Page 1</a></li>
            <li><a href="page2.html">Page 2</a></li>
            <li><a href="page3.html">Page 3</a></li>
            <li><a href="page4.html">Page 4</a></li>
        </ul>

        <div id="content">
            <p>Tudo certo</p>
            <button type="button" id="btnTest" data-msg="O JavaScript está funcionando.">Alerta</button>

            <script>alert("JavaScript liberado")</script>
        </div>

        <script>
            /* Carrega a página */
            $("#menu li a").click(function(e) {
                e.preventDefault();

                $.get( $(this).attr("href") , function(result){
                    let d = document.createElement("div");
                    d.innerHTML = result;

                    /* Adiciona o conteúdo da div#content da página dois na div#content da página atual */
                    document.querySelector("#content").replaceWith( d.querySelector("div#content") );

                    /* Executa todos os javascript que está dentro da div#content */
                    document.querySelectorAll("#content script").forEach( script => eval(script.innerHTML) )
                });
            })

            alert("JavaScript repetido")
        </script>
    </body>
</html>
1
  • Opa, muito obrigado! Funcionou tudo perfeitamente, agora sem engasgos. =) 7/03/2018 às 18:21
0

Um alternativa é usar o próprio Ajax para fazer isso. O segredo é setar o dataType como "html", assim:

$('.carrega_pagina').click(function () {
    var href = $(this).attr('href'); 
    $.ajax({
        url: href,
        dataType: 'html',
        success: function (html) {
            $('#conteudo').html(html);
        }
    });
    return false;
});

Agora faça os testes com múltiplos clicks e veja se atende melhor que o .load()

1
  • Ricardo, obrigado pela resposta. Eu fiz exatamente como você mencionou, mas continuou da mesma forma :( 7/03/2018 às 14:25

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 .