JSFiddle - React, Tailwind, and code Playground

by ericbarnard

HTML

<label for="spreadsheetId">
Spreadsheet Id:    <input class="userInput" type="text" id="spreadsheetId" value="0AtLECWwqJYmYdHQ0UGZ5c21hdG1xcFRYR1lfVGM4d2c"/>
</label>
<br/>
<label for="query">
Query:    <input class="userInput" type="text" id="query" value="select A, B, C WHERE A=46123"/>
</label>
<br/>

<label for="formstackInput">
    Example Formstack Box:
    <input type="text" id="formstackInput"/>
</label>
<br/>
<button id="pullData">Pull Data</button>
<br/>

<div id="resultSet">
    <iframe src="https://docs.google.com/spreadsheet/tq?tqx=out:html&tq=select+A%2C+B%2C+C+WHERE+A%3D46123&key=0AtLECWwqJYmYdHQ0UGZ5c21hdG1xcFRYR1lfVGM4d2c"/>        
</div>

CSS

.userInput{
     width: 300px;
     height: 40px;  
}

JavaScript

(function($){

    var RANDOM_BASE = "abcdefghijklmnopqrstuvwxyz0123456789";
    var CALLBACK_PREFIX = "sscallback";
    var DEFAULT_PARAM = {
        version : "0.6"
    };
    var reqId = 0;
    
    function getRandom(length) {
        length = length || 10;
        var r = "";
        while(r.length<length) {
            r += RANDOM_BASE.charAt(Math.floor(RANDOM_BASE.length*Math.random()))||"";
        }
        return r;
    }
        
    function serializeParam(param) {
        var r = [];
        param.out = "json";
        for(var i in param) {
            r.push([i,param[i]].join(":"));
        }
        return r.join(";");
    }
    
    function ss(url,param) {

        param = $.extend(DEFAULT_PARAM,param);
        var _query;
        var _field;

        function setQuery(query) {
            _query = query;
            return rtn;
        }
        
        function setField(field) {
            _field = field;
            return rtn;
        }
        
        function complete(res,callback) {
            if(/^(ok|warning)$/.test(res.status)) {
                var tbl = res.table;
                var rows = [];
                var fld = _field || [];
                if(typeof fld == "string") fld = fld.split(",")
                $.each(tbl.rows,function(){
                    var obj = {};
                    var row = this;
                    var cols = row.c;
                    $.each(cols,function(i){
                        obj[fld[i]||i] = (this||{}).v;
                    });
                    rows.push(obj);
                });
                callback.apply($(rows),[true]);
            } else {
                callback.apply({
                    errors : res.errors||[]
                },[false]);
            }
            
        }
        
        function send(callback) {
            var tqx = "";
            var rid = reqId++;
            do {
                var handlerName = CALLBACK_PREFIX+getRandom(20);
            }...