0

I’m using Eric hynds mutiselect dropdown list in my MVC5 application. Im using this JQuery plug in over select2 because it supports check boxes, and some other functionality that I need. My solution has refernces to the following javascrip & css files.

jquery-2.1.3.js is added using bundle

bundles.Add(new ScriptBundle("~/bundles/jquery")
   .Include("~/Scripts/jquery-{version}.js"));

<link href="~/Content/jquery.multiselect.css" rel="stylesheet" />
<script src="~/Scripts/jquery.multiselect.min.js"></script>

How ever when the page loads I get error

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'widget'

Not sure what I'm missing. Below is my code. I know the drop down list is get loaded without any issue

<link href="~/Content/jquery.multiselect.css" rel="stylesheet" />
<script src="~/Scripts/jquery.multiselect.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Courses1").mutiselect(
        {
            selectedText: "# of # selected"
        });
    });
</script>

@using (Html.BeginForm())
{    <div>
         @Html.ListBox("Courses1")
    </div>
}

Controller

public class PersonController : Controller
{ 
    // GET: Person/Create
    public ActionResult Create()
    {
        ViewBag.Courses1 = new MultiSelectList(GetPersons(), "ID", "Name");            
        return View();
    }
}

Edit I created new empty application in VS. and included simple HTML page. I still get the same error.

Unhandled exception at line 20, column 22 in http://localhost:52267/Scripts/jquery.multiselect.min.js

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'widget'

below is complete html page. 

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <title></title>
    <link href="Content/jquery.multiselect.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.11.2.js"></script>
    <script src="Scripts/jquery.multiselect.min.js"></script>
</head>
 <body>
    <script type="text/javascript">
     $(function () {$("#mSel").multiple({selectedText: "# of #"});});
    </script>
    <div>
        <select multiple id="mSel">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>
    </div>
 </body>

LP13
  • 30,567
  • 53
  • 217
  • 400
  • You need to make sure that the `jquery` library is included multiple times. – IndieTech Solutions Apr 16 '15 at 17:24
  • Can you post your compiled HTML code? – IndieTech Solutions Apr 16 '15 at 17:24
  • Where have you included the bundle in the view? If you using the normal template it will be at the bottom of the page but it appears that the `multiselect.js` file is at the top of the page resulting in that error. Make sure `multiselect.js` is after jquery. –  Apr 16 '15 at 21:43
  • the jquery is added as a part on the bundle, which gets included in BundleConfig.cs in AppStart. and mutiselect.js is referenced on the page it self Is Mutiselect compatible with JQuery2 ? – LP13 Apr 17 '15 at 03:35
  • @user3862378, Again _Where have you included the bundle in the view_? Your view should have `@Scripts.Render("~/bundles/jquery")` and after that you need to include other scripts. –  Apr 17 '15 at 13:16
  • When you create a new MVC application in VS 2013, by default it adds jquery into layout page's header tag. Then I included mutiselect js & css at the top of the content page. So my question is does it support JQuery2, and do I need to configure Jquery UI in order to get multiselect working? – LP13 Apr 17 '15 at 15:49
  • Please see my edits above for complete html – LP13 Apr 17 '15 at 16:55
  • Finally!! found I need to include jQuery UI also – LP13 Apr 17 '15 at 20:55

0 Answers0