JSFiddle - React, Tailwind, and code Playground

by tjnicolaides

HTML

<div class="ajax-target-1">placeholder</div>
<div class="ajax-target-2">placeholder</div>

CSS

body {
    font-family: "Arial", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}
.ajax-target-1 {
    color: red;
}

.ajax-target-2 {
    color: green;
}

JavaScript

$(function () {
    $(document).ajaxError(function (event, jqXHR, ajaxSettings, thrownError) {

        // This is the default error handler for ajax request.

        // Extract all the information required to understand.
        var requestResponse = {
            url: ajaxSettings.url,
            method: ajaxSettings.type,
            data: ajaxSettings.data,
            httpStatus: jqXHR.status,
            msg: thrownError || jqXHR.statusText,
            data: ajaxSettings.data
        };

        console.error(requestResponse);
        // log the error with a tracking system here?

        // Notify the user
        //alert('Something went wrong, Please try again');

    }).ajaxComplete(function (event, jqXHR, ajaxSettings, thrownError) {

        // This is the default complete handler for ajax request. It fires whether an AJAX request finishes successfully or not.

        // Extract all the information required to understand.
        var requestResponse = {
            url: ajaxSettings.url,
            method: ajaxSettings.type,
            data: ajaxSettings.data,
            httpStatus: jqXHR.status,
            msg: thrownError || jqXHR.statusText,
            data: ajaxSettings.data
        };

        console.log(requestResponse);
        // log the attempt with a tracking system here?
    });
});

$(function () {
	$.ajax({
    	'url': '/broken-endpoint/', 
        'success': function(data){
        	// render text / HTML with the data response
            $('.ajax-target-1').text(JSON.stringify(data));
        }
    });
    
    $.ajax({
    	'url': '/echo/json/', 
        'success': function(data){
        	// render text / HTML with the data response
            console.log(data);
            $('.ajax-target-2').text(JSON.stringify(data));
        }
    });
});