What seems to be the problem:
Hello everyone!
I am trying to make reactive with livewire a modal window that contains a datatable with a search engine and a select, so that when you search or select from the select it automatically modifies the datatable.
It loads fine, but when I try to enter a datatable in the search engine it crashes and leaves the screen blank, it doesn’t give any error nor in the console.
This same code I have used it in a page without modal and it works correctly so I deduce that it must exist some problem with the modal windows.
MODAL:
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Todas las encuestas</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input wire:model="search" type="text" class="form-control my-2" placeholder="Buscador...">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Titulo</th>
<th scope="col">
<select class="form-control" name="categoria" wire:model="categoria">
<option selected value="">CATEGORIAS</option>
@foreach ($categorias as $categoria)
<option value="{{ $categoria->id }}">{{ $categoria->name }}</option>
@endforeach
</select>
</th>
<th scope="col"></th>
</tr>
</thead>
@if($encuestas->count())
<tbody>
@foreach($encuestas as $encuesta)
<tr>
<th scope="row">{{$encuesta->id}}</th>
<td>{{$encuesta->title}}</td>
<td>
@foreach($encuesta->categories as $categoria)
<span class="badge badge-pill badge-light">{{$categoria->name}}</span>
@endforeach
</td>
<td>
<a href="{{ route('admin.encuestas.edit', $encuesta)}}" class="text-success float-right mr-4"><i class="fas fa-edit"></i></a>
</td>
</tr>
@endforeach
</tbody>
</table>
@else
<div>
<p class="text-danger">No se han encontrado resultados que coincidan...</p>
</div>
@endif
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
LIVEWIRE COMPONENT:
public $search, $categoria;
public function render()
{
$encuestas = Survey::with('categories')
->where('title', 'like', "%{$this->search}%")
//->orWhere('categories:name', 'LIKE', '%' . $this->search . '%')
//->paginate(8);
->get();
$categorias = Category::all();
if ($this->categoria)
{
$encuestas = Survey::with('categories')
->where('title', 'like', "%{$this->search}%")
->whereHas('categories', function($query) {
$query->whereIn('category_id', [$this->categoria]);
})->get();
}
return view('livewire.admin.survey-index', compact('encuestas', 'categorias'));
Can someone guide me to see how I can do it? Thanks
Are you using the latest version of Livewire:
I am using laravel 8 and adminlte in case it helps.
Do you have any screenshots or code examples:
Attached are screenshots of the modal window and the livewire component.