dmhall0's avatar

Livewire not Working

I am trying to have a dependent dropdown. The user selects the skill and then livewire pulls the list of appropriate trainers.

In my app file I have @livewireStyles and <script src="{{ asset('js/app.js') }}" ></script> in the head and @livewireScripts at the bottom of my body.

My livewire blade file:

    <div class="form-group row">
        <label for="skill" class="col-md-4 col-form-label text-md-left">Skill Name (Number):</label>
        <div class="col-md-5">
            <select wire:model="selectedSkill" name="skill" class="form-control">
                <option value="">Select One...</option>
                @foreach($skills as $skill)
                    <option value="{{ $skill->id }}">{{ $skill->skill_name  }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="form-group row">
        <label for="trainer_id" class="col-md-4 col-form-label text-md-left">Internal Trainer:</label>
        <div class="col-md-5">
            @if(is_null($selectedSkill))
                Select a Skill from the above dropdown.
            @elseif(!is_null($selectedSkill) && !is_null($internalTrainers))
                <select wire:model="selectedTrainer" name="trainer_id" class="form-control">
                    <option value="">Select One...</option>
                    @foreach($internalTrainers as $internalTrainer)
                        <option value="{{ $internalTrainer->user_id }}">{{ $internalTrainer->user_name }}</option>
                    @endforeach
                </select>
            @else
                There are no Team Members at an Advanced level of training for this skill.
            @endif
        </div>
    </div>

I even try getting {{ $selectedSkill }} to display on the screen and nothing happens.

0 likes
17 replies
dmhall0's avatar

I compared that against mine and there is no difference between the structure.

Strange...

Could it be an issue with other JS on my page?

Snapey's avatar

what do you have in your component?

dmhall0's avatar

Component is

namespace App\Http\Livewire;

use Carbon\Carbon;
use Livewire\Component;
use Illuminate\Support\Facades\DB;

class SkillTrainer extends Component
{

    public $skills;
    public $selectedSkill;
    public $internalTrainers = [];
    public $selectedTrainer;

    public function render()
    {
        return view('livewire.skill-trainer', [

            //get the skills
            'skills' => DB::table('skills')
                ->whereNull('skills.deleted_at')
                ->orderBy('skill_name')
                ->get(),

        ]);
    }

The list of skills shows up correctly in the Skill dropdown, but when I select a give skill nothing happens, even with I have {{ $selectedSkill }} just to see it change.

tykus's avatar

You have skills as a public property on the Component, and also as data passed to the view; should the public property be the singular skill?

Generally, anything that needs fetching only once (like a list of skills) does not need to be passed using the render method (which will execute the query everytime the component changes); use the mount method to set public state on instance instead.

1 like
Snapey's avatar

open your browser developer tools, and go to the network tab. When you change the dropdown you should see a network request.

If not, then check that livewireScripts is installed correctly

dmhall0's avatar

Sorry, missed your post when I replied.

Nothing happens on the Network tab.

How do I check to make sure livewireScripts is installed correctly?

dmhall0's avatar

Something else to add...

When I go to the page and inspect; as I change the skill dropdown nothing is happening on the Network tab.

Snapey's avatar

check over your layout to make sure your component is included in a layout that contains the livewire script

check that there are no console errors

check in network tab to see if there are any failed load requests when you refresh the page

dmhall0's avatar

Okay, looks like I have a series of errors on the console for livewire...

GET http://workbus/livewire/livewire.js?id=25f025805c3c370f7e87 net::ERR_ABORTED 404 (Not Found)

Uncaught ReferenceError: Livewire is not defined
    at new:1159
(anonymous) @ new:1159

I have the livewireScripts in my app file like instructed. Could it be in conflict with other javascript (I read that in some other places)?

deansatch's avatar

Maybe a daft question but what version of laravel is this?

deansatch's avatar
deansatch
5 years ago
Best Answer
Level 24

Also try publishing assets if you haven’t already

php artisan livewire:publish --assets

deansatch's avatar

I agree with tykus about the mount(). No need to keep querying the database for the skills.

Assuming your code provided was complete, you need to wrap your livewire blade code in a div otherwise expect unexplained nothingness

dmhall0's avatar

Agree as well. I have moved it. I did not show the entire livewire blade file, there are div's. Thanks.

Snapey's avatar

when you add @livewireScripts to your site, then this blade tag loads the javascript by inserting into your page;

<script src="http://workbus/livewire/livewire.js....

so does http://workbus correspond with your sites URL?

Check you don't have an application route like /livewire that might conflict with the above route.

dmhall0's avatar

@deansatch

I am on Laravel 7

I ran the publish command as you recommend and now something crazy happens (a modal of my site pops up?!) when I change the dropdown, but at least I am getting a response... progress!

@snapey

Yes, workbus is for my local.

After getting a response to the dropdown change now let me check my code and I'll get back if I can't figure it out.

Thank you everyone! You all are great.

Please or to participate in this conversation.