0

Bom dia!

Eu tenho uma função que varre um arquivo JSON em busca de informações compatíveis com a busca que será realizada. Funcionar normalmente. Mas o que eu quero é, exibir o resultado dessa busca em um modal.

Consigo exibir normalmente em um alert(), mas não consigo num modal, criado por bootstrap.

Poderiam me ajudar? (Não sei se fui claro o suficiente)

var estadoClicked = "";

function disparar() {
    var el = document.getElementById('local');
    el.addEventListener('click', function(e) {
        estadoClicked = e.target.id;
        executando();
    });
}

var locais = "";
var texto1 = "";
var texto2 = "";
var texto3 = "";
var texto4 = "";
var texto5 = "";
var texto6 = "";
var texto_final = "";
var dados_cidades = "";

function executando() {
    var obj, dbParam, xmlhttp, myObj, x, txt = "";

    obj = {
        "table": "customers",
        "limit": 20
    };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myObj = JSON.parse(this.responseText);
            txt += "<table border='1'>"
            for (x in myObj) {
                if (myObj[x].estadoSigla == estadoClicked) {
                    if (myObj[x].existe == 'true') {
                        locais += "<strong>" + myObj[x].estado + "</strong>" + "<br/>" + myObj[x].cidade + "<br/>";
                    }
                }
            }
            txt += "</table>"

            //dados_cidades RECEBE O CONTEUDO REALIZADO APARTIR DA PESQUISA NO ARQUIVO JSON:
            var dados_cidades = document.getElementById("demo").innerHTML = locais;

            //GERANDO O TEXTO QUE SERÁ EXIBIDO POSTERIORMENTE:
            var texto1 = "<h2>Olá!</h2>";
            var texto2 = "<h4>Obrigado por consultar a Next.</h4>";
            var texto3 = "<h4>Atualmente, já existem unidades neste Estado.</h4>";
            var texto4 = "<h4>Mas fique <strong>tranquilo!</strong></h4>";
            var texto5 = "<h4>Na next, seu espaço está RESERVADO!</h4>";
            var texto6 = "<h4>Envie-nos seu email e entraremos em contato:</h4>";
            var texto_final = texto1 + texto2 + texto3 + "<h2>" + dados_cidades + "</h2><br/>" + texto4 + texto5 + texto6;

            //EXIBINDO O RESULTADO APARTIR DE UM ALERTA:
            //bootbox.alert(texto_final);
        }
    };
    xmlhttp.open("POST", "json_estados.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("x=" + dbParam);
}
1
  • Manda o HTML também
    – Fabricio
    Commented 17/01/2018 às 13:35

1 Resposta 1

1

Usei esse modal de exemplo.. Mas use oque achar melhor, vamos la, primeiro coloque um id dentro do elemento que você irá inserir no caso adicionei o id "aqui". Explicando... O innerHTML serve para adicionar textos e html dentro de um elemento HTML com isso só peguei o id e adicionei a sua estrutura montada, mais sobre o innerHTML aqui, De um id para o modal e use a função show, Vale lembrar que o jquery tem que estar importado e o bootstrap também

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

<div class="modal" id="mymodal" tabindex="-1" role="dialog"><!--Coloquei um ID-->
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div id="aqui" class="modal-body"><!-- AQUI O ID -->
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

No seu js faça um innerHTML

<script type="text/javascript">
  var locais = "";
  var texto1 = "";
  var texto2 = "";
  var texto3 = "";
  var texto4 = "";
  var texto5 = "";
  var texto6 = "";
  var texto_final = "";
  var dados_cidades = "";

  function executando(){
    var obj, dbParam, xmlhttp, myObj, x, txt = "";

    obj = { "table":"customers", "limit":20 };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += "<table border='1'>"
        for (x in myObj) {
          if(myObj[x].estadoSigla==estadoClicked){  
            if(myObj[x].existe=='true'){
              locais +="<strong>" + myObj[x].estado + "</strong>" + "<br/>" + myObj[x].cidade + "<br/>";
            }
          } 
        }
        txt += "</table>"        

        //dados_cidades RECEBE O CONTEUDO REALIZADO APARTIR DA PESQUISA NO ARQUIVO JSON:
        var dados_cidades = document.getElementById("demo").innerHTML = locais;

        //GERANDO O TEXTO QUE SERÁ EXIBIDO POSTERIORMENTE:
        var texto1 = "<h2>Olá!</h2>";
        var texto2 = "<h4>Obrigado por consultar a Next.</h4>";
        var texto3 = "<h4>Atualmente, já existem unidades neste Estado.</h4>";
        var texto4 = "<h4>Mas fique <strong>tranquilo!</strong></h4>";
        var texto5 = "<h4>Na next, seu espaço está RESERVADO!</h4>";
        var texto6 = "<h4>Envie-nos seu email e entraremos em contato:</h4>";
        var texto_final = texto1 + texto2 + texto3 + "<h2>" + dados_cidades + "</h2><br/>" + texto4 + texto5 + texto6;

        //EXIBINDO O RESULTADO APARTIR DE UM ALERTA:
        //bootbox.alert(texto_final);

        //AQUI O innerHTML NO DETERMINADO ID
        document.getElementById('aqui').innerHTML = texto_final;
        $('#mymodal').modal('show');
      }
    };
    xmlhttp.open("POST", "json_estados.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("x=" + dbParam);
  }
</script>
5
  • Eu entendi perfeitamente sua idéia. Mas infelizmente, não deu certo. Quando clico no elemento, a funcao é disparada, varre o JSON, faz os cálculos e depois preciso exibir esse resultado em um modal. No caso do código que você me explicou (muito bem por sinal), o modal não abre sozinho, mesmo contendo o id correto.
    – Neevs
    Commented 17/01/2018 às 13:45
  • Ok irei editar um momento Commented 17/01/2018 às 14:29
  • Pronto Editado @LucasNeves Commented 17/01/2018 às 14:36
  • Funcionou perfeitamente! Incrivelmente pra ser mais sincero. Muito obrigado! Só tem um detalhe...o conteúdo interno do modal, se repete...caso eu clique no mesmo elemento duas vezes. Exemplo, o modal exibe: olá! Se eu clicar no elemento denovo, aparece: olá! olá! olá! Caso eu clique DENOVO, aparece então: olá! olá! olá! olá! olá! Como devo proceder?
    – Neevs
    Commented 17/01/2018 às 15:00
  • Meu amigo, deu certo aqui. Joguei um window.reload() no close do modal e dou um refresh na pagina a cada consulta de elemento. Parece um problema, mas dado o elemento que estou utilizando, caiu perfeitamente. Grato pela ajuda.
    – Neevs
    Commented 18/01/2018 às 12:00

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 .