Select Search in modal with foreach loop wont search

Topic: Select Search in modal with foreach loop wont search

Jblevins pro asked 5 years ago

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>

Add comment

Arkadiusz Cacko staff answered 5 years ago

0 0 Best answer

<p>@Jblevins I tried with controller. Search still works in modal. Please check with my example code below.</p>

<p><strong>Model file</strong> <em>Employee.php</em></p>

<pre class="prettyprint"><code>namespace App;

use Illuminate\Database\Eloquent\Model;

class Employee extends Model
{

protected $table = 'users';

}
</code></pre>

<p><strong>Controller file</strong> <em>MdbSupport.php</em></p>

<pre class="prettyprint"><code>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]);
    }
}  
</code></pre>

<p><strong>Template</strong> <em>support.blade.php</em></p>

<pre class="prettyprint"><code>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicExampleModal">
  Launch demo modal
</button>

<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>
</code></pre>

Please insert min. 20 characters.

@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>

Add comment

Arkadiusz Cacko staff answered 5 years ago

1 0 Best answer

<p>I don't know where you define <code>$employee</code> variable, so I created it for tests in blade template and in this case everything works fine.</p>

<pre class="prettyprint"><code>
<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

<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">&times;</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>
</code></pre>

Please insert min. 20 characters.

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">&times;</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 5 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.

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

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 5 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

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

Jblevins

Pro User 25Support score
4Questions 1Answers 0Snippets