Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Ania's avatar

dropdown not geting data wire:ignore

hello , i am using search in two dropdown in same table first one i find warehouse id after select id send wh_id to property after it i want display data from second dropdown to select item name with searching but when using wire:igonre not getting data how to fix it?

blade:

            <div class="col-span-2">
                <label for="wh_id" class="block text-sm font-medium text-gray-700">
                    {{ translate('Place') }}
                </label>
            
                <div wire:ignore>
                    <select 
                        id="wh_id" 
                        name="wh_id"
                        x-on:change="$wire.set('wh_id', $event.target.value)"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                        data-hs-select='{
                            "hasSearch": true,
                            "searchPlaceholder": "{{ translate('Search Place') }}...",
                            "searchClasses": "block w-full sm:text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-1 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 py-1.5 sm:py-2 px-3",
                            "searchWrapperClasses": "bg-white p-2 -mx-1 sticky top-0 dark:bg-neutral-900",
                            "placeholder": "{{ translate('Select Place') }}...",
                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"me-2\" data-icon></span><span class=\"text-gray-800 dark:text-neutral-200 \" data-title></span></button>",
                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600",
                            "dropdownClasses": "mt-2 max-h-72 pb-1 px-1 space-y-0.5 z-20 w-full bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
                            "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
                            "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-gray-800 dark:text-neutral-200 \" data-title></div></div></div>",
                            "extraMarkup": "<div class=\"absolute top-1/2 end-3 -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-gray-500 dark:text-neutral-500 \" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
                        }'
                    >
                        <option value="" selected>{{ translate('Select a warehouse') }}</option>
                        @foreach ($warehouses as $warehouse)
                            <option value="{{ $warehouse->Wh_ID }}">
                                {{ $warehouse->wh_in->Wh_Name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            
                {{ $wh_id }}
            
                @error('wh_id')
                    <span class="text-sm text-red-500">{{ $message }}</span>
                @enderror
            </div>
            
            @push('scripts')
                <script>
                    function initHSSelect() {
                        const el = document.getElementById('wh_id');
                        if (el) {
                            window.HSSelect?.autoInit();
                        }
                    }
            
                    document.addEventListener('livewire:load', () => {
                        initHSSelect();
            
                        Livewire.hook('message.processed', () => {
                            initHSSelect();
                        });
                    });
                </script>
            @endpush
            


            {{-- --------------------------------------------------- --}}
            <div class="col-span-2">
                <label for="item_id" class="block text-sm font-medium text-gray-700">
                    {{ translate('Item Name') }}
                </label>
            
                <div wire:ignore>
                    <select
                        id="item_id"
                        name="item_id"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                        data-hs-select='{
                            "hasSearch": true,
                            "searchPlaceholder": "{{ translate('Search Item Name') }}...",
                            "searchClasses": "block w-full sm:text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-1 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 py-1.5 sm:py-2 px-3",
                            "searchWrapperClasses": "bg-white p-2 -mx-1 sticky top-0 dark:bg-neutral-900",
                            "placeholder": "{{ translate('Select Item Name') }}...",
                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"me-2\" data-icon></span><span class=\"text-gray-800 dark:text-neutral-200 \" data-title></span></button>",
                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-neutral-600",
                            "dropdownClasses": "mt-2 max-h-72 pb-1 px-1 space-y-0.5 z-20 w-full bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
                            "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
                            "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-gray-800 dark:text-neutral-200 \" data-title></div></div></div>",
                            "extraMarkup": "<div class=\"absolute top-1/2 end-3 -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-gray-500 dark:text-neutral-500 \" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
                        }'
                        x-on:change="$wire.set('item_id', $event.target.value)"
                    >
                        <option value="">{{ translate('Select Item') }}</option>
                        
                        @foreach ($Item_IDData_02 as $item)
                            <option value="{{ $item->Item_ID }}">
                                {{ $item->Item_Name ?? ($item->item_id->Item_Name ?? '') }}
                            </option>
                        @endforeach
                    </select>
                </div>
                
                @error('item_id')
                    <span class="text-sm text-red-500">{{ $message }}</span>
                @enderror
            </div>
            
            <script>
                function initHSSelectItem() {
                    const el = document.getElementById('item_id');
                    if (el) {
                        window.HSSelect?.autoInit();
                    }
                }
            
                document.addEventListener('livewire:load', () => {
                    initHSSelectItem();
                });
            
                Livewire.hook('message.processed', (message, component) => {
                    initHSSelectItem();
                });
            </script>

component:

0 likes
9 replies
Ania's avatar

component:

public $wh_id; public $Item_IDData_02 = []; public $group_01; public $group_02; public $item_id; public $Measurement_IDb; public $quantity; public $quantity1; public $place_id; public $description; // public $order_list; public $user_id; public $item_in; public $wh_in; public $wh_out; public $wh_direct; public $available_item;

public function __construct()
{
    $this->user_id = Auth::user()->id;
}





public function save()
{

    $this->validate([
        'wh_id' => 'required',
        'item_id' => 'required',
        'Measurement_IDb' => 'required',
        'quantity' => 'required',
        'place_id' => 'required',

    ]);


    book_item_tempModel::create([
        'wh_id' => $this->wh_id,
        'item_id' => $this->item_id,
        'Measurement_IDb' => $this->Measurement_IDb,
        'quantity' => $this->quantity,
        'place_id' => $this->place_id,
        'description' => $this->description,
        'usersID' => $this->user_id,
    ]);





    $this->reset();

    $this->dispatch('refreshpage');
}



public function updated()
{

    $wh_in = wh_inModel::where('Item_ID', $this->item_id)
        ->where('Wh_ID', $this->wh_id)->sum('Quantity');


    $wh_out = wh_outModel::where('Item_ID', $this->item_id)->where('Wh_ID', $this->wh_id)->sum('Quantity');
    $wh_direct = wh_directModel::where('Item_ID', $this->item_id)->where('Wh_ID', $this->wh_id)->sum('Quantity');
    $booked = bookItems::where('item_id', $this->item_id)->where('wh_id', $this->wh_id)->sum('quantity');
    // dd($wh_direct);
    $available_item = $wh_in - $wh_out - $wh_direct - $booked;
    $this->available_item = $available_item;
    // $this->wh_direct = $wh_direct;
    $this->quantity = floatval($this->quantity);
}

public function updatedWhId()
{
    $this->Item_IDData_02 = wh_inModel::with('item_id')
        ->select('Item_ID')
        ->where('Wh_ID', $this->wh_id)
        ->groupBy('Item_ID')
        ->get();
}



public function render()
{
    $data = [
        'warehouses' => wh_inModel::select('Wh_ID')->groupBy('Wh_ID')->get(),
        'items' => wh_inModel::with('item_id')
            ->select('Item_ID')
            // ->where('Wh_ID', $this->wh_id)
            ->groupBy('Item_ID')
            ->get(),

        'book_items' => bookItems::with('item_idRel', 'Measurement_Rel', 'wh_Rel')->get(),
        // 'groups_1' => item_idModel::select('Group_01')->distinct()->orderBy('Group_01', 'asc')->get(),
        // 'groups_2' => item_idModel::select('Group_02')->distinct()->where('Group_01', 'LIKE', '%' . $this->group_01 . '%')->orderBy('Group_02', 'asc')->get(),

        'wh_in' => wh_inModel::where('Item_ID', $this->item_id)->sum('Quantity'),

        // 'measurements' => item_idModel::with('Measurement_Rel')->where('Item_ID' ,'LIKE','%' . $this->item_id_1 . '%')->get(),
        // 'measurements_item' => item_idModel::findorfail($this->item_measure),
        'measurements' => measurementModel::all(),
        'places' => placeModel::all(),
        'available_item' => $this->available_item,
    ];
    return view('livewire.book-items.add-new-item', $data);
}
Ania's avatar

Sorry i didn't complete title, it is mean when using wire:ignore searching works in drop down but didn't get data, and when removing wire:ignore , can get data but search not working on second dropdown (item_id).

Ania's avatar

Can't searching for warehouse or item in dropdown i want have search

Ania's avatar

sorry bro , i need searching inside dropdown element like image above , as your code i must using but not need it

Please or to participate in this conversation.