Display result of a Javascript function in a modal

Navigation
0

Good morning!

I have a function that scans a JSON file for search information compatible with the search that will be performed. Work normally. But what I want is to display the result of this search in a modal.

I can normally display in an alert (), but I can not get it in a modal created by bootstrap.

Could you help me? (I do not know if I was clear enough) 

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);
}
    
asked by anonymous 17.01.2018 / 14:23

1 answer

1

I used this modal example. But use what you think is best, come on, first put an id inside the element that you will insert in case I added the id "here". I have an innerHTML that I want to add to the innerHTML, and I want to add the innerHTML to it. that jquery has to be imported and bootstrap too

link 

<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>

In your js do an 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>
    
17.01.2018 / 14:35
NullInjectorError Error: No provider for Implement function in child element