JSFiddle - React, Tailwind, and code Playground

by Rafael Boschini

HTML

<div id="toolbar">
        <a href="javascript:void(0)" class="linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">Novo Usu&aacute;rio</a>
        <a href="javascript:void(0)" class="linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Editar Usu&aacute;rio</a>
        <a href="javascript:void(0)" class="linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Excluir Usu&aacute;rio</a>
    </div>

    <div id="dlg" class="dialog" style="width:400px;height:280px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle">Usu&aacute;rio</div>
        <form id="fm" name="fm" method="POST">
            <div class="fitem">
                <label>Nome:</label>
                <input name="Name" class="textbox" required="true">
            </div>
            <div class="fitem">
                <label>Usu&aacute;rio:</label>
                <input name="User" class="textbox" required="true">
            </div>
            <div class="fitem">
                <label>Email:</label>
                <input name="Email" class="textbox" validType="email">
            </div>
            <div class="fitem">
                <label>Telefone:</label>
                <input name="Phone" class="textbox">
            </div>
            <div class="fitem">
                <label>Depart:</label>
                <select name="Department">
                <?php
                    echo SelectDepartment ();
                ?>
                </select>                
            </div>            
            <div class="fitem">
                <label>Level:</label>
                <select name="Level">
                    <option value="Admin">Admin</option>
                    <option value="Usuario">Usuario</option>                                                        
                </select>           
            </div>
            <div class="fitem">
                <label>Senha:</label>
               ...

JavaScript

var url = 'connect/register.php';   

function newUser(){
 $('#dlg').dialog('open').dialog('center').dialog('setTitle','Novo');
  $('#fm').form('clear');         
}


$(document).ready(function(){
	$('#dlg').dialog();
	$('.c6').bind('click',function(){
  	saveUser();
  });

});

function saveUser(){
  $.ajax({
    url: url,
    beforeSend: function( xhr ) {
      xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
    }
  })
  .done(function( data ) {
      var result = eval('('+data+')');
      if (result.errorMsg){
        $.messager.show({
          title: 'Error',
          msg: result.errorMsg
        });
      } else {
        $('#dlg').dialog('close');        // fecha dialog
        $('#dg').datagrid('reload');    // recarrega dados
      }
  });
  
}