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

01.

Lift Stuff! The js- Prefix

|

Autoplay

Next Chapter

Login or register to check out the script

114 Comments

Sort By

Login or Register to join the conversation

Maz 3 years ago

Hi there,
For resolution this error:
`[TypeError]

Argument 1 passed to Symfony\Component\Process\Process::__construct() must                      
be of the type array, string given`

In my case its necesary change composer version: composer self-update 2.2.9

4 |

Alexandre C. 6 years ago

Hi there,

Can you just up to date the repo of this project for not having spent time to fix problems with the latest version of php and the parameters.yml file ? or at least update readme to avoid some problems, please, thank you.

1 |

MolloKhan SFCASTS Alexandre C. 6 years ago

Besides what Ryan said. Can you re-try installing it please? This tutorial already got upgraded and it's working for me but I'd like to know if it's working for you as well :)

|

weaverryan SFCASTS Alexandre C. 6 years ago edited

Hey Alexandre C.!

Yea, PHP 7.4 added some warnings that cause an error in some of our tutorials due to some older version of some dependencies. We've been updating the tutorial code across the site to avoid that so that things run smoothly. What problem did you have with parameters.yml? That might be something different...

Cheers!

|

TomaszGasior 7 years ago

3:00 — from HTML semantic perspective you should use <button type="button"> instead of (a href="#"). (a) should not be used with senseless href="" value.
(For some reason Discuss does not escape "A" html tag in comments.)

1 |

Victor SFCASTS TomaszGasior 7 years ago

Hey Tomasz,

Are you talking about "I lifted it" button? That's exactly what we press at 3:00 in the video, and it is a button tag. But anyway, using "a" tag with href="#" is totally OK as for me, because it has a valid HTML syntax. Why don't you like it?

Cheers!

|

TomaszGasior Victor 7 years ago

Thank you for your response.

Sorry! I was talking about "delete" button on each row. But I given you wrong time stamp. It should be around 4:30.

Hyperlinks have to be used to indicate URL change. Buttons (<button type="button">) should be used if URL is not changed and action is fired on JavaScript side. This is important for a11y. Please look at this articles:
* https://blogs.ancestry.com/...
* https://marcysutton.com/lin...

1 |

weaverryan SFCASTS TomaszGasior 7 years ago edited

Hey TomaszGasior!

Yep, you're totally right - that was lazy on my part :). Thanks for the comment - I'll pay closer attention to this in the future!

Cheers!

|

Victor SFCASTS TomaszGasior 7 years ago

Hey Tomasz,

Ah, now I see... Yeah, makes sense, and it good to know! Thanks for pointing us about it.

Cheers!

|

sandeep sangole 8 years ago

Hi there , I have just started course , downloaded source code and setup the application. While adding to lift history I am getting below error ,

[Warning] jQuery.Deferred exception: JSON Parse error: Unrecognized token '<' (2) (jquery-3.1.1.min.js, line 2)

parse

(anonymous function) — RepLogApp.js:126

j — jquery-3.1.1.min.js:1349

(anonymous function) — jquery-3.1.1.min.js:1356

undefined

1 |

weaverryan SFCASTS sandeep sangole 8 years ago edited

Hey sandeep sangole!

Hmmm. Can you post your RepLogApp.js? Exactly how far through the tutorial are you? I'm asking because we don't create the RepLogApp.js file until chapter 12 of this tutorial (https://knpuniversity.com/s..., so I need to know exactly where you are :).

But, I also think that I recognize the error. Near the end of the tutorial (https://knpuniversity.com/s..., we update our code to make an AJAX request to an API and we *expect* our API endpoint to return JSON. We then use JSON.parse() to parse that JSON, so we can handle it.

I believe the error is coming from there. Specifically, for some reason, your API endpoint is NOT returning JSON - it's probably returning HTML, maybe an error page. And so, RepLogApp.js throws an error when it tries to parse this as JSON. The "Unrecognized token '<'" is because it is seeing an HTML tag, instead of JSON.

So, check your AJAX request and see why it's not returning JSON :).

Cheers!

|

sandeep sangole 8 years ago

What is the best way to get help on below issues ??

1 |

Victor SFCASTS sandeep sangole 8 years ago

Hey Sandeep,

You can easily edit your comments, so no need to write a several comments if you forgot some details in the previous message ;) Also, we're tracking each Disqus comment, so do not need to duplicate the question in direct message. But yeah, Disqus comments is the best way to get help from us, and it's also may be useful for other people who will see comments, they may find already answered questions. Unfortunately, we do not able to answer your questions immediately, so we may reply back to you with some delay, please, keep in mind it. Thanks for understanding.

Cheers!

|

Gompali 8 years ago

I'm discouraged that it's showing bad practices. jQuery IS a bad practice. Why the heck should I import 10k rows of stuffed code to do something I can do in 10 rows ?

1 |

MolloKhan SFCASTS Gompali 8 years ago edited

Hey Gompali

I'm sorry that you are feeling that way. It has been never our intention to teach any bad practices, but when we do (because we are not aware of, or maybe the technology just evolved) we like to be told so. Anyways, this tutorial is not about JQuery, we used JQuery because is a handy library for doing a lot of common stuff, but, you can use any library you want, or even pure JS if you like.

If you have any question or feedback, don't hesitate to contact us. Cheers!

|

Selwyn 2 years ago edited

Hey folks, I tried starting this tutorial but wanted to see if I could make it work with DDEV. I configured it for php version 7.2 with a blank docroot. I ran composer install in the ddev shell and saw the same error as shown below:

In Process.php line 144:<br /> [TypeError]<br /> Argument 1 passed to Symfony\Component\Process\Process::__construct() must be of the type array, string given, called in /var/www/html/vendor/sensio/distribution-bundle/Composer/ScriptHandler.php on line 309<br />
I was able to downgrade composer with composer self-update 2.2.9 (thanks Maz)
Sadly, I can't seem to figure out how to load the project in a browser. My usual approach of ddev launch produces a 403 error. Suggestions welcome.

|

Victor SFCASTS Selwyn 2 years ago

Hey Selwyn,

Yeah, probably you won't be able to start the project without installing the Composer deps properly. I think you have too fresh Composer for that old project, could you try the latest 1.x Composer instead? I see you're on Composer 2.x that may conflict with it. I bet it should work well with Composer 1.x. At least i was able to install deps successfully with composer1x install --ignore-platform-reqs on my latest PHP installed.

Cheers!

|

KrzysztofH 2 years ago

It would be great if all projects were dockerized, so I don't have to spent hours to fix all problems with legacy code...

|

Victor SFCASTS KrzysztofH 2 years ago

Hey KrzysztofH,

We're trying to dockerize the course code every time for our latest/future tutorials, but legacy courses might not be dockerized, unfortunately.

Cheers!

|

Francois 2 years ago edited

Update: if you are on a mac and have homebrew, run % brew install php@7.2 in the terminal to install the proper php binary. Read the messages that appear after php intallation. PHP is somewhere in /usr/local/opt/, the ini file is in /usr/local/etc/ .

After that, I ran composer install without configuring the parameters.yml file, as the interactive build dialogue was more understandable to me. I can finally start the course.

Hope this helps.

Initial message (I stand by it)
Honestly, I paid big bucks to be able to download the code for the course (this is my first course) and the composer configuration does not work.

Beyond the fact that I feel I paid for nothing, this raises the question of code maintainibility in symfony.

|

weaverryan SFCASTS Francois 2 years ago

Hey @Francois!

Ah, really sorry about the trouble - that's not what we want at all :/. Yea, while the concepts of this tutorial are still solid, the code is getting OLD. And you nailed the root cause: because the code is a few years old, it wants to be run on PHP 7.2, which way old by now. This is something we know we need to do a better job at.

Anyway, I hope the course will go smoother for you now! If you ever have any questions, you can drop them in the comments - we watch and reply to everything.

Cheers!

|

Ludovic B. 3 years ago

The command composer update doesn't work for me. I have PHP 8.1.

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 php ^7.2.0 but your php version (8.1.3) does not satisfy that requirement.
Problem 2
- Root composer.json requires twig/twig 2.10.* -> satisfiable by twig/twig[v2.10.0].
- twig/twig v2.10.0 requires php ^7.0 -> your php version (8.1.3) does not satisfy that requirement.
Problem 3
- symfony/symfony[v3.1.7, ..., v3.1.10] require twig/twig ~1.28|~2.0 -> satisfiable by twig/twig[v2.10.0].
- symfony/symfony v3.1.6 requires twig/twig ~1.27|~2.0 -> satisfiable by twig/twig[v2.10.0].
- symfony/symfony v3.1.5 requires twig/twig ~1.26|~2.0 -> satisfiable by twig/twig[v2.10.0].
- symfony/symfony[v3.1.0, ..., v3.1.4] require twig/twig ~1.23|~2.0 -> satisfiable by twig/twig[v2.10.0].
- twig/twig v2.10.0 requires php ^7.0 -> your php version (8.1.3) does not satisfy that requirement.
- Root composer.json requires symfony/symfony 3.1.* -> satisfiable by symfony/symfony[v3.1.0, ..., v3.1.10].

Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages currently locked to specific versions.

|

Victor SFCASTS Ludovic B. 3 years ago

Hey Ludovic,

Yeah, unfortunately, this course has legacy code base that does not work in PHP 8. We show a warning with a tooltip when you download the course code. The best option would be to install a legacy 7.4 PHP on your local machine or downgrade your current PHP version temporarily. Or you can try to set up this project using Docker where use the required PHP version.

If you still want to follow this course in PHP 8 - you would need to do more work. First of all, you would need to change that PHP version to yours in composer.json under "require.php". And also upgrade the dependencies, but it may require bumping some installed dependencies constraints and so require some changes in the code base.

I hope this helps!

Cheers!

|

Jamie-H Victor 2 years ago

Are there any plans to revisit this course in the future so that it is compatible with PHP 8?

|

Victor SFCASTS Jamie-H 2 years ago

Hey Jamie-H,

There's a chance of course, and yeah, some day we will have to do it. But that will not happen in the near future, definitely not this year. If you want to follow this course on PHP 8 today - there're a few ways:

You can download the course code and try to upgrade dependencies so that you can run it on PHP 8, but you would also need to fix some BC breaks and do other related changes to make it work. In short, it may require a decent amount of work from your side
So the easier would be to download a new empty Symfony project and try to follow the course on it. You still can copy/paste some parts of code from the course code downloads, but it might be easier than trying to fix BC breaks.

I hope this helps!

Cheers!

|

Johnny 5 years ago

For people who are not using PhpStorm could you mention how to include those two libraries inside the project ?

|

weaverryan SFCASTS Johnny 5 years ago

Hey @Johnny!

Nice to chat with you :). Regardless of what editor you're using, the two libraries are already included in your project. What I mean is, because we're linking to external files (e.g. https://code.jquery.com/jqu..., when we load the page, these will be downloaded and everything will work. What I did in PhpStorm was just something to help PhpStorm *understand* my code. Since the jquery and bootstrap files weren't physically in my project, it didn't give me autocompletion when I used those libraries in my code. The trick i did told PhpStorm to download those into its own, internal storage so that it can help me in that way.

Does that help? Let me know :).

Cheers!

|

Phil C. 5 years ago

Hi,

I just ran thru the setup and all went well until I attempted to connect to the db via the php bin/console doctrine:database:create command. I get this error: [Doctrine\DBAL\Driver\PDOException]
SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client

However I can connect just fine using TablePlus so I don't know how to fix this, any info appreciated.

|

weaverryan SFCASTS Phil C. 5 years ago edited

Hey Phil C.!

Ah, I know this error, and it's super annoying :/ - it has to do with a change in how MySQL does authentication. Check out here - https://stackoverflow.com/q... - and let me know if it helps!

Cheers!

|

Дмитрий 5 years ago

Hi, guys!
I get error [Symfony\Component\Console\Exception\LogicException] An option named "connection" already exists, when runnin any php bin/console commands. How to solve this problem?

|

weaverryan SFCASTS Дмитрий 5 years ago edited

Hey Дмитрий!

Sorry about the trouble, but I *do* know this error! Did you get this error using the course code? Did you run composer update or anything? I'm just asking because you should *not* have any errors if you use the course code directly, and I want to make sure that's ok :).

Here's a conversation about the issue: https://symfonycasts.com/sc...

Basically, somehow, your versions of doctrine/migrations and doctrine/doctrine-migrations-bundle have gotten in a conflicting state. Updating them, or removing and re-adding should do the trick. But let me know :).

Cheers!

|

Bastian 5 years ago

Hey everyone,
are there any plans to update this series using just modern JS?
Getting into more advanced javascript on the back of jQuery feels pretty outdated to me.
Cheers.

|

MolloKhan SFCASTS Bastian 5 years ago edited

Hey Bastian

We have newer JavaScript tutorials where you can see all the modern things being applied. For example, you can see your new course about Vue.js or React
https://symfonycasts.com/sc...
or, if you're interested in learning ES6 specifically, you can watch this tutorial https://symfonycasts.com/sc...

Cheers!

|

Hajer G. 5 years ago

i'm getting this " [InvalidArgumentException]
Unable to find file "@FrameworkBundle/Resources/config/router_dev.php". "

|

weaverryan SFCASTS Hajer G. 5 years ago edited

Hey @hajer!

Hmm, that's odd! Do you get that when you download the course code? Or are you using your own project? This is a file that's used by the built-in web server - the server that runs when you call ./bin/console server:run. This file should be downloaded when you run composer install... I can't think of any reason why it wouldn't be there.

Cheers!

|

Juan-Etxenike weaverryan 5 years ago

Hi, I am too, getting this error, so far on composer install I read : WARNING Framework Bundle (Method/Error) copy. ! [NOTE] Some assets were installed via copy. If you make changes to these assets you have to run this command again.

But when I run php bin/console server:run I get the error. After that I have managed to get to the site installing it via xampp on my Windows 10 machine, but yet it would fall on the production mode and not on the dev mode. I managed to fix it changing app.php to app_dev.php in .htaccess

|

weaverryan SFCASTS Juan-Etxenike 5 years ago edited

Hey Juan E.!

Thanks for posting - and sorry for the very late reply. First, I'm glad you got it working :). Though, the cause is still a mystery!

> WARNING Framework Bundle (Method/Error) copy. ! [NOTE]

This should be ok: when you run composer install, Symfony symlinks public files (e.g. CSS files, JS files) from the bundle into your public/bundles folder. On Windows, symlinks don't work - so it copies those files, which is totally fine, and shouldn't impact the error anyways. But, good eye noticing this ;)

> After that I have managed to get to the site installing it via xampp on my Windows 10 machine, but yet it would fall on the production mode and not on the dev mode. I managed to fix it changing app.php to app_dev.php in .htaccess

Good workaround! When you use a real web server, and you want to access it in "dev" mode (on the version of Symfony used in this tutorial), you're supposed to put app_dev.php in your URL - so like http://localhost/app_dev.php. Hitting the app in production probably failed (this is just a guess) because you typically need to clear the Symfony cache before hitting that environment.

Anyways, I hope these explanations shed some light on things - but I still can't imagine what would be causing the router_dev.php error - that's just a physical file that sits in your vendor directory.

Cheers!

|

Hajer G. 5 years ago

I'm getting this error " PHP Parse error: syntax error, unexpected 'var' (T_VAR) in C:\Users\hajer\start\bin\console on line 14

Parse error: syntax error, unexpected 'var' (T_VAR) in C:\Users\hajer\start\bin\console on line 14 "

|

Victor SFCASTS Hajer G. 5 years ago

Hey hajer,

That's interesting... What PHP version do you use? Did you do any changes in that bin/console file? How do you run that console command? Could you try to run it via PHP interpreter like:
$ php bin/console

Does it works for you?

Cheers!

|

Contabexpress L. 5 years ago

I'm trying to setup the database following the readme.md and I'm getting this:

[Doctrine\DBAL\Exception\ConnectionException]
An exception occurred in driver: SQLSTATE[HY000] [1045] Access denied for user 'root'@'loc
alhost' (using password: NO)

[Doctrine\DBAL\Driver\PDOException]
SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: NO)

[PDOException]
SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: NO)

doctrine:database:create [--shard SHARD] [--connection [CONNECTION]] [--if-not-exists] [-h|--help] [-q|--quiet] [-v|vv|vvv|--verbose] [-V|--version] [--ansi] [--no-ansi] [-n|--no-interaction] [-e|--env ENV] [--no-debug] [--] <command>

|

MolloKhan SFCASTS Contabexpress L. 5 years ago edited

Hey Contabexpress L.

After you install composer you need to update the Database URL string to use your credentials inside app/config/parameters.yml. If you haven't created any MySql user yet, you will have to create one first

Cheers!

|

Contabexpress L. MolloKhan 5 years ago edited

Hi MolloKhan

and how can I create that or check if I have one?

Tks for the help

|

MolloKhan SFCASTS Contabexpress L. 5 years ago edited

The first thing to check is if you already have MySql installed on your computer (unless you want to use Docker or something similar)
Run mysql -v it should print info about Mysql if installed
If you don't have it installed follow this guide https://linuxize.com/post/how-to-install-mysql-on-ubuntu-18-04/ it seems ok
after that you should be ready to rock ;)

|

Contabexpress L. MolloKhan 5 years ago

It's alredy installed and running. It had and password that i didn't remembered, now I've updated the parameters.yml and it worked. Thanks for the help!

1 |

Akavir S. 6 years ago edited

Hello,

I cant .bin/console server:run

PHP Warning: require(/var/www/html/javaScriptProject/app/../vendor/autoload.php): failed to open stream: No such file or directory in /var/www/html/javaScriptProject/app/autoload.php on line 7<br />PHP Fatal error: require(): Failed opening required '/var/www/html/javaScriptProject/app/../vendor/autoload.php' (include_path='.:/usr/share/php') in /var/www/html/javaScriptProject/app/autoload.php on line 7<br />

|

Victor SFCASTS Akavir S. 6 years ago

Hey Virgile,

It looks like you forgot to install Composer dependencies, try to run "composer install" in project root directory first. Actually, you need to do a few more required steps, see README.md in downloaded course code and follow the steps from there to bootstrap the project locally.

Cheers!

|

Akavir S. Victor 6 years ago edited

Hey again Victor,

This is because i encounter an error when doing composer install

`
An error occurred when executing the "'cache:clear --no-warmup'" command:

PHP Fatal error: Uncaught Symfony\Component\Debug\Exception\ClassNotFoundException: Attempted to load class "DOMDocument" from the global namespace.
Did you forget a "use" statement? in /var/www/html/javaScriptProject/vendor/symfony/symfony/src/Symfony/Component/Config/Util/XmlUtils.php:52
Stack trace:
#0 /var/www/html/javaScriptProject/vendor/symfony/symfony/src/Symfony/Component/DependencyInjection/Loader/XmlFileLoader.php(263): Symfony\Component\
Config\Util\XmlUtils::loadFile()
#1 /var/www/html/javaScriptProject/vendor/symfony/symfony/src/Symfony/Component/DependencyInjection/Loader/XmlFileLoader.php(41): Symfony\Component\D
ependencyInjection\Loader\XmlFileLoader->parseFileToDOM()
#2 /var/www/html/javaScriptProject/vendor/symfony/symfony/src/Symfony/Bundle/FrameworkBundle/DependencyInjection/FrameworkExtension.php(64): Symfony\
Component\DependencyInjection\Loader\XmlFileLoader->load()
#3 /var/www/html/javaScriptProject/vendor/symfony/symfony/src/Symfony/Component/DependencyInjection/Compiler/MergeExtensionConfigurationPass in /var/
www/html/javaScriptProject/vendor/symfony/symfony/src/Symfony/Component/Config/Util/XmlUtils.php on line 52 `

Maybe you know why this happens ?

|

Victor SFCASTS Akavir S. 6 years ago

Hey virgile,

This is the error *after* Composer was installed its dependencies. Do you see the same "Failed opening required '/var/www/html/javaScriptProject/app/../vendor/autoload.php" error even after executing "composer install"? If so, please, try to remove vendor/ dir with "rm -rf vendor/" command and re-install dependencies again with "composer install". The error about "autoload.php" should gone.

Let me know if it does not.

About the second error - it looks like the project required XML PHP extension that is missing in your system. Please, try to install XML extension and try again.

Cheers!

|

Akavir S. Victor 6 years ago

All hail Victor ! Your on fire !

I followed the steps and now it works !

Thanks a lot :)

|

Victor SFCASTS Akavir S. 6 years ago

Hey Virgile,

Perfect! Thanks for confirming those steps helped you :)

Cheers!

|

Load more comments

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
    }
}

Next Chapter