JSFiddle - React, Tailwind, and code Playground

by bsodmike

HTML

<button>CLICK ME!</button>
<p>test p</p>
<div>test</div>

JavaScript

var def, getData, updateUI, resolvePromise;
    
    // The Promise and handler
    def = new $.Deferred();

    updateUI = function (data) {
        console.log('called', data)
        $('p').html('I got the data!');
        $('div').html(data);
    };
    
    // Event Handler
    resolvePromise = function (ev) {
        ev.preventDefault();
        def.resolve(ev.type, this);
        return def.promise();
    };

    def.then(function() {
        $.ajax({
              url: '/echo/html/', 
              data: {
                  html: 'testhtml', 
                  delay: 3
              }, 
              type: 'post'
        })
        .done(function(data) {
            updateUI(data);
        })
        .fail(function (error) {
            throw new Error("Error getting the data");
        });
        
    });

    def.done(function(promiseValue, el) {
        console.log('The promise was resolved by: ', promiseValue, ' on ', el);
    });
    
    // Bind the Event
    $(document).on('click', 'button', resolvePromise);