JSFiddle - React, Tailwind, and code Playground

by powerMugen

HTML

<h1>Global Ajax Handler Demo</h1>
    <div id="container"></div>
    <div>
        <button id="loadTest1">Load Test 1</button>
    
</div>

<div id="test">
    <div class="test">test cont</div>
</div>

CSS

#container {width: 500px; height: 500px; border: 1px solid black;}

JavaScript

$(document).ready(function(){
            
            $('#loadTest1').click(function(){
                var test = $('#test').html();
                $('#container').load('/echo/html/',{ html: test });

            });
            
            //listen for ajaxSuccess
            $(document).ajaxComplete(function(event, XmlHttpRequest, ajaxOptions){
                console.log(event);
                console.log(XmlHttpRequest);
                console.log(ajaxOptions);
  
                    alert('#test was called. now i will manipulate the html contents loaded from #test');
                    $('#container .test').css('color', 'red');
                    console.log($('#container').html());
        
            });
        });