JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result">initial div content</div>
<button>Load AJAX</button>

JavaScript

var $result;
$(function(){
  $result = $('#result');
    $('button').bind({
      'click':function(){
          
          $.ajax({
              url: '/echo/json/?delay=6',
              dataType: 'json',
              type: 'POST',
              data: {'test':true,'hear':'me','int':1},
              retry_limit: 1,
              try_count: 0,
              cache: false,
              timeout: 5000,
              'success': function(data, text, xhr){
                  $result.html(data.toSource());
              },
              'error': function(xhr, status, error){
                  if (this.retry_limit && status === 'timeout') {
                        this.try_count++;
                        if (this.try_count <= this.retry_limit) {
                            // Uncommenting this line will fix the problem
                            //this.dataType = "text json";
                            
                            this.url = 
                                this.url.indexOf('_try_count=') === -1? 
                                (this.url + '&_try_count=' + this.try_count) : 
                                (this.url.replace(/_try_count=(\d+)/, '_try_count=' + this.try_count));
                            this.url = this.url.replace('delay=6', ''); // remove delay so it can reach "success"
                            
                            $.ajax(this);
                            return false;
                        }                      
                  }
                  
                  $result.html('Error reached, check Firebug for the called URLs, second one should have a jQuery JSONP callback added, even though its a JSON only call!');
              }
          });
      }
    });  
});