title: Failed to load resource: Uncaught TypeError: $(...).select2 is not a function
body: <p>So my MVC application keeps on throwing an Http internal server error with status code 500 when it renders my view. </p>
  
  <p>The error it is throwing is a JQuery "Uncaught TypeError: $(...).select2 is not a function"</p>
  
  <pre><code>Uncaught TypeError: $(...).select2 is not a function
      at HTMLDocument.&lt;anonymous&gt; (AddUser:381)
      at fire (jquery-1.11.0.js:3100)
      at Object.fireWith [as resolveWith] (jquery-1.11.0.js:3212)
      at Function.ready (jquery-1.11.0.js:3424)
      at HTMLDocument.completed (jquery-1.11.0.js:3454)
  </code></pre>
  
  <p>Using debugger tools, it throws the error here:</p>
  
  <pre><code>$('selectUser').select2();
  </code></pre>
  
  <p>This is how I call my script:</p>
  
  <pre><code>@section Scripts {
      &lt;script type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js")"&gt;&lt;/script&gt;
      @Scripts.Render("~/bundles/forms")
  
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" /&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $('selectUser').select2();
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Some SO posts suggest that this error is caused when you omit <code>type="text/javascript"</code>in your script tag or when you call the <code>select2</code> function before the reference to the CDN service but as it clearly shows on my code all seems fine regarding the aforementioned.</p>
  
  <p>According to this <a href="https://stackoverflow.com/questions/39627864/uncaught-typeerror-select2-is-not-a-function">Uncaught TypeError: $(...).select2 is not a function</a>, I am told to make sure if I have one version of JQuery loaded and all seems fine </p>
  
  <p>Here is some additional code from my <strong>View</strong> that will help in reproducing the problem:</p>
  
  <pre><code>&lt;script&gt;
      function submitForm() {
  
          var usersRoles = new Array;
          jQuery("#dualSelectRoles2 option").each(function () {
              usersRoles.push(jQuery(this).val());
          });
  
          var model = new Object();
          model.userId = jQuery('#selectUser').val();
          model.rolesList = usersRoles;
  
          console.log('model: ' + 'user: ' + model.userId + 'roles: ' + model.rolesList);
          console.log('JSON: ' + JSON.stringify(model));
  
          jQuery('#loading3').show();
  
          jQuery.ajax({
              type: "POST",
              url: "@Url.Action("AddUser")",
              dataType: "json",
              contentType: "application/json",
              data: JSON.stringify(model),
              success: function (data) { showSuccessMessage(data); },
              failure: function (errMsg) {
                  jQuery('#loading3').hide();
                  alert(errMsg);
              }
          });
          return false;
      }
  
      //Shows the success message
      function showSuccessMessage(data) {
          jQuery('#loading3').hide();
          alert(data);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>    public ActionResult AddUser()
      {
          if (TempData["StatusMessage"] != null)
          {
              ViewBag.StatusMessage = TempData["StatusMessage"].ToString();
          }
          else
          {
              ViewBag.StatusMessage = "";
          }
          AddUserToRolesViewModel vm = new AddUserToRolesViewModel();
          vm.Users = db.Users.ToList();
          return View(vm);
      }
  </code></pre>
  
  <p><strong>EDIT:</strong>
  Just to make sure that JQuery Core didn't load twice (once in Master and once in Content page) - I have included the markup for my master page.</p>
  
  <p><strong>_Layout.cshtml</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;link rel="shortcut icon" href="/favicon.ico" /&gt;
      @Styles.Render("~/Content/Template/css/style.css")
      &lt;!--[if IE 9]&gt;
          &lt;link rel="stylesheet" media="screen" href="@Url.Content("~/Content/Template/css/ie9.css")"/&gt;
      &lt;![endif]--&gt;
      &lt;!--[if IE 8]&gt;
          &lt;link rel="stylesheet" media="screen" href="@Url.Content("~/Content/Template/css/ie8.css")"/&gt;
      &lt;![endif]--&gt;
      &lt;!--[if IE 7]&gt;
          &lt;link rel="stylesheet" media="screen" href="@Url.Content("~/Content/Template/css/ie7.css")"/&gt;
      &lt;![endif]--&gt;
      @Scripts.Render("~/bundles/jquery")
      &lt;script type="text/javascript" src="@Url.Content("~/Content/Template/js/custom/general.js")"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/ui.spinner.js")"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/jquery.jgrowl.js")"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/jquery.alerts.js")"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="@Url.Content("~/Content/Template/js/custom/elements.js")"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/colorpicker.js")"&gt;&lt;/script&gt;
      &lt;!--[if lt IE 9]&gt;
                  &lt;script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;!--[if lte IE 8]&gt;&lt;script language="javascript" type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/excanvas.min.js")"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  
  
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body class="loggedin"&gt;
      @Html.Partial("_Header_top")
  
      &lt;!-- START OF MAIN CONTENT --&gt;
      &lt;div class="mainwrapper"&gt;
          &lt;div class="mainwrapperinner"&gt;
              @Html.Partial("_Menu_left")
              &lt;div class="maincontent"&gt;
                  &lt;div class="maincontentinner"&gt;
                      @RenderBody()
                  &lt;/div&gt;
                  &lt;div class="footer"&gt;
                      @Html.Partial("_Footer")
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!--mainwrapper--&gt;
      &lt;!-- END OF MAIN CONTENT --&gt;
  &lt;/body&gt;
  @RenderSection("scripts", required: false)
  @Scripts.Render("~/bundles/jqueryval")
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Update II:</strong>
  So I went ahead to my <code>App_Start</code> folder and navigated to my <code>BundleConfig.cs</code> and there I noticed something:</p>
  
  <pre><code>   public static void RegisterBundles(BundleCollection bundles)
     {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                          "~/Scripts/jquery-{version}.js",
                           "~/Content/Template/js/plugins/jquery-ui-
                  1.8.16.custom.min.js"
     }
  </code></pre>
  
  <p>According to this link: <a href="https://stackoverflow.com/questions/11944363/usage-of-the-asp-net-mvc4-jquery-javascript-bundles">Usage of the ASP.NET MVC4 jquery/javascript bundles</a> and I realized that file  <code>"~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js"</code> had alreasdy been added to this bundle and referenced in my content page (AddUser.cshtml) as:</p>
  
  <pre><code> &lt;script type="text/javascript" src="@Url.Content("~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js")"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>At this point, I strongly believed this was going to fix the problem and so I removed this reference in my content page because I believed that that could be loading JQuery core twice but still nothing. The error still persists. What else can I do to try solve this?</p>
  
  <p>Worthy mention that this error persists across all browsers (Chrome, IE &amp; Firefox)</p>