title: jQuery.Deferred exception: Cannot read properties of undefined (reading 'length') -> Laravel 8 Boilerplate + Bootstrap
body: <p>I am using <a href="https://sebastienheyd.github.io/boilerplate/plugins/select2" rel="nofollow noreferrer">Laravel Boilerplate from Sebastien Heyd</a> and trying to get <a href="https://select2.org/data-sources/ajax" rel="nofollow noreferrer">Select2 options via Ajax</a>. When I click on the select element after the page loads, I get the error:</p>
  <blockquote>
  <p>jQuery.Deferred exception: Cannot read properties of undefined (reading 'length') TypeError: Cannot read properties of undefined (reading 'length').</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/YZjGu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YZjGu.png" alt="Error in browser console." /></a></p>
  <p>My code is like this.</p>
  <ol>
  <li><p>Blade template.</p>
  <pre><code>    &lt;div class=&quot;col-lg-2&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
              &lt;x-boilerplate::select2 name=&quot;frm_Daily_Heading&quot; id=&quot;frm_Daily_Headings&quot; label=&quot;Heading&quot; :ajax=&quot;route('boilerplate.getHeadings')&quot; :allowClear=&quot;true&quot; placeholder=&quot;-&quot;&gt;
              &lt;/x-boilerplate::select2&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  </li>
  </ol>
    
  
  <pre><code>@endsection
  @include('boilerplate::load.select2')
  @include('boilerplate::load.datepicker')
  @push('js')
  
      &lt;script&gt;    
      $( document ).ready(function() {
          $( &quot;#frm_Daily_Headings&quot; ).select2({
              ajax: { 
                  url: &quot;{{route('boilerplate.getHeadings')}}&quot;,
                  type: &quot;post&quot;,
                  dataType: 'json',
                  delay: 2500,
                  data: function (params) {
                      if(params.term === undefined){return} else{
                      return {
                          q: params.term, // search term
                          &quot;_token&quot;: &quot;{{ csrf_token() }}&quot;,
                      };}
                  },
                  processResults: function (response) {
                      if(results === undefined) {return} else {
                      return {
                          results: data.items
                          // id: params.term,
                          // text: params.term
                          // newOption: true
                      };}
                  },
                  cache: true
              }
          });
      });
      $('.datepicker').datetimepicker();
  &lt;/script&gt;
  
      @endpush
  ```
  </code></pre>
  <ol start="2">
  <li><p>My Controller for handling Ajax request for the Select2.</p>
  <pre><code>namespace App\Http\Controllers;
  
  use Illuminate\Http\Request;
  use App\Models\heading;
  
  class HeadingsController extends Controller
  {
      public function index() {
          return view('daily');
      }
      public function getHeadings(Request $request)
      {
          $input = $request-&gt;all();
          if (!empty($input['query'])) {
              $data = heading::select([&quot;id&quot;, &quot;heading&quot;])
              -&gt;where(&quot;heading&quot;, &quot;LIKE&quot;, &quot;%{$input['query']}%&quot;)
              -&gt;get();
          }
          else
          {
              $data = heading::select([&quot;id&quot;, &quot;heading&quot;])-&gt;get();
          }
          $headings = [];
          $returnThis=[];
          if (count($data) &gt; 0)
          {
              foreach ($data as $heading)
              {
                  $headings[] = array(
                      &quot;id&quot; =&gt; $heading-&gt;id,
                      &quot;text&quot; =&gt; $heading-&gt;heading,
                  );
                  $returnThis=['results',$headings];
              }
          }
          return response()-&gt;json($returnThis);
      }
  }
  </code></pre>
  </li>
  <li><p>My Model</p>
  <pre><code>namespace App\Models;
  
  use Illuminate\Database\Eloquent\Factories\HasFactory;
  use Illuminate\Database\Eloquent\Model;
  use App\Http\Controllers\HeadingsController;
  
  class heading extends Model
  {
      use HasFactory;
      protected $fillable=['id','heading'];
  }
  </code></pre>
  </li>
  </ol>
  <p>When I click on the dropdown, I get the above error. However, using the dev tools in chrome, under the Network section, I can see the values being loaded.
  <a href="https://i.stack.imgur.com/bKHRz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bKHRz.png" alt="Ajax response in Chrome dev tools" /></a></p>
  <p>The Ajax response corresponds to the requirements in Select2 documentation.</p>
  <p>My jquery is being loaded before bootstrap.min.js.</p>
  <p>All scripts and Laravel are the up to date versions.</p>
  <p>Any help would be greatly appreciated.</p>
  <p>Cheers.</p>