JSFiddle - React, Tailwind, and code Playground

by elezar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<a href="#" id="dialogOpener">Show Dialog</a>

<div id="dialog" style="display: none;">
  <form>
      Name: <input type="text" name="name" id="name"><br><br>
      Project:
      <select name="project" id="project">
          <option value="test">Test</option>
      </select><br><br>
      Incident:<br> <textarea name="incident" id="incident" style="resize:none; width: 100%;" rows="14" cols="94"></textarea>
  </form>
</div>

JavaScript

$('#dialogOpener').click(function() { $('#dialog').dialog('open'); });

$('#dialog').dialog({
    title: "Add Incident",
    autoOpen: false,
    resizable: false,
    width: 800,
    modal:true,
    position: ['center', 'top+50'],
    buttons: {
        Add: function(){
             $.ajax({
                url     : 'save.php',
                type    : 'POST',
                data    : $('form').serialize(),
                context: $(this),
                success: function (result) {
                    if (result === "true") {
                        alert('Incident has been added successfully');
                    } else {
                        alert('ERROR: Cannot insert data to MySQL table');
                    }
                    window.location.reload();
                    $(this).dialog( "close" );
                },
                error   : function(){
                    alert('ERROR: Check database connection');
                }
            });
        },
        Cancel: function() {
            $(this).dialog( "close" );
        }
    }
});

$('form').submit(function(evt) {
	evt.preventDefault();
 });