Chapters

33 Chapters | 3:02:08 |

01

Lift Stuff! The js- Prefix

7:39
02

(document).ready() & Ordering

4:45
03

All about Event Bubbling

4:31
04

The Event Argument & stopPropagation

3:07
05

The DOM Element Object

6:35
06

The Magical this Variable & currentTarget

4:30
07

A Great Place to Hide Things! The data- Attributes

5:48
08

Organizing with Objects!

5:08
09

"Static" Objects & the this Variable

6:05
10

Getting to the bottom of the this Variable

4:29
11

Fixing "this" with bind()

6:08
12

Immediately Invoked Function Expression!

7:56
13

The window Object & Global Variables

6:12
14

Instantiatable Objects & Constructors

4:17
15

The Object prototype!

3:32
16

prototype Versus __proto__

7:02
17

Extending the Prototype

2:34
18

AJAX Form Submit: The Lazy Way

5:41
19

Old-School AJAX HTML

7:17
20

Delegate Selectors FTW!

3:45
21

Proper JSON API Endpoint Setup

4:46
22

POSTing to the API Endpoint

3:59
23

Handling JSON Validation Errors

6:40
24

Clearing the Form, Prepping for a Template

3:56
25

JavaScript Templating

5:57
26

Full-JavaScript Rendering & FOSJsRoutingBundle

7:26
27

All About Promises!

8:11
28

Catching a Failed Promise

5:58
29

Promise catch: Catches Errors?

6:40
30

Making (and Keeping) a Promise

7:57
31

Promise Chaining

3:43
32

SweetAlert: Killing it with Promises

5:11
33

Sweet Alert: Create a Promise!

4:45

> JavaScript Fundamentals > JavaScript for PHP Geeks

Buy Access to Course

26.

Full-JavaScript Rendering & FOSJsRoutingBundle

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

19 Comments

Sort By

Login or Register to join the conversation

Juan-Etxenike 4 years ago

Hello I am experiencing a small problem that is throwing down all my effort to implement the js underscore at the very last step. I manage correctly to convert a very symple template to an html string. After that all my efforts to append the resulting html string "<tr>1</tr>" to the tbody element results in only the "<tr></tr>" being added inside the <tbody></tbody>. No matter I use .append($.parseHTML(html)) or just .html(html) the result is the same. Does anybody understand why my inner span tag and it´s content goes lost? (console.log(html) throws the full string with the number inside).

|

Juan-Etxenike Juan-Etxenike 4 years ago

ok stupid mistake of mine, I forgot to embed the <td></td> tags so the html parse was missing the content rightfully.

|

Victor SFCASTS Juan-Etxenike 4 years ago

Hey Juan,

I'm happy to hear you were able to find the problem, well done! Yeah, it happens, sometimes things that are easy to miss then hard to fix ;) And thanks for sharing your solution with others!

Cheers!

|

Götz V. 5 years ago

I always have problems with courses in older Symfony versions. So what's the best way to upgrade for example in this case from 3.1 to the latest version.
In this case I try to install the bundle with:
composer require friendsofsymfony/jsrouting-bundle
and get:

Using version ^2.7 for friendsofsymfony/jsrouting-bundle
./composer.json has been updated
Running composer update friendsofsymfony/jsrouting-bundle
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.
Problem 1
- Root composer.json requires friendsofsymfony/jsrouting-bundle ^2.7 -> satisfiable by friendsofsymfony/jsrouting-bundle[2.7.0].
- friendsofsymfony/jsrouting-bundle 2.7.0 requires symfony/framework-bundle ~3.3|^4.0|^5.0 -> found symfony/framework-bundle[v3.3.0, ..., v3.4.47, v4.0.0, ..., v4.4.25, v5.0.0, ..., v5.3.0] but these were not loaded, likely because it conflicts with another require.
Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.
Any hint?

|

sadikoff Götz V. 5 years ago edited

Hey Götz V.

Sorry for late reply, yeah the latest bundle is not compatible with this course, as a solution install it with following command


composer require "friendsofsymfony/jsrouting-bundle:^1.6.0"

Cheers

|

Imad Zairig 8 years ago

Hi ,
I want to thank your for this great serie (y) ,
for none Symfony users it will be nice to add the command php bin/console assets:install after the installation of FOSRoutingJs,

thank you again :)

|

weaverryan SFCASTS Imad Zairig 8 years ago edited

Thanks Imad Zairig! And you're right! Depending on how fast you install things, you may need to run this command (if you add the bundle to AppKernel before composer finishes, then composer will do this for you, but if not, it's necessary). We'll add a note to the script+video!

Cheers!

|

David-P 8 years ago

Installing the FOS jsrouting bundle failed.
This is Symfony 3.1.6 as installed from your download for this course.

The error output:
[Symfony\Component\DependencyInjection\Exception\InvalidArgumentException]
Unable to parse file "/Volumes/Data01/Projects/KNPUniversity/code-javascript/start/vendor/symfony/symfony/src/Symfony/Bundle/FrameworkBundle/DependencyInjection/../Resources/config/web.xml".

[InvalidArgumentException]
The XML file "/Volumes/Data01/Projects/KNPUniversity/code-javascript/start/vendor/symfony/symfony/src/Symfony/Bundle/FrameworkBundle/DependencyInjection/../Resources/config/web.xml" is not valid.

[Symfony\Component\Debug\Exception\ContextErrorException]
Notice: Undefined property: DOMDocument::$documentElement

Script Sensio\Bundle\DistributionBundle\Composer\ScriptHandler::clearCache handling the symfony-scripts event terminated with an exception

There were also a lot of PHP warnings about modules having already been loaded. Probably safe to ignore.

Perhaps I need to install a specific version since this course is more than a year old now?

Thanks.

|

CDesign David-P 5 years ago edited

If you have trouble getting jsrouting-bundle to install with 'composer require', try this:

1) in composer.json change the require line for jsrouting-bundle to: "friendsofsymfony/jsrouting-bundle": "~1.6.0"

- that's the version Ryan installed

2) and then run:

 `composer update friendsofsymfony/jsrouting-bundle`

If you get composer out-of-memory errors, execute the command like this:

 `php -d memory_limit=-1 /usr/local/bin/composer update friendsofsymfony/jsrouting-bundle`

replacing <i>/usr/local/bin/composer</i> with the path to your composer executable.

3) and then run:

php bin/console assets:install web --symlink

which the video does suggest.

And one last thing.. the link on the current Symfony/FOSJsRoutingBundle/Usage page is to the '../router.js.min' version. Change that to '../router.js' or simply copy the link from the course code.

1 |

MolloKhan SFCASTS David-P 8 years ago edited

Hey David P.

Which version of PHP are you using?
Try updating "sensio/distribution-bundle"


composer update sensio/distribution-bundle

Cheers!

|

David-P MolloKhan 8 years ago

Diego,

PHP 7.1.15-1+ubuntu16.04.1+deb.sury.org+2 (cli) (built: Mar 6 2018 11:10:13) ( NTS )

Thanks,
D.
--

|

MolloKhan SFCASTS David-P 8 years ago

This is a known issue, look: https://github.com/braincra...
Did you try updating SensioDistributionBundle?

|

David-P MolloKhan 8 years ago

Diego,

Thanks for the information and the link.
Turns out that in spite of all of the errors that it displayed, the bundle's functionality worked anyway. :-)

Thanks very much for the responses.
Dave
--

|

MolloKhan SFCASTS David-P 8 years ago

Awesome!
I believe if you update your Symfony's version as well, you won't get that error again

|

Shaun T. 8 years ago

If you weren't including the links value back from your replLog model, how would you add a route to the underscore.js template?

|

weaverryan SFCASTS Shaun T. 8 years ago edited

Hey Shaun T.!

There are 2 good options:

1) Use FOSJsRoutingBundle
2) Just hardcode the URL. I know this sounds "weird", but it's actually not a bad option. Why? Well, you should think of your API the same way you think of your PHP code. What I mean is, in PHP, if you, for example, rename a method, you would expect that this might break other parts of your app. And so, IF you want to make that change, you know that you need to find affected code. The same should be true for your API: IF you change something (like the URL), you are breaking compatibility with anyone that uses it (in this case, your JavaScript). That's no big deal: you can update your JavaScript of course. But, the point is: your API should not be something that changes randomly or often: you should treat it as something that typically does not change. So, I don't see a huge problem hardcoding URLs. Honestly, if you wrote a JavaScript app that talked to a third-party API (e.g. the GitHub API), you would totally hardcode the URLs to the GitHub API and it would never look weird.

I hope this helps!

Cheers!

|

Shaun T. weaverryan 8 years ago edited

Thanks weaverryan , much appreciated :)

|

Daniel Kronika 8 years ago

Hi! Do you know if FOSJsRoutingBundle is already compatible with Symfony 4?
Thanks a lot for your tutorials and courses - I love them and they helped me a lot!!!

|

Victor SFCASTS Daniel Kronika 8 years ago

Hey Daniel,

Let's see... looks like this release already has Symfony 4 compatibility: https://github.com/FriendsO... . So I'd say yes, it should be compatible with Symfony 4 and should work, but if you find any issues - feel free to report them in the bundle's repository.

Cheers!

|

This tutorial uses an older version of Symfony... but since it's a JavaScript tutorial, the concepts are still ? valid!

Symfony 3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "symfony/symfony": "3.1.*", // v3.1.10
        "twig/twig": "2.10.*", // v2.10.0
        "doctrine/orm": "^2.5", // v2.7.1
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.2
        "symfony/swiftmailer-bundle": "^2.3", // v2.4.0
        "symfony/monolog-bundle": "^2.8", // 2.12.0
        "symfony/polyfill-apcu": "^1.0", // v1.2.0
        "sensio/distribution-bundle": "^5.0", // v5.0.22
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.16
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.2
        "friendsofsymfony/user-bundle": "~2.0@dev", // dev-master
        "doctrine/doctrine-fixtures-bundle": "~2.3", // v2.4.1
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.2.1
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "friendsofsymfony/jsrouting-bundle": "^1.6" // 1.6.0
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.1
        "symfony/phpunit-bridge": "^3.0" // v3.1.6
    }
}

Previous Chapter

Next Chapter