Chapters
46 Chapters
|
4:55:39
|
Login to bookmark this video
-
Course Code
Subscribe to download the code!
Subscribe to download the code!
-
This Video
Subscribe to download the video!
Subscribe to download the video!
-
Subtitles
Subscribe to download the subtitles!
Subscribe to download the subtitles!
-
Course Script
Subscribe to download the script!
Subscribe to download the script!
37.
Ajax Form Response Status Codes
Scroll down to the script below, click on any sentence (including terminal blocks) to jump to that spot in the video!
Subscribe to jump to this part in the video!
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.
This tutorial works perfectly with Stimulus 3!
What PHP libraries does this tutorial use?
// composer.json
{
"require": {
"php": ">=8.2",
"ext-ctype": "*",
"ext-iconv": "*",
"composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
"doctrine/annotations": "^1.0", // 1.11.1
"doctrine/doctrine-bundle": "^2.2", // 2.2.3
"doctrine/doctrine-migrations-bundle": "^3.0", // 3.0.2
"doctrine/orm": "^2.8", // 2.8.1
"phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
"sensio/framework-extra-bundle": "^5.6", // v5.6.1
"symfony/asset": "5.2.*", // v5.2.3
"symfony/console": "5.2.*", // v5.2.3
"symfony/dotenv": "5.2.*", // v5.2.3
"symfony/flex": "^1.3.1", // v1.21.6
"symfony/form": "5.2.*", // v5.2.3
"symfony/framework-bundle": "5.2.*", // v5.2.3
"symfony/property-access": "5.2.*", // v5.2.3
"symfony/property-info": "5.2.*", // v5.2.3
"symfony/proxy-manager-bridge": "5.2.*", // v5.2.3
"symfony/security-bundle": "5.2.*", // v5.2.3
"symfony/serializer": "5.2.*", // v5.2.3
"symfony/twig-bundle": "5.2.*", // v5.2.3
"symfony/ux-chartjs": "^1.1", // v1.2.0
"symfony/validator": "5.2.*", // v5.2.3
"symfony/webpack-encore-bundle": "^1.9", // v1.11.1
"symfony/yaml": "5.2.*", // v5.2.3
"twig/extra-bundle": "^2.12|^3.0", // v3.2.1
"twig/intl-extra": "^3.2", // v3.2.1
"twig/twig": "^2.12|^3.0" // v3.2.1
},
"require-dev": {
"doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
"symfony/debug-bundle": "^5.2", // v5.2.3
"symfony/maker-bundle": "^1.27", // v1.30.0
"symfony/monolog-bundle": "^3.0", // v3.6.0
"symfony/stopwatch": "^5.2", // v5.2.3
"symfony/var-dumper": "^5.2", // v5.2.3
"symfony/web-profiler-bundle": "^5.2" // v5.2.3
}
}
What JavaScript libraries does this tutorial use?
// package.json
{
"devDependencies": {
"@babel/preset-react": "^7.0.0", // 7.12.13
"@popperjs/core": "^2.9.1", // 2.9.1
"@symfony/stimulus-bridge": "^2.0.0", // 2.1.0
"@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets", // 1.1.0
"@symfony/webpack-encore": "^1.0.0", // 1.0.4
"bootstrap": "^5.0.0-beta2", // 5.0.0-beta2
"core-js": "^3.0.0", // 3.8.3
"jquery": "^3.6.0", // 3.6.0
"react": "^17.0.1", // 17.0.1
"react-dom": "^17.0.1", // 17.0.1
"regenerator-runtime": "^0.13.2", // 0.13.7
"stimulus": "^2.0.0", // 2.0.0
"stimulus-autocomplete": "^2.0.1-phylor-6095f2a9", // 2.0.1-phylor-6095f2a9
"stimulus-use": "^0.24.0-1", // 0.24.0-1
"sweetalert2": "^10.13.0", // 10.14.0
"webpack-bundle-analyzer": "^4.4.0", // 4.4.0
"webpack-notifier": "^1.6.0" // 1.13.0
}
}
14 Comments
Hi, what should I do when data connections between twig and stimulus fail?
I let my computer on standby with symfony serve, docker and yarn all running. When I came back, the twig got stuck with a "immutable/cache" color-square_controller.js. No matter what I change in the controller, nothing is applied.
When I rename data-action to color-square#selectRgb and the method to selectRgb for example, I get Error: Action "click->color-square#selectRgb" references undefined in inspector
And when I switch the name back to selectColor in the twig file, I get no error while there is no selectColor method in the controller
I already restarted everything, tried editing the controller but nothing works. Though, I still get webpack build error when I put errors in the controller
The previous stimulus controller (counter) works fine.
What's wrong with this controller update ?
Hi,
You mentioned something about a new method called renderForm() that processes the status code automatically in Symfony 5.3. I'm using Symfony 7.2.3, but I can't find that method and still have to set the status code manually.
Do you have any tips or resources where I can find that method? Or was it not implemented after all?
Thanks!
Hi,
I’m so sorry for the confusion earlier! I actually figured out what was going on with
renderForm()—it was deprecated. It turns out I was making a silly mistake in my code—I was using$form->createView()instead of just passing$formdirectly to the method. Once I fixed that, it worked like a charm, automatically handling the 422 status code for invalid forms.Hey @ethnerom ,
Awesome, I'm happy to hear you were able to find the problem yourself, well done! And thanks for sharing the solution with others, and confirming it works now :)
Cheers!
Hi - I was searching for a native javascript fetch solution for the submitForm method. Here is how I implemented it without jQuery. Just in case somebody needs it or maybe it could be improved.
Hey @Sucram
You could use
awaitto avoid those.then()calls. Anyways, thank you for sharing it :)Cheers!
Hi - thanks for the hint. Here's a version with
awaitwhich looks way cleaner than the version with those.then()calls.Hi, I'm following this video with an entity that has all the nullable fields in the database, now I want to try to see if the validation fails if I leave the form empty and therefore in the two-field formType I add 'required'=>true but it continues to validate everything. .. the only way to force it to show me the error is to put validation rules and entity level with :
...Is this the correct attitude ? thanks
Hey @pasquale_pellicani ,
That
required => trueonly will make it required on HTML level, i.e. you will see the HTML validation, and also, depends on your form theme, it will add an asterisk meaning this field is required which is what you need anyway. But to actually make the validation check on the server side - you need thatAssert\NotBlankvalidation constraint on the field. So all that altogether should work fine. But keep in mind that you may want to disable HTML5 validation to see the actual form validation errors from the server, because HTML5 will probably not allow the request to pass to the server side and will show you HTML5 validation error. To disable it, you can do https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#novalidate . Or if you're just testing things - you can just drop thatrequired => trueattribute temporarily but keep theNotBlankconstraint, it should show the serverside error to you :)I hope this helps!
Cheers!
Hi, I wonder why you do not let the "form success response" return the updated list and by this save one request?
I think it should be slightly faster.
Is this to make the modal reusable or to separate concerns or something like that?
I just wonder what the reason is to do a separate list refresh request.
Ok, got it while watching the remaining videos: It's for separation of concerns and it totally makes sense. Awesome. Can't wait to start using it. :o)
Hey @MatthiasN well done, you got it. Thanks for sharing it with others
Cheers!
Needed to bring back not nullable fields in the form:
<br />->add('brand')<br />->add('stockQuantity')<br />->add('imageFilename')<br />Hey Steven J.!
These fields are now nullable in the database :). But I made that change AFTER we started releasing videos - so if you downloaded the course code more than 1-2 weeks ago, you probably have the original, "not null" fields. Sorry about that! If you download the code now, you shouldn't need to make this change.
Cheers!
"Houston: no signs of life"
Start the conversation!