JSFiddle - React, Tailwind, and code Playground

by johnbk

HTML

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>jQuery LoadMask Demo</title>
        <link href="http://jquery-loadmask.googlecode.com/svn/trunk/src/jquery.loadmask.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type='text/javascript' src='http://jquery-loadmask.googlecode.com/svn/trunk/src/jquery.loadmask.js'></script>
        <style>
            body{font-size:11px;font-family:tahoma;}
            #content { padding:5px;width:200px; }
            #buttons { padding-left:40px; }
        </style>
    </head>
    <body>
        Please fill out the form:
        <div id="content">
            <div>Field1: <input type="text"></div>
            <div>Field2: <input type="text"></div>
            <div>Field3: <input type="text"></div>
            <div>Field4: <input type="text"></div>
        </div>
        <div id="buttons">
            <input type="button" value="Process" id="process">
            <input type="button" value="Cancel" id="cancel">
        </div>
    </body>
</html>

JavaScript

$(document).ready(function() {
    $("#process").bind("click", function() {
        $("#content").mask("Waiting...");
        var data = {
            json: $.toJSON({
                text: 'Echo JSON'
            }),
            delay: 2
        };
        $.ajax({
            //post the request to /echo/json/ and specify the correct datatype
            url: '/echo/json/',
            dataType: 'json',
            data: data,
            success: function(data) {
                //you get back exactly what you sent in the json 
                alert(data.text);
                $('#result').html(data.text);
            },
            type: 'POST'
        });

    });

    $("#cancel").bind("click", function() {
        $("#content").unmask();
    });
});