1

Tenho um botão Atualiza Conteudo que se alguém clicar realiza um refresh somente na div content e não atualiza a pagina toda.

Até aí tudo bem, acontece que a nova_pagina.php que estou incluindo após o clique tras um botão de exemplo que ao ser clicado ele desaparece, usei uma função em javascript só que ele não funciona no index.php.

Como faço pra corrigir isso e fazer que dentro do index.php também funcione?

index.php

<div id="content">
</div>
<input id="updateContent" type="button" value="Atualizar Conteudo" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var url = 'nova_pagina.php';

var updateContent = document.getElementById("updateContent");
var content = document.getElementById("content");

updateContent.addEventListener("click", function (event) {
  var request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.addEventListener("readystatechange", function (event) {
    if (request.readyState == 4 && request.status == 200) {
      content.innerHTML = request.responseText
    }
  });
  request.send();
});
</script>

nova_pagina.php

<div class="mydiv">
<input type="button" class="esconderBotao" value="Esconder Botao" />
</div>

<script>    
$(".mydiv").on("click", ".esconderBotao",function () {
     $(".esconderBotao").css('display','none');  
});
</script>
1
  • cara, porque você ta usando jquery e fazendo ajax com js puro?
    – Leandro RR
    27/02/2019 às 18:39

1 Resposta 1

2

Os scripts retornados via AJAX não são executados automaticamente quando são carregados com a propriedade .innerHTML. Desta forma, você precisa "forçar" sua execução com o eval():

index.php:

<div id="content">
</div>
<input id="updateContent" type="button" value="Atualizar Conteudo" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var url = 'nova_pagina.php';

var updateContent = document.getElementById("updateContent");
var content = document.getElementById("content");

updateContent.addEventListener("click", function (event) {
  var request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.addEventListener("readystatechange", function (event) {
    if (request.readyState == 4 && request.status == 200) {
      content.innerHTML = request.responseText;
      eval(document.getElementById('scriptAjax').innerHTML);
    }
  });
  request.send();
});
</script>

nova_pagina.php:

<div class="mydiv">
<input type="button" class="esconderBotao" value="Esconder Botao" />
</div>

<script id="scriptAjax">
$(".mydiv").on("click", ".esconderBotao",function () {
     $(".esconderBotao").css('display','none');  
});
</script>

Perceba que adicionei um id="scriptAjax" no script do arquivo nova_pagina.php. Já no index.php adicionei esta linha:

eval(document.getElementById('scriptAjax').innerHTML);

Ela é responsável por executar o JavaScript, selecionando-o pelo id.

Mais detalhes e o mérito estão em SOen - Calling a JavaScript function returned from AJAX response (em inglês).

Leitura recomendada: eval() - JavaScript | MDN


Considerando que você está carregando a biblioteca do jQuery, uma outra alternativa é utilizar o método .html(). Com ele os scripts são executados normalmente quando são definidos no documento.

Basta alterar essa parte do seu script:

// ...
  request.addEventListener("readystatechange", function (event) {
    if (request.readyState == 4 && request.status == 200) {
      //content.innerHTML = request.responseText
      $('#content').html(request.responseText);
    }
  });
// ...

É sabido que utilizar JavaScript puro torna sua aplicação mais rápida. Principalmente caso você esteja utilizando apenas para definir o estilo de um elemento, como está no seu código:

<script id="scriptAjax">
    $(".mydiv").on("click", ".esconderBotao",function () {
         $(".esconderBotao").css('display','none');  
    });
</script>

Aí o melhor é não utilizar o jQuery:

<script id="scriptAjax">
    document.querySelector('.esconderBotao').addEventListener('click', function(){
        this.style.display = 'none';
    });
</script>

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 .