Using X-Editable inline editing with Express JS
This is really, really basic. I spent almost 6 hours as why my data is not getting submitted to the server. X-Editable is a really cool plugin and you can download it here http://github.com/vitalets/x-editable
What it does is it allows your users to edit a particular element in a page without going to load a cumbersome form for just one line of update. So here’s how it looks like:


Under the HTML hood you will have something like this :
<div class="component-name" data-type="text" data-pk="abc2343" data-url="/update_title"
data-title="component-name" data-name="jared" data-id="1232">Basic Haemodynamic State for TTE
<a href="#" class="edit">
<span class="icon is-small">
<i class="fas fa-pen"></i>
</span>
</a>
</div>…and your client-side script can have something like this:
$('.component-name').editable({
params: function (params) {
let data = {};
data.id = params.pk;
data.type = 'TUTORIAL';
data.title = params.value;
return data;
}
});
Let’s talk about the above code snippet for a while, the ‘pk’ and ‘value’ in the ‘params’ object are standard properties in x-editable, the ‘value’ contains the updated value of the editable element , in this case, is called ‘component-name’ which is a <div> element.
…then your server-side code could be something like this:
express()
.use(express.static(path.join(__dirname, 'public'))).use(bodyParser.urlencoded({extended: true})).use(bodyParser.json())
.set('views', path.join(__dirname, 'views'))
.set('view engine', 'ejs')
.get('/', (req, res) => res.render('pages/improved_cards'))
.post('/update_title', (req, res) => {
console.log ("Request is Ajax?", req.body);
console.log ("Request is Ajax?", req.body.newValue);
console.log('INLINE EDITING');
res.status(200).send('ok');
})
.listen(PORT, () => console.log(`Listening on ${ PORT }`));So here’s what wasted my 6 hours; I forgot to npm i body-parser because the lastt time I did that was 3 months ago. Now the value is flowing seamlessly to to the Postgres database. Cheers! :P
