JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<button id="ajax-button">Add an Ajax Request</button>
<button id="non-ajax-button">Add a non-ajax request</button>
<button id="save">Save</button>

JavaScript

var Application = {};
Application.Editor = {};

var continueWithSave = true;
Application.Editor.StopSave = function(){
  continueWithSave = false;
}

var getAjax = function(){
  return  $.ajax({
            url: '/echo/html/',
            success: function(data) {
                alert('ajax request complete');
            }
        });
};
var getNonAjax = function(){
  alert("non ajax");
  return { not : "an ajax request" };
};
 var globalCallback = function(){
    if (continueWithSave){
      alert("all requests done");
    }else{
      alert("save was stopped by a request");
    }
  }
  
  
  var saveStack = [];
Application.Editor.BeforeSave = function(fn){
  saveStack.push(fn);
}
  
Application.Editor.doSave = function(){
  var requests = [];
   for (var fn in saveStack)
   {
     if (typeof fn === "function"){
         requests.push(fn());
     }
   }
  $.when.apply(null, requests).then(globalCallback);
}



/*gui code*/
$("#ajax-button").click(function(){
  Application.Editor.BeforeSave(getAjax);
});
$("#non-ajax-button").click(function(){
  Application.Editor.BeforeSave(getNonAjax);
});
$("#save").click(function(){
  Application.Editor.doSave();
});
/*end gui code*/