CODEWITHSUNDEEP
jqueryhtmlhtml-table
Kwhitejr
Kwhitejr

Reputation: 2306

Append generated data to template table

I want to place newly generated data into an HTML table. The table is based upon a jquery template. I can see the newly generated data in the console log when I inspect elements, but nothing shows up on screen. How do I get the new table entries to show up?

<!DOCTYPE html>
<html>
    <head>
        <script src="js/mail-generator.js"></script>
        <link href="css/style.css" rel="stylesheet" media="screen">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
        <script id="emailTemplate" type="text/x-jquery-tmpl">
            <tr>
                <td class="date"> ${date} </td>
                <td class="date"> ${sender} </td>
                <td class="date"> ${subject} </td>
                <td class="body"> ${body} </td>
            </tr>
        </script>
    <script>
      window.onload = function(){
            $("document").ready(function(){
                window.geemails = [];
                loadGeeMails(); //function places data into window.geemails array
                console.log(window.geemails);


$("#emailTemplate").tmpl(window.geemails).appendTo("#emailContainer");


                setInterval(function(){
                    var myMessage = getNewMessage(); //function generates new message data
                    window.geemails.push(myMessage);
                    console.log(window.geemails);   
                  $("#emailTemplate").tmpl(window.geemails).appendTo("emailContainer");
                }, 5000);
                });
        };
    </script>
    </head>
    <body>
        <table id="table">
            <tr>
                <th class="date">Date</th>
                <th class="date">Sender</th>
                <th class="date">Subject</th>
                <th class="body">Message</th>
            </tr>
            <tbody id="emailContainer">                
            </tbody>    
        </table>
    </body>
</html>

Functions explaining getNewMessage()

function loadGeeMails(){
        for (var i = 0; i < 10; i++){
            var message = generateMessage();
            window.geemails.push(message);
        }
    }

    function generateMessage(date){
        var message = {};
        message.date = date || getRandomDate();
        message.subject = getRandomElement(subject);
        message.sender = getRandomElement(sender);
        message.body = getRandomElement(body);
        return message;
    }

Upvotes: 1

Views: 333

Answers (1)

HGrover
HGrover

Reputation: 225

<script>
 $("document").ready(function(){
           window.geemails = [];
           loadGeeMails(); //function places data into window.geemails array
           console.log(window.geemails);

                 $("#emailTemplate").tmpl(window.geemails).appendTo("#emailContainer");


   setInterval(function(){
      var myMessage = getNewMessage(); //function generates new message data
      window.geemails.push(myMessage);
      console.log(window.geemails);                    $("#emailTemplate").tmpl(window.gmails).appendTo("emailContainer");
                }, 5000);
                
        });


</script>

i am not using the window.onload function as a callback to load the data. Just used doc.ready

Upvotes: 2

Related Questions