Title: Sheetrock.js not rendering in WordPress
Last modified: August 30, 2016

---

# Sheetrock.js not rendering in WordPress

 *  [davidg1982](https://wordpress.org/support/users/davidg1982/)
 * (@davidg1982)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/sheetrockjs-not-rendering-in-wordpress/)
 * I am using another CMS called Monstra and I am running Sheetrock.js (from [here](http://chriszarate.github.io/sheetrock/)).
   I am in the process of trying to convert to WordPress ([Test website](http://test.4x2h4.org))
   from Monstra ([my current website](http://www.4x2h4.org)) (needed some extra 
   features) and Sheetrock isn’t working on my pages and I don’t know why.
 * I’ve been able to get the scripts to be called in the header by using the CSS&
   JavaScript Toolbox Plugin, but I am not sure how to get my table to show up.
   
   This is the code I am trying to put into my home page.
 *     ```
       <table  class="table table-condensed table-striped">
         <tr><td>{{cells.Run}}</td><td>{{formatDate cells.Date "long"}}</td><td>{{cells.Hare}}</td><td>{{cells.Location}}</td>
         <td>
         <a href="{{cells.Maplink}}"><button class="btn btn-info">Map link</button></a></td>
       </tr>
       </table>
       ```
   
 * My javascript from the Toolbox in HTML format:
 *     ```
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
       <script src="http://test.4x2h4.org/wp-includes/js/sheetrock.min.js"></script>
       <script src="http://test.4x2h4.org/wp-includes/js/handlebars.min.js"></script>
       <script src="http://test.4x2h4.org/wp-includes/js/moment.min.js"></script>
       ```
   
 * The Sheetrock script to call up the info from the Toolbox in HTML format:
 *     ```
       <script>
       // Sheetrock.js 1.0 Example 1
       // https://chriszarate.github.io/sheetrock/
       // The most basic use case of Sheetrock simply fetches the an
       // entire worksheet and loads it into a <table>.
       // Define spreadsheet URL.
   
       /**
        * The CenterControl adds a control to the map that recenters the map on Chicago.
        * This constructor takes the control DIV as an argument.
        * @constructor
        */
       function CenterControl(controlDiv, map, location) {
   
         // Set CSS for the control border
         var controlUI = document.createElement('div');
         controlUI.style.backgroundColor = '#fff';
         controlUI.style.border = '2px solid #fff';
         controlUI.style.borderRadius = '3px';
         controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
         controlUI.style.cursor = 'pointer';
         controlUI.style.marginBottom = '22px';
         controlUI.style.textAlign = 'center';
         controlUI.title = 'Click to recenter the map';
         controlDiv.appendChild(controlUI);
   
         // Set CSS for the control interior
         var controlText = document.createElement('div');
         controlText.style.color = 'rgb(25,25,25)';
         controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
         controlText.style.fontSize = '16px';
         controlText.style.lineHeight = '38px';
         controlText.style.paddingLeft = '5px';
         controlText.style.paddingRight = '5px';
         controlText.innerHTML = 'Center Map';
         controlUI.appendChild(controlText);
   
         // Setup the click event listeners: simply set the map to
         // Chicago
         google.maps.event.addDomListener(controlUI, 'click', function() {
           map.setCenter(location)
         });
   
       }
   
       var myCallback = function (error, options, response) {
         if (!error) {
           /*
             Parse response.data, loop through response.rows, or do something with
             response.html.
           */
   
               var address = response.rows[1].cells.Location;
   
                 geocoder = new google.maps.Geocoder();
             var latlng = new google.maps.LatLng(53.3496, -6.3263);
             var mapOptions =
             {
               zoom: 16,
               center: latlng
             }
             map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   
             }
   
              geocoder.geocode( {address:address}, function(results, status)
             {
               if (status == google.maps.GeocoderStatus.OK)
               {
                 map.setCenter(results[0].geometry.location);//center the map over the result
                 //place a marker at the location
               // Create the DIV to hold the control and
         // call the CenterControl() constructor passing
         // in this DIV.
         var centerControlDiv = document.createElement('div');
         var centerControl = new CenterControl(centerControlDiv, map, results[0].geometry.location);
   
         centerControlDiv.index = 1;
         map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);
   
                 var marker = new google.maps.Marker(
                 {
                     map: map,
                     position: results[0].geometry.location
                 });
               } else {
                 alert('Geocode was not successful for the following reason: ' + status);
              }
             });
       }; //end callback
   
        var today = new Date();
           var dd = today.getDate();
           var mm = today.getMonth()+1; //January is 0!
   
           var yyyy = today.getFullYear();
           if(dd<10){
               dd='0'+dd
           }
           if(mm<10){
               mm='0'+mm
           }
           var today = yyyy+'-'+mm+'-'+dd;
   
         $(document).ready(function(){
         function get_numbers(input) {
           return input.match(/[0-9]+/g);
       }
   
       function pad(num, size) {
           var s = num+"";
           while (s.length < size) s = "0" + s;
           return s;
       }
       var DateFormats = {
              short: "DD MMMM - YYYY",
              long: "dddd, MMMM DD, YYYY"
       };
   
       Handlebars.registerHelper("formatDate", function(datetime, format) {
           if(datetime != "Date"){
   
           time_format = get_numbers(datetime);
   
       var final_format = pad(time_format[0], 2)+"-"+pad(parseInt(time_format[1]) + 1 , 2)+"-"+pad(time_format[2], 2);
   
         if (moment) {
           // can use other formats like 'lll' too
           format = DateFormats[format] || format;
           return moment(final_format).format(format);
         }
         else {
           return datetime;
         }
   
       }else{
           return "Date";
       }
       });
   
       Handlebars.registerHelper('if_eq', function(a, b, opts) {
           if(a == b) // Or === depending on your needs
               return opts.fn(this);
           else
               return opts.inverse(this);
       });
   
       var RBITemplate = Handlebars.compile($('#handlebars-template').html());
   
       var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1HQXajYPNn3AaaiA3X0A3NsDCRq7WjQzheDbLHsKrQyM/edit?gid=0';
       // Load an entire worksheet.
       $('#statistics').sheetrock({
       url: mySpreadsheet,
       query: "select  * where B >= date '"+today+"' order by B asc limit 1",
       rowTemplate: RBITemplate,
       callback : myCallback
   
       });
   
       });
       </script>
       ```
   
 * Please assist. Thanks in advance.

The topic ‘Sheetrock.js not rendering in WordPress’ is closed to new replies.

## Tags

 * [Google Sheets](https://wordpress.org/support/topic-tag/google-sheets/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [tables](https://wordpress.org/support/topic-tag/tables/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 0 replies
 * 1 participant
 * Last reply from: [davidg1982](https://wordpress.org/support/users/davidg1982/)
 * Last activity: [10 years, 9 months ago](https://wordpress.org/support/topic/sheetrockjs-not-rendering-in-wordpress/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics