JSFiddle - React, Tailwind, and code Playground

by Marc Brooks

HTML

<body>
    <div id="loading" class="hidden">LOADING...</div>
    <p id="hello">Hello World</p>
</body>

JavaScript

var divvy = function (thing) {
    var d = $('<div></div>');
    d.text(thing === undefined ? '[undefined]' : thing.toString());
    $(d).appendTo("body");
};

// prove basic Ajax functionality working
$.ajax({
    data: {
        html: "some html to echo",
        delay: 2 //delays echo response 2 seconds 
    },
    url: "/echo/html/",
    type: "POST",
    success: function (data, textStatus, jqXHR) {
        divvy(data);
        divvy(textStatus);
    }
});

// adding the setTimeout function to let the first example
// complete before this one runs.
setTimeout(function () {
    $.ajax({
        url: "/doesntExistURL",
        error: function (jqXHR, textStatus, errorThrown, response) {
            divvy(jqXHR);
            divvy(textStatus);
            divvy(errorThrown);
            divvy(response);
        }
    });
}, 6000);