JSFiddle - React, Tailwind, and code Playground

by adrianhdezm

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<div class="container">
<div class="row">
            <div class="span12">  <h2>Page Title</h2> <hr>  </div>
</div>

				<div class="row">
                    <div class="span12">
					<div class="alert hide alert-success " id="msg" style="display: none;">New user created! Now editables submit individually.</div>
					<table class="table table-bordered table-striped" id="user">
						<tbody>
							<tr>
								<td width="20%">Username</td>
								<td><a data-original-title="Enter username"
									data-name="username" data-type="text" id="new_username"
									class="myeditable editable editable-click editable-empty"
									href="#">Empty</a></td>
							</tr>
							<tr>
								<td>First name</td>
								<td><a data-original-title="Enter firstname"
									data-name="firstname" data-type="text"
									class="myeditable editable editable-click editable-empty"
									href="#">Empty </a></td>
							</tr>
							<tr>
								<td>Group</td>
								<td><a data-original-title="Select group"
									data-source="/groups" data-name="group" data-type="select"
									class="myeditable editable editable-click editable-empty"
									href="#">Empty</a></td>
							</tr>
							<tr>
								<td>Date of birth</td>
								<td><a data-original-title="Select Date of birth"
									data-viewformat="dd/mm/yyyy" data-name="dob" data-type="date"
									class="myeditable editable editable-click...

JavaScript

$.fn.editable.defaults.mode = 'inline';

$(function(){
    
    $.mockjax({
        url: '/post',
        responseTime: 500,
        responseText: ''
    });  
    
    $.mockjax({
        url: '/groups',
        responseText: {
            0: 'Guest',
            1: 'Service',
            2: 'Customer',
            3: 'Operator',
            4: 'Support',
            5: 'Admin'
        }
    }); 
    
    $.mockjax({
        url: '/newuser',
        responseTime: 300,
        responseText: '{ "id": 1 }'
//        responseText: '{"errors": {"username": "username already exist"} }'
    });             
    
   //init editables 
   $('.myeditable').editable({
       onblur: 'submit',
       showbuttons: false,
      url: '/post',
      placement: 'right'
   });
   
   //make username required
   $('#new_username').editable('option', 'validate', function(v) {
       if(!v) return 'Required field!';
   });
   
   //automatically show next editable
   $('.myeditable').on('save.newuser', function(){
       var that = this;
       setTimeout(function() {
           $(that).closest('tr').next().find('.myeditable').editable('show');
       }, 200);
   });
   
   //create new user
   $('#save-btn').click(function() {
       $('.myeditable').editable('submit', { 
           url: '/newuser', 
           ajaxOptions: {
               dataType: 'json' //assuming json response
           },           
           success: function(data, config) {
               if(data && data.id) {  //record created, response like {"id": 2}
                   //set pk
                   $(this).editable('option', 'pk', data.id);
                   //remove unsaved class
                   $(this).removeClass('editable-unsaved');
                   //show messages
                   var msg = 'New user created! Now editables submit individually.';
                   $('#msg').addClass('alert-success').removeClass('alert-error').html(msg).show();
                   $('#save-btn').hide(); 
       ...