JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Master Page<h3>
    <div id="errorMsg" style="color: red;"></div>
    <button id="loadValid">Load Valid Link</button>
    <button id="loadError">Load Invalid Link</button>
    <div id="childContent"></div>

JavaScript

$(function() {
    $("#loadValid").on("click", function() {
        loadUrl("/echo/html/"); // Should echo back some html
    });
    
    $("#loadError").on("click", function() {
        loadUrl("/echo/foo"); // Not a valid url
    });
});

function loadUrl(contentUrl) {
    var request = $.ajax({
        url: contentUrl,
        type: "POST",
        data: { html: "<h4>Test Response Data</h4>" }
    });
        
    request.done(function(data) {
        $("#childContent").html(data);
    });
    
    request.fail(function(xhr, status, msg) {
        var displayMsg = "Request could not be completed. ";
        if (status === "error") {
            switch (xhr.status) {
                case 404: 
                    displayMsg += "The content could not be found.";
                    break;
                default:
                    displayMsg += msg;
                    break;
            }
        } else {
            displayMsg += msg;
        }
        $("#errorMsg").text(displayMsg);
    });
}