JSFiddle - React, Tailwind, and code Playground

by dwaddell

HTML

<div id="ContainingDiv">
    
    <textarea id="TextareaOne"></textarea>
    
    <br/>
    <br/>
    
    <textarea id="TextareaTwo"></textarea>

<br/>
    <br/>
    
    <textarea id="TextareaThree"></textarea>
<br/>
    <br/>
    
    <textarea id="TextareaFour"></textarea>    
</div>


<div id="InformationDiv">
    <div>Information Div</div>
    <div id="CursorPositionInformation"></div>
    <div id="TextareaPositionInformation"></div>
    <div id="EventInformation"></div>
</div>

CSS

#ContainingDiv
{
 border-style:solid;
border-width:1px;    
}

#InformationDiv
{
 border-style:solid;
    border-width:1px;
    border-color:blue;    
}


.EventError
{
background-color:red;        
}

JavaScript

$('#ContainingDiv').on('click', function(event) {
    console.log('Clicking in the container..');
    console.log(event.target);

    $('#EventInformation').empty().append('<div class="InformationDetail">Clicked: ' + event.target.id + '</div>');
});


function fnMouseDownTextareaOne(event) {
    console.log(event);
    $.ajax({
        url: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js",
        async: true,
        complete: function() {
            console.log("AJAX COMPLETE");
        }
    });
    console.log("TextArea1 Mousedown");
}

var TextareaOne = document.getElementById("TextareaOne");
TextareaOne.addEventListener('mousedown', fnMouseDownTextareaOne, false);

/*$('#TextareaOne').on('mousedown', function(event) {
    $.ajax({
        url: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js",
        async: true,
        complete: function() {
            console.log("AJAX COMPLETE");
        }
    });
    console.log("TextArea1 Mousedown");
}).on('click', function() {
    console.log("TextArea1 Click");
});*/

function fnMouseDownTextareaTwo(event) {
    var req = new XMLHttpRequest();
    
    req.open('GET', 'http://jsfiddle.net/dwaddell/xSBxW/13/', false);
    req.send(null);
req.onreadystatechange = function() {
        console.log('XHR');
        if (req.readyState == 4) {
            console.log("AJAX COMPLETE");
            // console.log(req.responseText);
        }
    };
    console.log("TextArea2 Mousedown");
}

var TextareaTwo = document.getElementById("TextareaTwo");
TextareaTwo.addEventListener('mousedown', fnMouseDownTextareaTwo, false);

/*$('#TextareaTwo').on('mousedown', function(event) {
    $.ajax({
        url: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js",
        async: false,
        complete: function() {
            console.log("AJAX COMPLETE");
        }
    });
    console.log("TextArea2 Mousedown");
}).on('click', function() {
    console.log("TextArea2...