JSFiddle - React, Tailwind, and code Playground

by RaphaelDDL

HTML

<div class="ajaxTester"> <a href="#" class="atTrigger">Click to Run Ajax</a> 
    <textarea class="atOutput" cols="30" rows="10">Ajax Output</textarea>
    <div class="atConsole">
        <p>Status (newest first):</p>
        <ul></ul>
    </div>
</div>

CSS

a.atTrigger {
    background:black;
    border-radius:4px;
    padding:5px 10px;
    color:#fff;
    display:inline-block;
    margin:10px 5px;
    text-decoration: none;
}
.atOutput {
    width: 100%;
    height: 250px;
}
.atConsole, .atOutput {
    background-color: rgb(39, 40, 34);
    font:12px/16px Consolas, Inconsolata, Monaco, monospace;
    color:rgb(208, 208, 202);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
    border-radius:2px;
    border:1px solid rgba(0, 0, 0, .5);
}
.atConsole ul {
    padding: 0 0 10px;
    margin: 0 auto 10px;
}
.atConsole ul, .atConsole li {
    list-style:none;
    display: block;
}
.atConsole li {
    padding:0 5px;
    margin: 0 auto 5px;
}
.atConsole li:before {
    content:"> ";
    margin:0 5px 0 0;
}
.atConsole li:first-child {
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: bold;
}
.atConsole .error {
    color:red !important;
}
.atConsole .working {
    color:yellow !important;
}
.atConsole .done {
    color:lightblue !important;
}
.atConsole .ok {
    color:green !important;
}

JavaScript

//* =============================================
// Configure your Ajax
//================================================ */
var ajaxOptions = {
    url: "http://jsfiddle.net/echo/jsonp/", //your url
    type: "get", //post or get
    dataType: "jsonp", //jsonp, html, xml, json
    data: { //object. Leave empty object {} if no use
        someData: "someInfo"
    }
};

//* =============================================
// No need to modify below
//================================================ */
$(function () {
    "use strict";
    $('a.atTrigger').on('click', function (e) {
        e.preventDefault();

        var $ajaxOutput = $('.atOutput'),
            $ajaxConsole = $('.atConsole ul');
        
        $.ajax({
            url: ajaxOptions.url,
            type: ajaxOptions.type,
            data: ajaxOptions.data,
            dataType: ajaxOptions.dataType,
            beforeSend: function () {
                $('<li>').addClass('working').html('Starting Ajax ~~ beforeSend <br /><br />URL: '+ajaxOptions.url+'<br />Type: '+ajaxOptions.type+'<br />data: '+JSON.stringify(ajaxOptions.data)+'<br />dataType: '+ajaxOptions.dataType).prependTo($ajaxConsole);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $('<li>').addClass('error').html('Ajax Failed ~~ error<br />See textarea and browser\'s console for more details.').prependTo($ajaxConsole);
                $ajaxOutput.val('textStatus:' + textStatus + '\nerrorThrown:' + errorThrown);
            },
            success: function (data) {
                $('<li>').addClass('done').html('Ajax Successful ~~ success <br />See textarea and browser\'s console for more details.').prependTo($ajaxConsole);
                if ($.type(data) == "object") {
                    $ajaxOutput.val(JSON.stringify(data));
                } else {
                    $ajaxOutput.val(data.toString());
                }
                console.log(data);
            },
           ...