Uncaught TypeError: Cannot call method 'removeClass' of undefined jQuery easydropdown

Question

I've seen this question has been asked a few times but nothing has been able to help.

On my cshtml file I have the following:

<div class="col-lg-8">
    @Html.Raw(SelectListHelper.CreateDropDownList("ddlStateCode", Application.DataCache.GetStatesAsLookup()))
</div>
<div class="col-lg-8">
    <select class="dropdown" id="ddlContactList"></select>
</div>

The Razor dropdown renders a select tag just the same as ddlContactList, aside from the ID.

ddlContactList gets populated via AJAX.

ddlStateCode throws the error when I click on it, and ddlContactList works just fine.

We are including the following scripts:

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/jsrender.min.js"></script>
<script type="text/javascript" src="~/Scripts/globalize.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.easing.min.js"></script>
<script type="text/javascript" src="~/Scripts/ej.widgets.all-latest.min.js"></script>
<script type="text/javascript" src="~/Scripts/App/image-changer.js"></script>
<script type="text/javascript" src="~/Scripts/App/nav.js"></script>
<script type="text/javascript" src="~/Scripts/App/popup.js"></script>
<script type="text/javascript" src="~/Scripts/App/scrollbar.js"></script>
<script type="text/javascript" src="~/Scripts/App/show_hide.js"></script>
<script type="text/javascript" src="~/Scripts/App/jqueryExtensions.js"></script>
<script type="text/javascript" src="~/Scripts/App/helper_functions.js"></script>
<script type="text/javascript" src="~/Scripts/App/ConfirmPopup.js"></script>
<script type="text/javascript" src="~/Scripts/App/global_error_handlers.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.fitvids.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.bxslider.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.easydropdown.js"></script>

The problem occurs in jQuery.easydropdown.js on the below method:

close: function(){
    var self = this;
    self.$container.removeClass('open'); // error happens here
    self.$scrollWrapper.css('height','0px');
    self.focusIndex = self.selected.index;
    self.query = '';
    self.down = false;
},

I don't think the jQuery UI file and the jQuery file versions need to match but I can't find matching versions to try. Any ideas?

Answer 1

EasyDropDown breaks on a selectlist that is empty on page load. Removing the encapsulating function in the javascript file and firing the instantiate method after the AJAX call fixes it.