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);
};

// The Promise and handler
var resolveLater, promise = new Promise(function (resolve, reject) {
    resolveLater = resolve;
});

var fetchHTML = function (url) {
    resolveLater(
        $.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);