JSFiddle - React, Tailwind, and code Playground

by bsodmike

HTML

<button>CLICK ME!</button>
<div class='data'></div>
<div class='error-info'></div>

JavaScript

var updateUI = function (data) {
    console.log('I got the data! %O', data)
    $('.data').html(data);
};

var fetchHTML = function (url) {
    var promise = Promise.resolve(
    $.ajax({
        url: url,
        data: {
            html: '<p>Return html payload</p>',
            delay: 3
        },
        type: 'post'
    }));

    promise.then(function (data) {
        updateUI(data);
    })
    .catch(function (err) {
        // Handle error
        console.log('Error: %O', err);
        $('.error-info').add('<p>').html('Error: ' + err.statusText + ' (' + err.status + ')');
    });

};

// Event Handler
var resolvePromise = function (ev) {
    ev.preventDefault();
    fetchHTML('/echo/html/');
};

// Bind the Event
$(document).on('click', 'button', resolvePromise);