Render a jade template as a result of an AJAX call in Express
Today, while doing a fun side-project, I ran into a problem I couldn’t find an answer to online. I was sure it’s trivial but ended up searching for 3 hours until I figured it out.
Let’s say your index page is rendered using a jade template by Express. A button on your page makes an AJAX call to your website. You want the result to update only a part of your page and not to reload it. You also want that call to be rendered using a jade template and not parse it yourself.
app.js:
app.get('/', function (request, response) { response.render('index'); });
index.jade:
extends layout block content input#input(type='search' autofocus) a#button Search section#results
If you make a request now to ‘/’ you will see just a search box and a link. So we need to add some functionality for when clicking the link.
javascript.js
var button = document.getElementById('button'); var input = document.getElementById('input'); button.addEventListener('click', function(e) { e.preventDefault(); var url = '/search/?q=' + input.value; var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", url, true); xmlhttp.send(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { console.log('Server said: ', xmlhttp.responseText); document.getElementById('results').innerHTML = xmlhttp.responseText; } }; });
When the button is clicked - an AJAX GET call is made to ‘/search’ on the server. Query parameter ‘q’ contains the value of the search box. Once the server replies, the reply will be added as an HTML in section#results. Let’s handle the call on the server.
app.js:
app.get('/search', function(request, response) { // The query parameter is available in: request.query.q var dummy_data = [{title: 'Intersterller', year: 2014}, {title: 'Inception', year: 2010}]; response.render('movies', {results: dummy_data}); }
You’d probably want to take the search query entered on the page (available as request.query.q) and get some real data from somewhere. For this example we will just use an array containing 2 movie objects. The server then uses movies.jade to render the data and return it to the client.
movies.jade
for result in results p.movie #{result.title} (#{result.year})
That’s it. The server will take the data and use it to render movies.jade. It will then send it back to the client. The response will look something like:
<p class=“movie”>Intersterller (2014)</p><p class=“movie”>Inception (2010)</p>
The client will take this HTML and insert it to the section#results part of the page.
I hope this helps.