CODEWITHSUNDEEP
jquery-select2-4
Greg
Greg

Reputation: 1853

Select2 Ajax call failing with Uncaught ReferenceError: require is not defined

Does Select2 now have a prerequisite requirement for require.js or something as from the 4.0.0-rc.2 version from cdnjs.cloudfare.com I keep getting an error in select2.js on line 4582-

Uncaught ReferenceError: require is not defined.

My code is fairly straightforward:

<!DOCTYPE html> 
<html class="no-js" lang="en"> 
 <head> 
  <meta charset="utf-8"> 
  <title>Test Select2</title> 
  <link href="/css/normalize.css" rel="stylesheet"> 
  <link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.css"> 
 </head> 
 <body> 
  <!-- Main content --> 
   <section class="content"> 
    <form method="POST" action="http://test.local/test" accept-charset="UTF-8" role="form"> 
    <div class="form-group minimal"> 
     <span class="col-xs-3 control-label minimal"><label for="Test">Test:</label></span> 
     <div class="input-group col-xs-8 pull-left select2-bootstrap-prepend"> 
      <input type="hidden" 
                 id="test_select2" 
                 class="input-xlarge form-control minimal select2" 
                 data-placeholder="Search ACME" 
                 data-minimumInputLength=3 
                 data-width="copy" 
                 data-containterCssClass="form-control minimal" 
                 data-dropdownCssClass="alert-danger" 
                 data-allowClear="true" 
                 data-delay=250> 
     </div> 
    </div> 
   </section> 
   <!-- scripts --> 
   <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> 
   <script>window.jQuery || document.write('<script src="/js/jquery/2.1.3.min.js"><\/script>')</script> 
   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
   <script> 
   $(document).ready(function () { 
    $("#test_select2").select2({ 
     ajax: { 
     url: "/admin/test", 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
       return { 
        q: params.term, 
        page: params.page 
       }; 
      }, 
      processResults: function (data, page) { 
        return { 
          results: data.items 
        }; 
      }, 
      cache: true 
     } 
   }); 
  }); 
  </script> 
 <//body> 
</html>

Upvotes: 1

Views: 4726

Answers (1)

Kevin Brown-Silva
Kevin Brown-Silva

Reputation: 41719

This is a known issue in Select2 4.0.0-rc.2 that only affects people using Select2 with an <input /> element.

https://github.com/select2/select2/pull/3192

The problem is that the internal require calls were moved to a namespace in 4.0.0-rc.2 and we missed one call.

You can either stick with 4.0.0-rc.1 until Select2 4.0.0 is released (soon) or start converting your pages to use a <select> instead.

Upvotes: 7

Related Questions