title: How to add Jquery Plugins to django
body: <p>I am learning django and i have a model called <code>Song</code> which has a many to many field <code>singer</code>. Now In the admin section  I have a simple Multi select field for this field. </p>
  
  <p>Now I would Like to change the Multi Select field suing the <a href="https://select2.github.io" rel="nofollow">Select2 Plugin</a>. </p>
  
  <p>I have also added a class to singer Field by doing this : </p>
  
  <p><strong>forms.py</strong></p>
  
  <pre><code>class SongForm(forms.ModelForm):
      class Meta:
          model = Song
          fields = ['title', 'lyrics', 'singer']
          widgets = {
              'singer': forms.SelectMultiple(attrs={'class': 'multipleSelectBox'}),
          } 
  </code></pre>
  
  <p>Now I picked Up the Minified JS and CSS files form the CDN Link provided on their Home Page, and include the JS and CSS to my Page by doing this : </p>
  
  <p><strong>admin.py</strong></p>
  
  <pre><code>class SongAdmin(admin.ModelAdmin):
          class Media:
              def __init__(self):
                  pass
  
              css = {
                  "all": ('css/plugins/select2.min.css', )
              }
              js = ('js/plugins/select2.min.js', 'js/songs.js')
  
          form = SongForm
  
  
  admin.site.register(Song, SongAdmin)
  </code></pre>
  
  <p>In <strong>js/songs.js</strong></p>
  
  <pre><code>(function($){
      $(".multipleSelectBox").select2();
  })(django.jQuery);
  </code></pre>
  
  <p>When I load this in browser I get the error in console :</p>
  
  <blockquote>
    <p>Select2: An instance of jQuery or a jQuery-compatible library was not
    found. Make sure that you are including jQuery before Select2 on your
    web page.</p>
  </blockquote>
  
  <p>However when I check the Page Source I can see the Jquery.js is being loaded before the select2.min.js. </p>
  
  <p>Dont know where i messed Up. Please Help. </p>