Document.Write with variable does not print

Asked

Viewed 504 times

1

Why the window.document.write(valores) nor the $("body").append(valores) do not print on 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>


    <link rel="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>
javascript html table

1 answer

2


Without wanting to go into details of the quality of the code, 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 variable valores is empty, and only after the return of Ajax will it have value, because Ajax works without sync with page loading.

Put this code at the end of success from Ajax, but don’t use document.write, because in this case it will overwrite the entire page.

Another thing is that it makes no sense to put the script in the middle of the table.

  • Thanks for the help, what would be the best way to take the values of AJAX and mount the table?

  • 1

    Dude, basically you assemble the table without the lines that will come from Ajax, and then on the return of Ajax you will use append to add the rows in the table.

  • Ok, thanks! I will study the append to popular the table. Thanks!

  • If you have any questions, you can ask or open a new question. Abs!

Browser other questions tagged javascript html table

You are not signed in. Login or sign up in order to post.