Document.Write with variable does not print

Navigation
1

Why do not window.document.write(valores) nor $("body").append(valores) not print on the screen? 

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><linkrel="shortcut icon" type="image/png" href="/media/images/favicon.png">
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">


    <title>custom-ajax</title>

</head>
<body>

 <table class="table table-hover" style ="margin-top: 200px">
  <thead>
    <tr>

      <th style ="color: blue">RE</th>
      <th>Nome</th>
      <th>E-mail</th>
      <th>Escala</th>
    </tr>
  </thead>
  <tbody>
    <tr>

      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
       <td>4x2</td>
    </tr>

<script>
var valores = "";

             $.ajax({
                     dataType:'json',
                     url : './TableData',
                     type : 'GET' ,                

                    success: function(dados) {

                        queryObject = eval('(' + JSON.stringify(dados) + ')');
                        queryObjectLen = queryObject.jsonArray.length;

                       //alert(queryObjectLen.toString());
                        for(var i=0;i<queryObjectLen;i++){ 



                    var nome = queryObject.jsonArray[i].nome;
                    var escala = queryObject.jsonArray[i].escala;


                      valores = valores+"<tr><td>100</td>";
                      valores = valores+"<td>"+nome+"</td>";
                      valores = valores+"<td>123@</td>";
                      valores = valores+"<td>"+escala+"</td></tr>";

                }

            },

                    error: function(xhr, status, error) {

                        alert("erro:"+status+" "+ error);
                    }

                });
     $( "body" ).append(valores);
     window.document.write(valores);
     //window.document.write("<tr><td>teste</td><td>teste</td><td>teste</td><td>teste</td></tr>");
</script>
    <tr>      
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
      <td>4x2</td>
    </tr>

    <tr>  
      <td colspan="2">#</td>
      <td>#</td>
      <td>#</td>
    </tr>

  </tbody>
</table>
</body>
</html>
    
asked by anonymous 05.02.2018 / 00:59

1 answer

2

Without wishing to get into the details of code quality, the problem is only linked to the fact that you are putting the code: 

$( "body" ).append(valores);
window.document.write(valores);

outside of Ajax, so when loading the page, the valores variable is empty, and only after Ajax returns will it have value, because Ajax works without synchronization with page.

Put this code at the end of success of Ajax, but do not use document.write , because in this case it will overwrite the whole page.

Another thing is that it does not make sense to put script in the middle of the table.

    
05.02.2018 / 01:34
Convert fraction of time in the format hh: mm: ss Synchronize player and host movements