In this last lesson for the products, we will create a Livewire component to create and edit products. In this form, we will use Select2 for dropdowns and CKEditor for textarea.
Before starting, let's add Select2 to our app...
Comments & Discussion
A
In Http\Livewire\ProductForm.php protected function initListsForFields(): void { $this->listsForFields['countries'] = Country::pluck('name', 'id')->toArray();
// THIS IS EXPLAINED BUT IT FAILS IN MY CASE:
// $this->listsForFields['categories'] =** Category::active()**->pluck('name', 'id')->toArray();
// CHANGED FOR the following and it now works
$this->listsForFields['categories'] = **Category::where('is_active', true)**->pluck('name', 'id')->toArray();
}
EE
You are using the scope Active() on Model Category, but the scope is not made anywhere in the tutorial. Inside App/Models/Category add
public function scopeActive($query)
{
$query->where('is_active', 1);
}
PK
EE
A
i get NULL when I place : dd($this->initListsForFields()); into the mount
shouldn't i have a full list of categories and countries at this point? The reason I am trying to see what is happening right there (and) the main issue I am having is that I get this error:
trim(): Argument #1 ($string) must be of type string, array given its an error on the select2/blade.php file, line 6 - its the attributes
A
i decided to back up the code i wrote along with this, and then test. i am getting the same exact error from the code in the repository, so i took a screenshot for clarity. Then realized cant attach the screenshot, so I will copy and paste... I don't understand the cause of the error, there is an array here, but it must be an array, because it was specified to be from the livewire component, right?
TypeError PHP 8.1.7 9.51.0 trim(): Argument #1 ($string) must be of type string, array given
the only thing i see that raises an eyebrow is this:
SELECT
name,
id
FROM
categories
WHERE
is_active = ?
PK
A
The code that fails - it is an exact duplicate of what is in the repository. i downloaded the respository Wednesday evening, and replaced my code with that downloaded version last evening when I had tried for several hours to solve and could not. I am running on a linux server, so all my commands are to run build and not dev. i mean literal file replacement, not copy and paste. so there could be no differences, no errors on my part.
PK
Not sure I understand the part of "replaced my code with that downloaded version", are you sure that nothing could be broken there?
So, anyway, how can I reproduce it to debug? You're saying I should download the repository and there will be an error already?
Otherwise, I can't really debug the situation or guess what you did wrong. Or maybe indeed the bug is somewhere in the repository, please help me to identify it.
A
A
I finally was able to get internet back up. and I pulled the entire repository and replaced your code with mine - some things must have been different. ** I am happy to report that the issue was not in your code. ** I will go line by line through the code you have vs the code I wrote along with the training - until I spot the issue. Thank you for responding and trying to help. I am very excited to discover where I made the error, because I know it was definitely in my code!
A
not sure exactly why this error is gone, all the code matches perfectly to what I had created on my own. two things happened today, I did an npm install, and then a ran npm run build. this was not the first time, I did that many times when it was failing last week, - but i beleve that the npm install command I ran today must have fixed it.
L
Create product page display this error see the link Error. Help please
PK
L
L
N
J
Great tutorial, loving it. One thing I noted was the first letter lowercase of the component model from this artisan command:
php artisan make:component select2
In my IDE setup (PHPStorm's terminal on Mac Os Ventura) it is case sensitive, so I had to manually change the first letter to uppercase:
"Select2.php" inside of app->View-->Components->Select2.php
not sure of relevancy, but I do note that it is uppercase in the final source code repository.
IC
M
I like to have a flash message when a product is created or updated. Part solution: Install jantinnerezo/livewire-alert and then you can redirect like this:
$this->flash('success', 'Good job', [], '/products');
This works when you create a new product, but not when you update one. Why is that?
M
N
Read the docs https://livewire.laravel.com/docs/redirecting#flash-messages
Also, instead of @if (session('error')) you should be able to use @session('error')
M
The final instruction on the save() method in ProductForm is missing the sync and redirect which is in the repo version
$this->product->categories()->sync($this->categories);
$this->redirect(route('products.index'));
A
I've done everything it was mentioned in this lesson apparently and the solution works, but when i try to get out of the edit form, go to somewhere else and come back, this error below happens:
Uncaught CKEditorError: ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
at Object.<anonymous> (version.js:151:8)
at Object.<anonymous> (ckeditor.js:5:9192)
at i (bootstrap:19:22)
at Module.<anonymous> (ckeditor.js:5:122298)
at i (bootstrap:19:22)
at bootstrap:83:10
at ckeditor.js:5:4841
at universalModuleDefinition:9:27
at universalModuleDefinition:1:1
The link for my repository with my version of this Povilla's course: https://github.com/augusto-dmh/order-management-livewire-3
A
You use Livewire.hook('message.processed', (message, component) => { initSelect() }); However, it seems this is not a livewire 3 javascript hook, but a livewire 2. https://laravel-livewire.com/docs/2.x/lifecycle-hooks#js-hooks For me, for the version of livewire i am using, none of these hooks are being triggered. From the code posted in this tutorial, only livewire:init is being triggered.
- My question is: am i missing something?
- Do you have a specific tutorial on livewire(3, hopefully) javascript lifecycle hooks?
Image is missing after following phrase:
Thanks for reporting! Fixed now.