Using X-Editable inline editing with Express JS

Jared Odulio
Sep 2, 2018 · 2 min read

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:

First we have a basic container
By clicking on the title we can simply change without developing another form

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade