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

18.

AJAX Form Submit: The Lazy Way

|

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

16 Comments

Sort By

Login or Register to join the conversation

thephilosoft 4 years ago

...that is, we submit the form via AJAX and the server returns HTML. ... This is easier... because you don't need to do all that much in JavaScript. But, this approach is also a bit outdated.

fast-forward 5 years. stimulus and hotwire are a thing. boy, what a spiral. although worth to mention pjax along the way

|

shadowc thephilosoft 4 years ago

Hey, Alexandr!

It's truly amazing how things developed in the frontend world! It's funny because when I looked at this tutorial the first time, I had many reservations about this approach. My entire life I had built clients based on APIs and JSON data being transfered...

Then the whole world changed, but I think what made this change possible was Stimulus. Without stimulus, there's very little motivation to return HTML from an ajax call (except for utter simplification)!.

|

ahmedbhs 7 years ago

Hey thank you guys for the vedio. Trying to decouple the `createApiResetApi` and the `getErrorsFormForm` inside a service But I didnt find a cool name for the php class that represent the logic behind. Any idea ? Maybe `RestViewHandler'? or APIhandler ..but they does not really seems correct to me

|

weaverryan SFCASTS ahmedbhs 7 years ago edited

Hey ahmedbhs!

Yea, both of those functions are related... but not that related- the first creates responses, while the second reformats some stuff so that it can be used to create a response later... So, honestly, if you want to put them into a service, maybe even ApiResponseUtil - something like that. Best idea I've got :).

Cheers!

|

Peter-K 8 years ago

this is the question regarding IDE, how did you manage to change $table to $wrapper on line 75 from line 73? What do I need to do?

|

MolloKhan SFCASTS Peter-K 8 years ago edited

Hey Peter K.

What Ryan did is called "Rename refactoring" and PhpStorm has a shortcut for it. If you are on windows, just type "shift + F6" (over a variable) and you will be able to do the same.
You can learn the most useful shortcuts here: https://www.jetbrains.com/h...
Or even better, watch our tutorial about developing with PhpStorm: https://knpuniversity.com/s...

Cheers!

2 |

Peter-K MolloKhan 8 years ago

thanks I will watch that one. I am on mac and I have short fingers cant even reach fn+shift+f6 with 1 hand :D lol

|

Victor SFCASTS Peter-K 8 years ago

Lol, I agree, not an easy shortcut for 1 hand :)

|

MolloKhan SFCASTS Peter-K 8 years ago

haha, is like playing the piano!

|

Shaun T. 8 years ago

In RepLogController.php you have a function called newRepLogAction. I was wondering why you create a new form type rather than just creating and persisting a new Replog instance?

|

MolloKhan SFCASTS Shaun T. 8 years ago edited

Hey Shaun T.

Most of the time is better to use a FormType instead of manually creating your entity objects because there is a lot of built-in functionality, like property constraints, form life cycles, CSRF protection, etc

I hope it answers your question :)

|

Shaun T. MolloKhan 8 years ago edited

Many thanks @MolloKhan :)

|

Max S. 8 years ago

With
var $form = $(e.currentTarget).attr('action');
console.log($form);

I get undefined. How is the url path generated?

Thx!

|

Victor SFCASTS Max S. 8 years ago edited

Hey Max,

Could you double check you have the "action" attribute in your <form ... > tag? Also, do console.log($(e.currentTarget)) and ensure that the right form is selected.

Cheers!

|

Max S. Victor 8 years ago edited

Hey Victor,

well, the right form is selected, but there is no attribute 'action'. If I add


{{ form_start(form, {
    'attr': {
        'class': 'form-inline js-new-rep-log-form',
        'novalidate': 'novalidate',
        'action'    : 'asdf'
    }

to the twig file (I couldn't find a place in the video where this is added) I logically get 'asdf' back.
Interestingly although $form.attr('action') seems to be undefined an successful ajax-call to /lift is made... Setting the 'action': 'lift' produces an successful call as well.

|

Victor SFCASTS Max S. 8 years ago edited

Yo Max,

Yeah, it's kind of interesting! Actually, we do specify "action" nowhere and $form.attr('action') returns "undefined" - it's exactly as in our code. But when you set "url" to undefined - jQuery sends AJAX call to the same page where you are on, i.e. "/lift". So you can specify action explicitly... or just leave form without action and jQuery will send AJAX calls to the same URL.

Further in this course we'll add data-url" attribute to this form and will use it for AJAX calls:
https://knpuniversity.com/screencast/javascript/post-proper-api-endpoint

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