I'm using the selectbox jQuery plugin from http://www.bulgaria-web-developers.com/projects/javascript/selectbox/ .
I also have a linked in js file, which contains the following code:
function loadTeams() {
var responseArray, optionsOutput = '';
$.ajax({
type: "GET",
url: "/ajax/team",
dataType: "json",
success: function (response) {
responseArray = response.array;
for (var i = 0; i < responseArray.length; i++) {
optionsOutput += '<option value="' + responseArray[i] + '">' + responseArray[i] + '</option>';
}
$("#teamSelect").find('option')
.remove()
.end()
.append(optionsOutput);
$("#teamSelect").selectbox({ speed: 100 });
},
error: function (xhr, ajaxOptions, thrownError) {
$("#teamSelect").find('option')
.remove()
.end()
.append('<option value=""></option>');
}
});
}
This works fine in all browsers except IE. In there, I get:
SCRIPT438: Object doesn't support property or method 'selectbox' globals.js, line 38 character 4
That equates to the following line:
$("#teamSelect").selectbox({ speed: 100 });
I've tried even such dramatic and ugly approaches as copying the entire jQuery plugin js file into globals.js
, and I still get the error.
What gives?
Edit - Update: I've tried assigning the #teamSelect
to a var
and calling var.selectbox
, but I'm getting the same error.
Aha, the problem was a conflict between jQuery's selectbox plugin (probably jQuery itself) and Foundation 4. When I integrated Foundation 4, I followed the example on their site which had me copy and paste in this cryptic bit:
This was loading zepto or jquery, and THEN I was loading jquery from the Google CDN. Removing this line and placing my Google CDN of jQuery first resolved the conflict.