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

19.

Old-School AJAX HTML

|

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

6 Comments

Sort By

Login or Register to join the conversation

Will T. 4 years ago

I'm getting a double post to the delete and lift end points.

Can someone help me fix this?

|

weaverryan SFCASTS Will T. 4 years ago edited

Hey Will T.!

Oh no! Let's see if we can figure this out :). The fact that you're getting a double post to both the delete and lift endpoints makes me think that, somehow, your JavaScript click and submit listeners are being executed multiple times. But to make sure I'm not mistaking things, when you click to delete, you see 2 AJAX requests in your network tools, correct? Oh, and if that is correct, in the network tools in your browser, one of the columns in the network tools next to the request should be "initiator" (it may say something like "someFile.js:6"). Are both of the "initiators" identical or are they different?

Anyways, let's do some debugging! At the top of RepLogApp.js - (if you go to https://symfonycasts.com/screencast/javascript/old-school-ajax-html#codeblock-94f1aed6fd - and expand that code block to full, I'm talking about lines 4-20) we initialize the listeners. I'd add a console.log('init') to that function. In theory, it should only be called once. But it sounds almost like it's called twice in your case. And the answer will help us debug.

Let me know what you find!

Cheers!

|

danielchadwick 7 years ago edited

When LiftController.php is getting changed shouldn't we leave in 'repLog' => $repLog with the render?

|

MolloKhan SFCASTS danielchadwick 7 years ago

Hey @Daniel

I don't fully get your question. Could you tell to which part of video you are talking about?

Cheers!

|

Yan Yong 8 years ago edited

Will the following code make more sense to update the total weight after success ajax call? I feel really weird to use the calculateTotalWeight method in the ReplogApp object.


        handleNewFormSubmit: function (e) {
            ...
            var $totalWeight = this.$wrapper.find('.js-total-weight');
            var helper = this.helper;
            $.ajax({
            ...
            success: function(data) {
                  $totalWeight.html(helper.calculateTotalWeight());
            })
        }

|

Victor SFCASTS Yan Yong 8 years ago

Hey Yan,

But we do the same in the screencast, just move this code you mentioned (finding ".js-total-weight" element and calling calculateTotalWeight() method) to the separate method which is called updateTotalWeightLifted() - we use it in a few places: handleNewFormSubmit() and handleRepLogDelete() methods, so we get rid of code duplication this way.

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