JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

CSS

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
li {
    display: block;
    float: left;
    height: 100px;
    font-size:11px;
    border: 1px solid #000;
}
li a {
    display: block;
    width: 100px;
    height: 50px;
    float:left;
    margin: 10px;
}
li p {
    width: 75px;
    height: 100px;
    float: left;
    margin: 20px;
}

JavaScript

$(document).ready(function () {

    /* AJAX ERROR debugging setup */
    $.ajaxSetup({
        error: function (jqXHR, exception) {
            if (jqXHR.status === 0) {
                alert('Not connect.\n Verify Network.');
            } else if (jqXHR.status == 404) {
                alert('Requested page not found. [404]');
            } else if (jqXHR.status == 500) {
                alert('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                console.log(jqXHR);
                alert('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                alert('Time out error.');
            } else if (exception === 'abort') {
                alert('Ajax request aborted.');
            } else {
                alert('Uncaught Error.\n' + jqXHR.responseText);
            }
        }
    });


    var eventlog = {
            "cookieHash": "53e0e960-1000-11e3-8f03-d5eaed75c48b",
            "pageHref": "http://fiddle.jshell.net/_display/?utm=999&trkId=999-999",
            "pageTitle": document.title,
        //"display": true
    };

    $.ajax({
        type: "GET",
        url: 'http://dev.gpcontent.com/insite/eventAPI?' + $.param(eventlog),
        dataType: 'jsonp',

        success: function (data) {
            console.log('success!', data);

            /*
            var results = data[0];
            
            results = results.reverse();

            $('body').append('<ul id="pageList"></ul>')
            $.each(results, function (i) {
                $('#pageList').append('<li><a href="' + this['pageHref'] + '">' + this['pageTitle'] + '</a><p> - ' + this['timeStamp'] + '</p></li>');
            });
            $('#pageList li:odd').css('background-color', '#f60')
*/
        }
    });
});