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

20.

Delegate Selectors FTW!

|

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

8 Comments

Sort By

Login or Register to join the conversation

Jeffrey C. 7 years ago

i have been wondering this whole time the leaderboard doesn't update when i add the weight. Do you need to make a whole function for it?

Have a nice day!

|

weaverryan SFCASTS Jeffrey C. 7 years ago edited

Hey Jeffrey C.!

Ah yes! I thought about hooking up the leaderboard to update dynamically, but it just didn't make it into the scope of the tutorial. In general (and this is true of everything in JavaScript), there are 2 ways to approach that problem:

1) The simple way: render it server-side (like it is now), fetch the new leaderboard JSON from the server (maybe you do this automatically after the form is submitted) then (somehow) update the table.

2) Do the same as the above, but render the leaderboard entirely client side - build it via JS on load. Then, when you need to update it, re-render it. That's a bit like what we do in this course with our rep log list, and it's what frontend frameworks do really well.

So, it's "easy" in a sense... but you need to write some code to render the leaderboard via JS. That's the "chore".

Let me know if that helps!

Cheers!

1 |

Chris 8 years ago edited

I was just coding and a question came up:

When I need a mouseenter and mouseleave event for the same executable do I have to write it two times, such as:


           this.$wrapper.on(
            'mouseenter',
            '.exampleClass',
            this.getTheFunction.bind(this)
        );

        this.$wrapper.on(
            'mouseleave',
            '.exampleClass',
            this.getTheFunction.bind(this)
        );```


Or is there something similar like this:

$('.exampleClass').on({
	mouseenter: function() {
		....;
	}, 
	mouseleave: function() {
		....;
	}
});



Have a nice day :)

|

MolloKhan SFCASTS Chris 8 years ago edited

Hey Chris

I had the same problem once and IIRC you can do this:


this.$wrapper.on(
            'mouseleave mouseenter', // two events separated by a space
            '.exampleClass',
            this.getTheFunction.bind(this)
        );

Give it a try and let me know if that works ;)

Cheers!

1 |

Max S. 8 years ago

Hey! Is it somehow possible at this point to refresh the form at a successful ajax call as well? Otherwise the form error won't be removed... Thx!

|

Victor SFCASTS Max S. 8 years ago

Yo Max,

Haha, another good question which we covered further: https://knpuniversity.com/s... ;)

Cheers!

|

Max S. Victor 8 years ago

I think I might put my questions somewhere first, watch the whole series and recheck them afterwards ;) Thanks Victor!

|

Victor SFCASTS Max S. 8 years ago

Hey Max,

No worry! Actually, you ask right questions.. and it's cool that we covered it ;)

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