This tutorial has a new version, check it out!
> Symfony 4 > Stellar Development with Symfony 4
Login to bookmark this video
11.

JavaScript & Page-Specific Assets

Share this awesome video!

|

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:

69 lines | templates/base.html.twig
<!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:

11 lines | public/js/article_show.js
$(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:

101 lines | templates/article/show.html.twig
// ... 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:

107 lines | templates/article/show.html.twig
// ... 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:

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

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

11 lines | public/js/article_show.js
$(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'):

11 lines | public/js/article_show.js
$(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:

11 lines | public/js/article_show.js
$(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:

69 lines | templates/base.html.twig
<!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 %}:

107 lines | templates/article/show.html.twig
// ... lines 1 - 104
{% block javascripts %}
// ... line 106
{% endblock %}

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

107 lines | templates/article/show.html.twig
// ... 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() }}:

109 lines | templates/article/show.html.twig
// ... 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.