Difficulty with using wire:key and wire:click

@vincent15000 I tried putting wire:ignore at the top of the . Upon clicking it still causes the first table to go dissapear.

@Jdubstep1357 At the top of the what ? Show the code where you added it.

@vincent15000

     <tbody wire:ignore>
                        <div wire:model="product" name="product">
                            @foreach ($products as $product)
                                <tr>
                                    <td>
                                        <input type="radio" name="displayBtn" wire:click="display({{ $product->id }})" />
                                    </td>
                                    <td class="p-2 border-b border-l text-left" value="{{ $product->id }}">{{ $product->Date }}</td>
                                    <td class="p-2 border-b border-l text-left" value="{{ $product->id }}">{{ $product->FLA }}</td>
                                    <td class="p-2 border-b border-l text-left" value="{{ $product->id }}">{{ $product->Location_Name }}</td>
                                    <td class="p-2 border-b border-l text-left" value="{{ $product->id }}">{{ $product->Max_Students }}</td>
                                </tr>
                          
                                @endforeach
                        </div>
                    </tbody>

The first part of my code that has a dropdown selection box.

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<div x-data="{ show: false }" class="grid grid-col-12 h-screen flex items-center justify-center">
    <div class="col-sm-6">
        <!-- FIRST DROPDOWN -->
            <label class="block text-sm font-medium text-gray-700" for="category"> Regions </label>
            <select wire:model="category" name="category"    
                class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" required>
                <option value="">-- Pick a class --</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}">{{ $category->FLA }}</option>
                @endforeach
            </select>

I also added a at the first line and last line of my file.

@Jdubstep1357 I don't really understand what you really need to do with the radio buttons and the table.

Are you french ? I am ... I see the Eiffel tower behind you on your image. Don't hesitate to explain in french if you want.

@vincent15000 I am not French lol

Going back to my main problem: I have a table with radio buttons. On click it is supposed to trigger a query that displays a second table based on the top table's id.

When clicked, the bottom table's data is shown, but for whatever reason, everything inside of the gets deleted, or hidden. If I inspect the element after clicking on the radio button, it appears to not be shown at all.

@Jdubstep1357 Each time you do an action that modifies any content of the view, the component will be automatically reloaded. If a part of this component had loaded any JS script, I think that this JS script isn't reloaded once again, this could cause some strange behavior when you try to use for example Livewire and JQuery (what is perhaps not your case, but it's only an example).

If I summarize, when you click on the radio button, the first table disappears and the second one appears. But you don't want that the first one disappears.

Rather than doing this with Livewire, you should perhaps try to use only AlpineJS to handle the radio buttons and the show / hide of the tables.

@vincent15000 I only used javascript to show the table on click. If I get rid of the javascript the same result happens

@Jdubstep1357 Ok thank you for the screenshots.

I assume that the display({{ $product->id }}) method retrieves datas in the database to display the second table.

I see that you don't use any wire:key. I would add this.

<input type="radio" name="displayBtn" wire:click="display({{ $product->id }})" wire:key="'radio-'.$product->id" />

@vincent15000 Hmm. Unfortunately, that doesn't seem to work. I even got rid of all my javascript. I think this has to be a controller-query issue. I posted my controller below, and also added the first dropdown button.

@Jdubstep1357 Sorry there was an error.

<input type="radio" name="displayBtn" wire:click="display({{ $product->id }})" wire:key="radio-{{ $product->id }}" />

@Jdubstep1357 Just to check, I would add a dd($this->products) at the end of the display method.

@vincent15000 Ahhh. Interesting! I got this error:

Illuminate\Database\Eloquent\Collection {#498 ▼ // app\Http\Livewire\Review_Roster_Final.php:61

#items: []

#escapeWhenCastingToString: false

}

@Jdubstep1357 Can you share the code around the line 61 ?

@vincent15000 Sure thing!

    public function display(int $id): void
     {
        if(! is_null($id)) {
            $this->sizes = Class_DateModel::select(
                'Student_First_Name', 'Student_Last_Name', 'Phone', 'Email',
                'class_date.id', 'Date', 'Course_Name', 'FLA', 'Location_Name', 'Max_Students', 'Is_Primary'
                )
            ->join('course','Course_ID','=','course.id')
            ->join('class_location','class_location.id','=','Location_ID')
            ->join('address','Address_ID_FK','=','address.id')
            ->join('student','Student_Address_ID','=','address.id')
            ->where('Location_ID', $id)
            ->get();

            dd($this->products);

            $this->size = $this->sizes->first()->id ?? null;        
        }
    }```

@Jdubstep1357 Oh ok it was this method.

Hmmm ... well ... and dd($this->products->count() ?

@Jdubstep1357 Now the idea is to understand why the $products variable is empty after having clicked on a radio button.

Sorry I have to go, I come back soon.

@vincent15000 That's fine Vincent. Ill be here most of the day. Thank you again for your help. You have been very helpful and I am most grateful

@Jdubstep1357 Just before line 61, check with dd() all values needed inside the query.

@vincent15000 You mean at the tail end of the display method? I tried that and got a completely blank screen.

https://imgur.com/ua3os1z

Edit: sorry I just thought you meant dd() with nothing in it lol

@vincent15000 Here it is:

https://imgur.com/FoOqGKe

And here are some other attributes:

https://imgur.com/4px8YYu

@Jdubstep1357 I meant to check which category is selected because the category is used inside the query.

@vincent15000 Here it is:

https://imgur.com/nT3G2J1

@Jdubstep1357 Which category ... ? see this comment below => // is $value a category id ?

    public function updatedCategory($value): void 
    {
        $this->sizes = collect();
        $this->reset('size', 'product');

        $this->products = CourseModel::select('class_date.id', 'Date', 'Course_Name', 'FLA', 'Location_Name', 'Max_Students', 'Is_Primary')
        ->join('class_date','class_date.Course_ID','=','course.id')
        ->join('class_location','class_date.Location_ID','=','class_location.id')
        ->where('Course_ID', $value) // is $value a category id ?
        ->get();
    } 

If the $posts variable is empty, this can occur because there is a category update, or another reason. So you need to explore all possible causes, even those who are unbelievable.

@vincent15000 I see what you mean.

$value is tied into id of the selected dropdown field listed above.

There are 3 different queries:

1. The selection of the FLA field, which is tied into ID of the course table
2. The radio button is tied into the table, whose value is the Course_ID inside of the course table, which relates back to the ID of the course table
3. The final table is based upon the the value of one of the foreign keys on a different table: class_date, whose value is that of the second query

I know this may sound confusing and I am going to attach a document if you still need some clarification.

@Jdubstep1357 I would check line 61 if the category is null or not.

dd($this->category);

@vincent15000 It's not null. It display normally as the referenced value above: in this case 1406.

The value stays the same regardless of whether I dd($this->category) in the display function or the updatedCategory function

@Jdubstep1357 You should install the Livewire devtool for your browser. This will help you to observe all the Livewire components, variables, ...

@vincent15000 Thank you for the recommendation!

I used Livewire dev tools, and can show you the output. What's weird is that nothing seems to be passed into arrays. It recognizes the products value, and also the size of the bottom table. But as to 'why' the top data is disappearing, I am befuddled.

First before any selection: https://imgur.com/a/h0nPg2z

Second after clicking on the dropdown: https://imgur.com/7DLvkDU

Finally, after clicking on the first radio button: https://imgur.com/o1vjdoJ

@Jdubstep1357 Have you tried to add wire:ignore in the first table ?

// first table
<table wire:ignore>
	// radio buttons with wire:key
</table>

// second table
<table>
	...
</table>

wire:key is very important, if not set it can generate some unexpected behavior.

https://laravel-livewire.com/docs/2.x/troubleshooting#dom-diffing-cures

@vincent15000 Yes, but all that does is not allow the first table data to be shown.

What's strange, is that I can continuously requery so to speak. Meaning:

1. I can take the drop-down
2. Click on the radio button to display the lower table, but get rid of the upper table's data
3. Can reselect option from upper dropdown
4. Rinse and repeat

@Jdubstep1357 My comments don't have helped you ?

@Jdubstep1357 Do you have your code on github ? I would be interested in solving your problem because there is no reason why the products become null when you click on a radio button. You necessarily have something wrong in your code.

@vincent15000 Your comments have helped me tremendously. I have a much better understanding of livewire as a whole. As it turns out I had an issue with my query itself. Once I fixed that, it worked perfectly.

@Jdubstep1357 If my comments have helped you, is it normal that the best answer is one of your comments ?

@vincent15000 Dude trolls you for days, gets you to help and doesn't even leave a best answer for you.... poor form really