This tutorial has a new version, check it out!

JavaScript & Page-Specific Assets

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

The topic of API's is... ah ... a huge topic and hugely important these days. We're going to dive deep into API's in a future tutorial. But... I think we at least need to get to the basics right now.

So here's the goal: see this heart icon? I want the user to be able to click it to "like" the article. We're going to write some JavaScript that sends an AJAX request to an API endpoint. That endpoint will return the new number of likes, and we'll update the page. Well, the number of "likes" is just a fake number for now, but we can still get this entire system setup and working.

Creating the new JavaScript File

Oh, and by the way, if you look at the bottom of base.html.twig, our page does have jQuery, so we can use that:

<!doctype html>
<html lang="en">
... lines 3 - 15
<body>
... lines 17 - 58
{% block javascripts %}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
... lines 61 - 65
{% endblock %}
</body>
</html>

In the public/ directory, create a new js/ directory and a file inside called, how about, article_show.js. The idea is that we'll include this only on the article show page.

Start with a jQuery $(document).ready() block:

$(document).ready(function() {
... lines 2 - 9
});

Now, open show.html.twig and, scroll down a little. Ah! Here is the hardcoded number and heart link:

... lines 1 - 4
{% block body %}
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="show-article-container p-3 mt-4">
<div class="row">
<div class="col-sm-12">
... line 13
<div class="show-article-title-container d-inline-block pl-3 align-middle">
... lines 15 - 18
<span class="pl-2 article-details"> 5 <a href="#" class="fa fa-heart-o like-article"></a> </span>
</div>
</div>
</div>
... lines 23 - 94
</div>
</div>
</div>
</div>
{% endblock %}

Yep, we'll start the AJAX request when this link is clicked and update the "5" with the new number.

To set this up, let's make few changes. On the link, add a new class js-like-article. And to target the 5, add a span around it with js-like-article-count:

... lines 1 - 4
{% block body %}
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="show-article-container p-3 mt-4">
<div class="row">
<div class="col-sm-12">
... line 13
<div class="show-article-title-container d-inline-block pl-3 align-middle">
... lines 15 - 18
<span class="pl-2 article-details">
<span class="js-like-article-count">5</span>
<a href="#" class="fa fa-heart-o like-article js-like-article"></a>
</span>
</div>
</div>
</div>
... lines 26 - 97
</div>
</div>
</div>
</div>
{% endblock %}
... lines 104 - 107

We can use those to find the elements in JavaScript.

Copy the link's class. Let's write some very straightforward... but still awesome... JavaScript: find that element and, on click, call this function. Start with the classic e.preventDefault() so that the browser doesn't follow the link:

$(document).ready(function() {
$('.js-like-article').on('click', function(e) {
e.preventDefault();
... lines 4 - 8
});
});

Next, set a $link variable to $(e.currentTarget):

$(document).ready(function() {
$('.js-like-article').on('click', function(e) {
e.preventDefault();
var $link = $(e.currentTarget);
... lines 6 - 8
});
});

This is the link that was just clicked. I want to toggle that heart icon between being empty and full: do that with $link.toggleClass('fa-heart-o').toggleClass('fa-heart'):

$(document).ready(function() {
$('.js-like-article').on('click', function(e) {
e.preventDefault();
var $link = $(e.currentTarget);
$link.toggleClass('fa-heart-o').toggleClass('fa-heart');
... lines 7 - 8
});
});

To update the count value, go copy the other class: js-like-article-count. Find it and set its HTML, for now, to TEST:

$(document).ready(function() {
$('.js-like-article').on('click', function(e) {
e.preventDefault();
var $link = $(e.currentTarget);
$link.toggleClass('fa-heart-o').toggleClass('fa-heart');
$('.js-like-article-count').html('TEST');
});
});

Including Page-Specific JavaScript

Simple enough! All we need to do now is include this JS file on our page. Of course, in base.html.twig, we could add the script tag right at the bottom with the others:

<!doctype html>
<html lang="en">
... lines 3 - 15
<body>
... lines 17 - 58
{% block javascripts %}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script>
$('.dropdown-toggle').dropdown();
</script>
{% endblock %}
</body>
</html>

But... we don't really want to include this JavaScript file on every page, we only need it on the article show page.

But how can we do that? If we add it to the body block, then on the final page, it will appear too early - before even jQuery is included!

To add our new file at the bottom, we can override the javascripts block. Anywhere in show.html.twig, add {% block javascripts %} and {% endblock %}:

... lines 1 - 104
{% block javascripts %}
... line 106
{% endblock %}

Add the script tag with src="", start typing article_show, and auto-complete!

... lines 1 - 104
{% block javascripts %}
<script src="{{ asset('js/article_show.js') }}"></script>
{% endblock %}

There is still a problem with this... and you might already see it. Refresh the page. Click and... it doesn't work!

Check out the console. Woh!

$ is not defined

That's not good! Check out the HTML source and scroll down towards the bottom. Yep, there is literally only one script tag on the page. That makes sense! When you override a block, you completely override that block! All the script tags from base.html.twig are gone!

Whoops! What we really want to do is append to the block, not replace it. How can we do that? Say {{ parent() }}:

... lines 1 - 104
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/article_show.js') }}"></script>
{% endblock %}

This will print the parent template's block content first, and then we add our stuff. This is why we put CSS in a stylesheets block and JavaScript in a javascripts block.

Try it now! Refresh! And... it works! Next, let's create our API endpoint and hook this all together.

Leave a comment!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.1.3",
        "ext-iconv": "*",
        "sensio/framework-extra-bundle": "^5.1", // v5.1.3
        "symfony/asset": "^4.0", // v4.0.3
        "symfony/console": "^4.0", // v4.0.14
        "symfony/flex": "^1.0", // v1.9.10
        "symfony/framework-bundle": "^4.0", // v4.0.14
        "symfony/lts": "^4@dev", // dev-master
        "symfony/twig-bundle": "^4.0", // v4.0.3
        "symfony/web-server-bundle": "^4.0", // v4.0.3
        "symfony/yaml": "^4.0" // v4.0.14
    },
    "require-dev": {
        "easycorp/easy-log-handler": "^1.0.2", // v1.0.4
        "sensiolabs/security-checker": "^5.0", // v5.0.3
        "symfony/debug-bundle": "^3.3|^4.0", // v4.0.3
        "symfony/dotenv": "^4.0", // v4.0.14
        "symfony/monolog-bundle": "^3.0", // v3.1.2
        "symfony/phpunit-bridge": "^3.3|^4.0", // v4.0.3
        "symfony/profiler-pack": "^1.0", // v1.0.3
        "symfony/var-dumper": "^3.3|^4.0" // v4.0.3
    }
}