Symfony 4: JavaScript and Page-Specific Assets

Video loading...

  • 0:03
    Symfony 4: JavaScript and Page- Specific Assets with Ryan Weaver
  • 0:07
    The topic of APIs is a huge topic
  • 0:13
    and hugely important these days.
  • 0:16
    We’re going to dive deep into APIs in a future tutorial
  • 0:19
    but I think we at least need to get the basics right now.
  • 0:25
    So, here's the goal. See this heart icon?
  • 0:28
    I want the user to be able to click it to like the article.
  • 0:33
    We’re going to write some JavaScript
  • 0:34
    that sends an Ajax request to an API endpoint.
  • 0:38
    That endpoint will return the new number of likes
  • 0:43
    and will update the page.
  • 0:45
    Well, the number of likes is just a fake number for now,
  • 0:48
    but we can still get this entire system set up and working.
  • 0:53
    Oh, and by the way, if you look at the bottom of base.html.twig,
  • 0:57
    our page does have jQuery, so we can use that.
  • 1:01
    In the public directory, create a new js directory,
  • 1:05
    and a file inside called, how about, article_show.js.
  • 1:11
    The idea is that we’ll include this only on the article’s showpage.
  • 1:17
    Start with the jQuery $(document).ready block.
  • 1:24
    Now, open show.html.twig and scroll down a little.
  • 1:30
    Ah, here is the hard-coded number and heart link.
  • 1:34
    Yep, we’ll start the Ajax request when this link is clicked,
  • 1:39
    and update the 5 with the new number.
  • 1:42
    To set this up, let’s make a few changes.
  • 1:48
    On the link, add a new class, js-like-article,
  • 1:55
    and to target the 5,
  • 1:57
    add a span around it with, js-like-article-count.
  • 2:03
    We can use those to find the elements in JavaScript.
  • 2:06
    Copy the link’s class.
  • 2:08
    Let’s write some very straightforward but still awesome JavaScript.
  • 2:14
    Find that element and on 'click’ call this function.
  • 2:19
    Start with the classic e.preventDefault
  • 2:23
    so that the browser doesn’t follow the link.
  • 2:27
    Next, set a link variable to (e.currentTarget).
  • 2:31
    This is the link that was just clicked.
  • 2:34
    I want to toggle the heart icon between being empty and full.
  • 2:39
    Do that with $link.toggleClass
  • 2:44
    (‘fa-heart-o’).toggleClass (‘fa-heart’);
  • 2:51
    To update the count value, go copy the other class js-like-article-count.
  • 2:59
    Find it and set its .html, for now, to ‘TEST’.
  • 3:04
    Simple enough!
  • 3:05
    All we need to do now is include this js file on our page.
  • 3:10
    Of course, in base.html.twig,
  • 3:13
    we could add the script tag right at the bottom with the others,
  • 3:17
    but we don’t really want to include this JavaScript file on every page.
  • 3:23
    We only need it on the article showpage.
  • 3:27
    But how can we do that?
  • 3:29
    If we add it in the body block, then on the final page,
  • 3:34
    it will appear too early, before even jQuery is included.
  • 3:40
    To add our new file at the bottom, we can override the JavaScripts block.
  • 3:46
    Anywhere in show.html.twig, add block javascripts and endblock.
  • 3:54
    Add the script tag with src=,
  • 3:56
    start typing article_show and autocomplete.
  • 4:01
    There is still a problem with this and you might already see it.
  • 4:06
    Refresh the page.
  • 4:09
    Click, and it doesn’t work.
  • 4:13
    Check out the console.
  • 4:16
    Whoa! Dollar sign ($) is not defined.
  • 4:19
    That’s not good.
  • 4:21
    Check out the HTML source and scroll down towards the bottom.
  • 4:26
    Yep, there is literally only 1 script tag on the page.
  • 4:31
    That makes sense.
  • 4:33
    When you override a block, you completely override that block.
  • 4:39
    All the script tags from base.html.twig are gone.
  • 4:44
    Whoops! What we really want to do is append to the block, not replace it.
  • 4:52
    How can we do that? Say {{ parent() }}.
  • 4:56
    This will print the parent template's block content first,
  • 4:59
    and then we add our stuff.
  • 5:03
    This is why we put CSS in a stylesheets block and JavaScripts
  • 5:07
    in a JavaScripts block.
  • 5:10
    Try it now. Refresh.
  • 5:14
    And, it works.
  • 5:17
    Next, let’s create our API endpoint and hook this all together.

Stellar Development with Symfony 4

Loading ...

Symfony 4: JavaScript and Page-Specific Assets

Loading...
5 minutes 27 seconds // HDCC //

In this tutorial, we'll begin to wire up an AJAX call to an API endpoint. Along the way, we'll learn how to include page-specific JavaScript assets.

Downloads: 
Log in or sign up to download companion files.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.

Share