JSFiddle - React, Tailwind, and code Playground

by jacobwsmith

HTML

<button onclick="complete();">
  Complete
</button>
<hr>
Output:
<div id="output">Waiting...</div>

CSS

body button{
  font-family: Arial;
  font-size: 16px;
}
#output {
    display: block;
    margin-top: 8px;
    padding: 1%;
    border: 1px solid #ccc;
    background-color: #efefef;
    
}

JavaScript

// =======================================================
// Ajax request
// =======================================================
function complete(){
	console.log('--- complete ---');
  var obj = {
  	"foo": "bar",
    "value": test
  }
  $.ajax({
        url:'/echo/js/?js='+JSON.stringify(obj),
        complete: function (response) {
            $('#output').html(response.responseText);
            var obj = JSON.parse(response.responseText);
            download('', obj.value);
        },
        error: function () {
            $('#output').html('Bummer: there was an error!');
        },
    });
    return false;
}
// =======================================================
// Downloads Binary file
// =======================================================
function download(binaryString){
	console.log('--- download ---');
  console.log(binaryString);
}

// testing blob
var test = "UEsDBAoAAAgAANFwfkmu/5/cCQAAAAkAAAAJAAAAZmlsZTEudHh0Y29udGVudCAxUEsDBAoAAAgAANFwfkkUrpZFCQAAAAkAAAAJAAAAZmlsZTIudHh0Y29udGVudCAyUEsBAgoACgAACAAA0XB+Sa7/n9wJAAAACQAAAAkAAAAAAAAAAAAAAAAAAAAAAGZpbGUxLnR4dFBLAQIKAAoAAAgAANFwfkkUrpZFCQAAAAkAAAAJAAAAAAAAAAAAAAAAADAAAABmaWxlMi50eHRQSwUGAAAAAAIAAgBuAAAAYAAAAAAA";