JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/css/jqueryui-editable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/js/jqueryui-editable.js"></script>
<p>Name</p><a href="javascript:void(0)" id="name">test</a>
JavaScript
$('#name').editable({
type: 'text',
title: 'Name',
url: function () {
return $.post('/echo/json/', {
json: 'false',
delay: .5
});
},
pk: 123,
validate: function (value) {
if (value == 'bob') {
return 'bob is not allowed';
}
},
success: function (response) {
if(response === false) {
console.log('remote error from success');
return 'remote error';
}
},
error: function (response) {
console.log('remote error from fail');
return 'remote error';
}
});