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;

    $.ajax({
        url: '/echo/html/',
        data: {
            html: '<p>Return html payload</p>',
            delay: 3
        },
        type: 'post'
    })
    .done(function (data) {
        updateUI(data);
    })
    .fail(function (error) {
        reject(Error("Error getting the data"));
    });

});

// Event Handler
var resolvePromise = function (ev) {
    ev.preventDefault();
    resolveLater({
        el: this,
        event: ev
    });
};

promise.then(function (data) {
    console.log('The promise was resolved by: ', data.event.type, ' on ', data.el);
})
.catch(function (err) {
    console.log('Error: %O', err);
    $('.error-info').add('<p>').html(err);
});

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