Topic: Select Search in modal with foreach loop wont search
I have a select with seachable active in laravel in a modal.
When I use a foreach loop to display the options the search function will not work in a modal however works outside of modal on other pages.
If I remove the foreach loop and manually enter the data the search function works.
<select class="mdb-select" id="user_id" name="user_id" searchable="Search here.." >
<option value="" disabled selected>Choose Employee</option>
@foreach($employee as $row)
<option value="{{$row->user_id}}" >{{$row->last_name}}, {{$row->first_name}}</option>
@endforeach
</select>
Have this in the same modal and it works without issue.
<div class="col-lg-6 col-md-12">
<select class="mdb-select md-form" id="user_id" name="reason" searchable="Search here..">
<option value="" disabled selected>Response Type</option>
<option value="1">Random</option>
<option value="2">30-30-30</option>
<option value="3">Back to Driving Program</option>
<option value="4">Post Accident Review</option>
<option value="5">Post Complaint Review</option>
</select>
</div>
Hi
I don't know where you define $employee variable, so I created it for tests in blade template and in this case everything works fine.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicExampleModal">
Launch demo modal
</button>
@php
$employee = [(object)['user_id' => '1', 'first_name' => 'Adams', 'last_name' => 'Baker'],(object)['user_id' => '2', 'first_name' => 'Clark', 'last_name' => 'Davis'],(object)['user_id' => '3', 'first_name' => 'Frank', 'last_name' => 'Evans']];
@endphp
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<select class="mdb-select" id="user_id" name="user_id" searchable="Search here.." >
<option value="" disabled selected>Choose Employee</option>
@foreach($employee as $row)
<option value="{{$row->user_id}}" >{{$row->last_name}}, {{$row->first_name}}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
Jblevins pro commented 6 years ago
$employee is created in the controller via eloquent.
$employee = Employee::orderBy('last_name')->where('status', 5)->get();
What I cant seem to figure out is if I use the code from above the select search works just fine. Once I use the data forwarded by the controller the search function no longer works plus if I take the select out of the modal and use it the search function works fine. Just not working inside of modal.
Hi there,
I think it happens because the select is initialized before the select options are rendered.
Try to run the init function after your laravel scripts end's up
Jblevins pro commented 6 years ago
Not sure that this is the solution, I have tried moving the init function to the end of the whole script with no luck. In the same modal I have two other selects that are hard coded and they work fine with the search function.
This below works without issue
Response Type Random 30-30-30 Back to Driving Program Post Accident Review Post Complaint Review
@Jblevins I tried with controller. Search still works in modal. Please check with my example code below.
Model file Employee.php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Employee extends Model
{
protected $table = 'users';
}
Controller file MdbSupport.php
namespace App\Http\Controllers;
use App\Employee as Employee;
use Illuminate\Http\Request;
class MdbSupport extends Controller
{
public function index()
{
$users = Employee::orderBy('last_name')->where('status', 5)->get();
return view('support', ['employee' => $users]);
}
}
Template support.blade.php
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicExampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<select class="mdb-select" id="user_id" name="user_id" searchable="Search here.." >
<option value="" disabled selected>Choose Employee</option>
@foreach($employee as $row)
<option value="{{$row->user_id}}" >{{$row->last_name}}, {{$row->first_name}}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.1
- Device: Computer
- Browser: Firefox, Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No