<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<p>X-editable dependent lists</p>
<div style="margin: 150px">
Type: <a href="#" data-type="select" id="range_type"></a><br>
ze: <a href="#" data-type="select" id="range_size"></a><br>
</div>
var sources = {
1: [{value: 24, text: 24}, {value: 30, text: "30 standard"},{ value:33, text:33},{value:36, text:36},{value:"sustom",text:"custom"}],
2: [{value: 24, text: 24}, {value: 30, text: "30 standard"},{ value:33, text:33},{value:36, text:36},{value:"sustom",text:"custom"}]
};
$('#range_type').editable({
url: '/post',
pk: 1,
source: [{value: 1, text: 'Gas'}, {value: 2, text: 'electric'}],
title: 'Select type of range',
success: function(response, newValue) {
$('#range_size').editable('option', 'source', sources[newValue]);
$('#range_size').editable('setValue', null);
}
});
$('#range_size').editable({
url: '/post',
pk: 1,
title: 'Select Range Size',
sourceError: 'Please, select range type first'
});
//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 = '';
}
}
});
