JSFiddle - React, Tailwind, and code Playground

by littlesandra88

HTML

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>


    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
    <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
    <link rel="stylesheet" type="text/css" href="/stylesheet.css" media="all">
    <!-- test -->
    <link rel="stylesheet" type="text/css" media="screen, projection" href="/screen.css" />
    <link rel="stylesheet"  type="text/css" media="screen, projection" href="/buttons-screen.css" />

    <style type="text/css">
      #loginContent { width: 350px; margin: 100px auto; }
    </style>


    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
    <script src="http://jqueryui.com/external/jquery.bgiframe-2.1.2.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.button.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.draggable.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.position.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.dialog.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
  </head>
  <body>
      
      
      <div id="dialog-confirm" title="Can you confirm?" style="display: none;">
    <div class="dialog-text">
      <p>dialog text goes here</p>
    </div>
      </div>

JavaScript

function makeTable(users) {
    var result = '<table>\n<tr><td>Initials</td><td>Full Name</td></tr>\n';
    $.each(users, function(index, value) {
        result += '<tr><td>' + index + '</td><td>' + value + '</td></tr>\n';
    });
    result += '</table>';
    return (result);
}



var names = {
    "ss": "Sandra Schlichting",
    "fn": "Full name"
};

alert(makeTable(names));


            // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
            $("#dialog:ui-dialog").dialog("destroy");
        
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 140,
                modal: true,
                open: function() {
                $(this).children('div.dialog-text').replaceWith(makeTable(names));
                //$( this ).dialog( "close" );

                },
                
                buttons: {
                "Okay": function() {
                    $(this).dialog("close");
                },
                
                Cancel: function() {
                    is_okay = 0;
                    $(this).dialog("close");
                }
                } // buttons
                
            }); // dialog