jQuery UI Library Dialog Complex Example - jQuery UI Dynamicly Create Dialog

Example

Generally, dialog relies on a div within the HTML. Sometimes you may want to create a dialog from scratch, programmatically. Here is an example of a complex modal dialog created dynamically with interactive functions.

HTML

<div id="users-contain" class="ui-widget">
  <h1>Existing Users:</h1>
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>Name</th>
        <th>Email</th>
        <th>Password</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>[email protected]</td>
        <td>johndoe1</td>
      </tr>
    </tbody>
  </table>
</div>
<button id="create-user">Create new user</button>

CSS

label,
input {
  display: block;
}

input.text {
  margin-bottom: 12px;
  width: 95%;
  padding: .4em;
}

fieldset {
  padding: 0;
  border: 0;
  margin-top: 25px;
}

h1 {
  font-size: 1.2em;
  margin: .6em 0;
}

div#users-contain {
  width: 350px;
  margin: 20px 0;
}

div#users-contain table {
  margin: 1em 0;
  border-collapse: collapse;
  width: 100%;
}

div#users-contain table td,
div#users-contain table th {
  border: 1px solid #eee;
  padding: .6em 10px;
  text-align: left;
}

.ui-dialog .ui-state-error {
  padding: .3em;
}

.validateTips {
  border: 1px solid transparent;
  padding: 0.3em;
}

jQuery

$(function() {
  // Define variables for the dialog, form and a regular expression used to verify email addresses in the form
  var dialog, form,
    emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

  // Function to update tips when an issue in the form is detected
  // t = text to enter as the tip
  function updateTips(t) {
    tips
      .text(t)
      .addClass("ui-state-highlight");
    setTimeout(function() {
      tips.removeClass("ui-state-highlight", 1500);
    }, 500);
  }

  // Function to check the length of text entered into a field
  // o = object reference (object), n = name of field (string), min = minimum number of characters (int), max = maximum number of characters (int)
  function checkLength(o, n, min, max) {
    if (o.val().length > max || o.val().length < min) {
      o.addClass("ui-state-error");
      updateTips("Length of " + n + " must be between " +
        min + " and " + max + ".");
      return false;
    } else {
      return true;
    }
  }

  // Function to perform regular expression check of text entered in field
  // o = object reference (object), regexp = regular expression reference (RegExp Object), n = name of field
  function checkRegexp(o, regexp, n) {
    if (!(regexp.test(o.val()))) {
      o.addClass("ui-state-error");
      updateTips(n);
      return false;
    } else {
      return true;
    }
  }

  //Function called when form is submitted that will check all the form fields. If all fields have text and all the text meets the requirements, the data is collected and added back to the table.
  function addUser() {
    var valid = true;
    allFields.removeClass("ui-state-error");

    valid = valid && checkLength(name, "username", 3, 16);
    valid = valid && checkLength(email, "email", 6, 80);
    valid = valid && checkLength(password, "password", 5, 16);

    valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.");
    valid = valid && checkRegexp(email, emailRegex, "eg. [email protected]");
    valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");

    if (valid) {
      $("#users tbody").append("<tr>" +
        "<td>" + name.val() + "</td>" +
        "<td>" + email.val() + "</td>" +
        "<td>" + password.val() + "</td>" +
        "</tr>");
      dialog.dialog("close");
    }
    return valid;
  }

  // Creation of the dialog object
  dialog = $("<div>", {
    id: "dialog-form",
    title: "Create New User"
  }).dialog({
    autoOpen: false,
    height: 400,
    width: 350,
    modal: true,
    buttons: {
      "Create an account": addUser,
      Cancel: function() {
        dialog.dialog("close");
      }
    },
    close: function() {
      form[0].reset();
      allFields.removeClass("ui-state-error");
    }
  });

  // Adding elements to the dialog to be shown
  dialog.html("<p class='validateTips'>All form fields are required.</p>")

  // Creation of the form object to be shown inside the dialog
  form = $("<form>").submit(function(e) {
    e.preventDefault();
    addUser();
  }).appendTo(dialog);

  // Adding elements to the form, fieldset and fields    
  form.append($("<fieldset>"));
  var markup = "";
  markup += "<label for='name'>Name</label>\r\n";
  markup += "<input type='text' name='name' id='name' value='Jane Smith' class='text ui-widget-content ui-corner-all'>";
  markup += "<label for='email'>Email</label><input type='text' name='email' id='email' value='[email protected]' class='text ui-widget-content ui-corner-all'>\r\n";
  markup += "<label for='password'>Password</label><input type='password' name='password' id='password' value='xxxxxxx' class='text ui-widget-content ui-corner-all'>\r\n";
  markup += "<input type='submit' tabindex='-1' style='position:absolute; top:-1000px'>\r\n";

  // Assigning our fields HTML markup to the fieldset
  form.find("fieldset").html(markup);

  // Assigning variables to be used for easy reference, post creation and amendment of dynamic objects
  var name = $("#name"),
    email = $("#email"),
    password = $("#password"),
    allFields = $([]).add(name).add(email).add(password),
    tips = $(".validateTips");

  // Override the click event of the button to launch our dynamic dialog
  $("#create-user").button().on("click", function() {
    dialog.dialog("open");
  });
});

Working example for reference: https://jsfiddle.net/Twisty/LqjuxLu1/