I've created my first jQuery plugin, so please try to understand :)
My plugin code looks like so:
(function($) {
$.fn.ajaxSelect = function(options) {
var $this = this;
//options
var settings = $.extend({}, defaults, options);
//disable select
if ($.ui.selectmenu && settings.selectmenu && settings.disableOnLoad) {
$this.selectmenu('disable');
}
//ajax call
$.ajax({
type: settings.type,
contentType: settings.contentType,
url: settings.url,
dataType: settings.dataType,
data: settings.data
}).done(function(data) {
var n = data.d || data;
var list = "";
$.each(n, function(i) {
list += '<option value=' + n[i].Id + '>' + n[i].Nazwa + '</option>';
});
$this.filter("select").each(function() {
$(this).empty();
$(this).append(list);
if ($.ui.selectmenu && settings.selectmenu) {
$this.selectmenu();
}
});
settings.success.call(this);
}).fail(function() {
settings.error.call(this);
});
return this;
};
var defaults = {
type: "POST",
contentType: "application/json; charset=utf-8",
url: '/echo/json/',
dataType: 'json',
data: null,
async: true,
selectmenu: true,
disableOnLoad: true,
success: function() {},
error: function() {}
};
})(jQuery);
Demo of usage is available at http://jsfiddle.net/Misiu/ncWEw/
What I was trying to accomplish:
- Select multiple elements at one time
- Filter only selects from selected items (in case selector would select other elemnts)
- Makes only ONE request to server
- First build option string and then append it instead of adding items in loop
- Specify 2 callbacks: one for error and second for success
I think that it would be better to use more of deferred objects, but I don't have idea how. Any improvements and hints are welcome :)