title: Loading/Unloading Select2 cleanly
body: <p>My page loads within a portlet-like application on which I have no control. My page is rendered within a portlet content pane when I click a link on the menu of the portlet application.</p>
  
  <p>Scripts that have been declared within the JSP file get loaded properly.
  I am creating dynamic select elements on my page and applying the Select2 plugin on them.</p>
  
  <p>For Select2, I have observed the following issues (which I can't create a fiddle for...or don't know how to create).</p>
  
  <p>When the portlet loads my page in the content pane via ajax the first time, everything works fine.
  When I reload the page (still ajax), I get the following error:</p>
  
  <p><code>$selectBox.select2 is not a function</code></p>
  
  <p>I presumed this may be because there might be an extra instance of Select2 getting created on my page.</p>
  
  <p>Therefore I added the following statement in my page (before the script tag for select2)</p>
  
  <p><code>window.Select2 = undefined;</code></p>
  
  <p>Now, the select2 plugin loads fine. However, when I click on a drop-down and click anywhere else on the page, I would expect the drop-down to close, but I get the following error on the console</p>
  
  <p><code>TypeError: self is undefined</code></p>
  
  <p>Is there a better way of solving this problem?
  How do I cleanly remove "Select2" from my page before loading it again?</p>