JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<link rel="stylesheet" href="http://tapmodo.github.io/jsintro/project/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"></script>
<script src="http://tapmodo.github.io/jsintro/js/underscore.js"></script>
<div class="container">

    <div class="header">
      <ul class="nav nav-pills pull-right">
        <li><a href="http://tapmodo.github.io/jsintro/">Class Home</a></li>
      </ul>
      <h3 class="text-muted">Form Post Results</h3>
    </div>

    <div class="row">
      <div class="col-lg-12">

        <div class="pull-right">
          <button class="btn btn-info btn-sm" id="refresh" disabled>
            Refresh (not available)
          </button>
        </div>

        <h1 style="margin:0 0 0.5em;">Recent Form Posts</h1>

        <div id="output"></div>

      </div>
    </div>

  </div>

<!--    <script type="text/template" id="resultsTpl">
    <% for(var i=0; i<row.length; i++) { %>
      <h3><%= row[i].name %></h3>
      <%= row[i].zip %><br>
      <%= row[i].date %><br>
      <%= row[i].createdAt %><br>
    <% } %>
     </script> -->
          
<!-- this is for 11.3 -->
<script type="text/template" id="resultsTpl">
    <table class="table">
          <thead>
              <tr>
                  <th>Name</th>
                  <th>Zip Code</th>
                  <th>Date</th>
              </tr>
          </thead>
    <% for(var i=0; i<row.length; i++) { %>
          <tbody>
              <tr>
                  <td><%= row[i].name %></td>
                  <td><%= row[i].zip %></td>
                  <td><%= row[i].date %></td>
                  <!--<td><%= row[i].createdAt %></td> -->
              </tr>
          </tbody>

    <% } %>
    </table>
  </script>

JavaScript

//Act 11.1 through 11.3

$(function(){

        // THIS FUNCTION IS CALLED WHEN THE DATA IS RECEIVED FROM THE SERVER
        // (see $.get() call below)
        function gotResults(data){
            // Check that you are getting the result data:
            // console.log(data);
            console.log(data);
            // 1. create a variable to hold the template
            // assign (inner) HTML content from embedded script at end of file
            var tmpl = $("#resultsTpl").html();
            
            // 2. create a variable to hold the ouput
            var templateOutput = _.template( tmpl, { row: data });
  
            // assign result of _.template() method call using input and data
            // HINT: pass the server data to _.template as { row: data }

            // 3. set the contents of #output to template result
            $("#output").html(templateOutput);
        }

        // JSONP CALL TO SERVER FOR RECENT POSTINGS DATA
        $.get(
            'http://jsintro.apps.tapmodo.net/query?callback=?',
            gotResults,
            'jsonp'
        );

    });