CODEWITHSUNDEEP
javascriptasp.net-mvctwitter-bootstrap-3multi-select
Jyotirmaya Prusty
Jyotirmaya Prusty

Reputation: 288

0x800a138f - JavaScript runtime error: Unable to get property 'fn' of undefined or null reference

I am trying to do this example http://jsfiddle.net/pmrotule/w7aakdbb/54/

There I am getting this exception

0x800a138f - JavaScript runtime error: Unable to get property 'fn' of undefined or null reference. and 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'multiselect' . It is throwing error at this point in bootstarp-multiselect.js

$.fn.multiselect = function(option, parameter, extraOptions) {
    return this.each(function() {
        var data = $(this).data('multiselect');
        var options = typeof option === 'object' && option;

        // Initialize the multiselect.
        if (!data) {
            data = new Multiselect(this, options);
            $(this).data('multiselect', data);
        }

        // Call multiselect method.
        if (typeof option === 'string') {
            data[option](parameter, extraOptions);

            if (option === 'destroy') {
                $(this).data('multiselect', false);
            }
        }
    });
};

My HTML code:

<script src="~/Scripts/bootstrap-multiselect.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/bootstrap-multiselect.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.js"></script>
<select id="ddlCars" multiple="multiple">
   <option value="Accord">Accord</option>
   <option value="Duster">Duster</option>
   <option value="Esteem">Esteem</option>
   <option value="Fiero">Fiero</option>
</select>
<script>
   $('#ddlCars').multiselect();
</script>

I am using ASP.NET MVC project in VS2013. There I am getting this exception I am very new to JS and BootStarp.

Upvotes: 0

Views: 14937

Answers (3)

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18883

Correct the order of scripts, jQuery js should be the first to load because bootstrap.js and bootstrap-multiselect.js depends on jquery js.

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

Upvotes: 5

huysentruitw
huysentruitw

Reputation: 28141

What the error says is that $ is not yet defined (during execution of bootstarp-multiselect.js), because you need to load jQuery first.

And since bootstrap-multiselect.js can depend on bootstrap, it doesn't harm to also load bootstrap.js before bootstrap-multiselect.js.

So:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap-multiselect.js"></script>
...

Upvotes: 1

Nishant Baranwal
Nishant Baranwal

Reputation: 1238

order of javascript file inclusion is wrong, jQuery file should be included first.

Upvotes: 0

Related Questions