JSON Echo

by Dan Shahin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css">
<div class='wrapper'>
    <p id="msg">JSON will be received in 3 seconds</p>
    <ul id='post'></ul>
    <input id="autocomplete">
</div>

JavaScript

toastr.options = {
  "closeButton": false,
  "debug": false,
  "positionClass": "toast-bottom-left",
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

var 
    jsonToPost = {
        color: 'green',
        size: '24px'
    };

$.ajax({
  dataType: "json",
  url: '/echo/json/',
    type: 'POST',
  data: {
        json: JSON.stringify(jsonToPost),
        delay: 3
    },
  success: function(response) {
      toastr.success('got a response: ' + response.color + ' ' + response.size);
      $('#msg').css({color: response.color, 'font-size' : response.size});
    }
});

jsonToPost.color = 'red';
jsonToPost.size = '48px';

$.ajax({
  dataType: "json",
  url: '/echo/json/',
    type: 'POST',
  data: {
        json: JSON.stringify(jsonToPost),
        delay: 6
    },
  success: function(response) {
      toastr.success('got a response: ' + response.color + ' ' + response.size);
      $('#msg').css({color: response.color, 'font-size' : response.size});
    }
});



$( "#autocomplete" ).autocomplete({
    source: function( req, resp ) {
        $.post( "/echo/json/", {
            json: JSON.stringify(['foo','bar','baz','shim','sham']),
            delay: 1
        }, function(data) {
            resp( data );
        }, "JSON" );
    }
});