Search code examples
jquerygrailsgspjquery-select2

Typeerror: 'undefined' for select2 in grails gsp

I am using select2 for setting up fields used for tagging support for my application in my grails project.

In html I have included 

 <link rel="stylesheet" href="${resource(dir: 'css', file: 'select2.css')}"  type="text/css">
    <script  type="text/javascript" src="../js/select2.js"></script>
  <div class="select2-container select2-container-multi populate placeholder" id="s2id_e2_2" style="width: 250px"> 
     <select id="e2_2" name="majorSkills" multiple="multiple" style="width: 250px; display: 'Select Major Skills'; " class="populate placeholder"><option></option>
            <optgroup label="Java">
                <option value="j2ee">J2EE</option>
                <option value="hibernate">Hibernate</option>
                <option value="spring">Spring</option>

            </optgroup>
            <optgroup label="ERP">
                <option value="sap">SAP</option>
                <option value="peoplesoft">Peoplesoft</option>

            </optgroup>

        </select>
        </div>

In my script

$(document).ready(function () {
 $("#e2_2").select2({
                placeholder: "Select a State"
            });
});

js and css files are included but and error shown up in console is 

select2.js:33  ReferenceError: Can't find variable: jQuery

TypeError: 'undefined' is not a function (evaluating '$("#e2_2").select2({
        placeholder: "Select a State"
    })')

Can anyone help me to fix these issues?

Solution

  • select2 requires jquery. It looks like you didn't include it.