JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<p>X-editable dependent lists</p>
<div style="margin: 150px">
    list <a href="#" data-type="select" id="list1"></a><br>
    Dependent list <a href="#" data-type="select" id="list2"></a><br>
</div>

JavaScript

var sources = {
  1: [{value: 11, text: 11}, {value: 111, text: 111}], 
  2: [{value: 22, text: 22}, {value: 222, text: 222}] 
};

$('#list1').editable({
  url: '/post',    
  pk: 1,
  source: [{value: 1, text: 'text1'}, {value: 2, text: 'text2'}],
  title: 'Select1',
  success: function(response, newValue) {
     $('#list2').editable('option', 'source', sources[newValue]);  
     $('#list2').editable('setValue', null);
  }
});

$('#list2').editable({
  url: '/post',    
  pk: 1,    
  title: 'Select2',
  sourceError: 'Please, select value in first list' 
});



//ajax emulation. Type "err" to see error message
$.mockjax({
    url: '/post',
    responseTime: 400,
    response: function(settings) {
        if(settings.data.value == 'err') {
           this.status = 500;  
           this.responseText = 'Validation error!'; 
        } else {
           this.responseText = '';  
        }
    }
});