JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div id="ajaxContainer">
    <button class="ajaxLoad">click</button>
</div>

CSS

body{margin:30px;}
#ajaxContainer{
    width:200px;
    height:200px;
    border:1px solid #000;
    border-radius:10px;
}


.overlay{
    width:100%;
    height:100%;
    top:0;
    left:0;
    background: rgba(0, 0, 0, 0.4) url(http://shrek.seetickets.nl/Images/ajax-loader.gif) center center;
    background-repeat:no-repeat;
    border-radius:9px;
}

.loadingText {
    color: #FFFFFF;
    position: relative;
    text-align: center;
    top: 65%;
}

JavaScript

$.fn.ajaxLoad = function(container) {
    this.unbind();
    return this.each(function() {
        var $this = $(this);
        $this.on("click", function (e) {
            e.preventDefault();
            var dataUrl = $(this).attr("data-url");
            var ajaxContainer = container;
            $.ajax({
                type:"POST",
                url:'http://jsfiddle.net/echo/jsonp/',
                cache:false,
               beforeSend: function(){
                 $this.closest(container).html('<div class="overlay"><div class="loadingText">Loading..</div></div>');
               },                
                success:function (data) {
                    ajaxContainer.empty().append(data);
                },
                complete:function () {
                    //load functions that need to executed after ajax loaded
                    $.getScript('/js/app/jquery.ajax.function.js', function () {});
                }
            });
        });
    });
};
$('.ajaxLoad').ajaxLoad($('#ajaxContainer'));