JSFiddle - React, Tailwind, and code Playground

by Gerald Gillespie

HTML

<div id="container"></div>
<input type="button" id="feedback" value="submit me"/>

JavaScript

$('#container').html('waiting...');


// Application logic
var submittingFeedback = new $.Deferred();
alert('submittingFeedback deferred object created: '+submittingFeedback.state());

var savingFeedback = submittingFeedback.pipe(function(input) {
       alert('in pipe...submittingFeedback: '+submittingFeedback.state()+'\nsaving: '+savingFeedback.state());
    return setTimeout(function() {
       alert('in pipe...submittingFeedback: '+submittingFeedback.state()+'\nsaving: '+savingFeedback.state());
       
    //    submittingFeedback.resolve();
    }, 5000);
    
    // return $.post("/feedback", input);
});

// DOM interaction
$("#feedback").click(function() {
  submittingFeedback.resolve( 'some text that we\'ll pretend is from a form'); // $("textarea", this).val());
  return false;  // prevent default form behavior
});
submittingFeedback.done(function(t) {
$('#container').append(t+ ' was submitted');                                   
  $("#container").append("<div class='spinner'>*spin*</div>");
    alert('in deffered\'s done: '+submittingFeedback.state());

});

savingFeedback.done(function() {
    alert('submitting done status: '+ submittingFeedback.state()+'\nsaving status: '+savingFeedback.state());
  $("#container").append("<p>Thank you for your feedback!</p>");
})
.fail( function() {
    alert('submitting fail status: '+ submittingFeedback.state()+'\nsaving status: '+savingFeedback.state());
    $("#container").append("<p>There was an error contacting the server.</p>");
})
.progress(function() {
    alert('submitting progress status: '+ submittingFeedback.state()+'\nsaving status: '+savingFeedback.state());
    $(".spinner").remove();
});
    


/*
savingFeedback.then(function() {
  $("#container").append("<p>Thank you for your feedback!</p>");
}, function() {
  $("#container").append("<p>There was an error contacting the server.</p>");
}, function() {
  $(".spinner").remove();
});*/