Respect's avatar

search not working untill i refresh page manually using F5

Hello friends search not working untill i refresh page manually using F5 from keyboard i think livewire compoent stoped render (reload ) in first open of the page . i have to click f5 to refresh the componet manully to make search working after refresh search is working my code

// index.php
<?php

namespace App\Http\Livewire\Admin\Program;

use App\Models\Program;
use Livewire\Component;
use Illuminate\Support\Str;
use Livewire\WithPagination;

class Index extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap';
    protected $listeners = [
        'delete'
    ];
    public $search;


    public function delete($id)
    {
        // permation('program.delete');
        $program = Program::findOrFail($id);
        if ($program->governorates()->count()) {
            // REDIRECT TO
            return back()->with('info', __('app.delete_governorates_first'));
        }
        $program->delete();
        session()->flash('success', __('app.data_deleted'));
    }
    public function render()
    {
        $programs = Program::where('name','LIKE','%'.Str::of($this->search)->trim().'%')->latest()->paginate(10);
        return view('livewire.admin.program.index',[
            'programs' => $programs,
        ]);
    }
}


//index.blade.php
<x-slot name="title">@lang('app.dashboard') | @lang('app.programs') </x-slot>
<x-slot name="title2">@lang('app.programs')</x-slot>
<x-slot name="breadcrumbs">
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="fw-bold">@lang('app.home')</a></li>
    <li class="breadcrumb-item active">@lang('app.programs')</li>
</x-slot>
<section class="widget">
    <header class="mb-4">
        <h5 class="mb-3">
            {{-- Table <span class="fw-semi-bold">Styles</span> --}}
        </h5>
        <div class="widget-controls d-flex justify-content-between w-100">
            <div>
                <a href="{{ route('admin.program.create') }}" title="@lang('app.create')" @lang('app.create')
                    class="btn btn-primary btn-lg text-white">
                    <i class="fa fa-pencil-square" aria-hidden="true"></i>
                </a>
            </div>
            <div> <input type="text" class="form-control" placeholder="@lang('app.search')" wire:model="search"></div>
        </div>
    </header>
    <div class="widget-body">
        <x-admin.alerts/>
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th class="d-none d-md-table-cell">#</th>
                    <th>@lang('app.name')</th>
                    <th>@lang('app.video')</th>
                    <th>@lang('app.views_count')</th>
                    <th>@lang('app.actions')</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($programs as $program)
                    <tr  wire:key="{{ $loop->index }}">
                        <td class="d-none d-md-table-cell">{{ $program->id }}</td>
                        <td>{{ $program->translate('name') }}</td>
                          <td><a target="_blank" href="https://www.youtube.com/watch?v={{ $program->translate('video') }}">{{ $program->translate('video') }}</a></td>
                        <td>{{ $program->views }}</td>

                        <td class="width-150">
                            <a href="{{ route('admin.program.show', [$program->id]) }}" title="@lang('app.show')"
                                class="btn btn-warning"><i class="fa fa-eye" aria-hidden="true"></i></a>
                            <a href="{{ route('admin.program.edit', [$program->id]) }}" title="@lang('app.edit')"
                                class="btn btn-primary"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                            <button class="btn btn-danger" title="@lang('app.delete')"
                                onclick="deleteConfirmation({{ $program->id }})"><i class="fa fa-times"
                                    aria-hidden="true"></i></button>
                        </td>
                    </tr>
                @empty
                    @lang('app.data_not_found')
                @endforelse
            </tbody>

        </table>
        <hr>
        <div class="clearfix d-flex justify-content-center">
            {{ $programs->links() }}
        </div>
    </div>
</section>
@push('js')
    <script type="text/javascript">
        function deleteConfirmation(id) {
            Swal.fire({
                title: "{!! __('app.confirm_title') !!}",
                text: "{!! __('app.confirm_message') !!}",
                icon: 'warning',
                showCancelButton: true,
                cancelButtonText: "{!! __('app.cancle') !!}",
                confirmButtonColor: '#002b49',
                cancelButtonColor: '#d33',
                confirmButtonText: "{!! __('app.delete') !!}"
            }).then((result) => {
                if (result.isConfirmed) {
                    Livewire.emit('delete', id);
                }
            })
        }

    </script>
@endpush

0 likes
5 replies
vincent15000's avatar

Have you tried this ?

public function updatedSearch() {
	$this->render();
}

Tell me if it helps ;).

1 like
Respect's avatar

First of all thank you for your answer 2- why component not render once i open the page as usual 3- in frontend pages search in working once i open the page from first time 4- why that not happen in admin dashboard whats is wrong 5- when i back i will test your code and give you answer back |

prospero's avatar

I think see this post in another discussion forum...github? After delete, reset the search property

 public function delete($id)
    {
        //......
        $program->delete();
        $this->reset(['search']);   // or $this->search = ''
        session()->flash('success', __('app.data_deleted'));
    }
Respect's avatar
  • Not wokking at all untill i refresh browser manully
  • problem is : something block my component from render in first open or in search in iput with out refresh it manully
public function updatedSearch() {
	$this->render();
}
prospero's avatar

Please put all that blade code inside div container

Please or to participate in this conversation.