I have a function that I call multiple times in my projects:
function fillSelect(select) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Data.asmx/Status",
dataType: "json",
async: true,
success: function(data) {
$.each(data.d, function(i) {
select.append('<option value=' + data.d[i].value + '>' + data.d[i].name + '</option>');
});
},
error: function(result) {
alert("Error occured. Contact admin");
}
});
}
Then in my code I'm using this like so:
fillSelect($('select#status1'));
fillSelect($('select#status2'));
fillSelect($('select#status3'));
What I would like to do is to convert my function into plugin, so I would be able to call it as so:
$('select#status1, select#status2, select#status3').fillSelect();
Using http://starter.pixelgraphics.us/ I've generated empty schema:
(function($) {
$.ajaxSelect = function(el, select, options) {
// To avoid scope issues, use 'base' instead of 'this'
// to reference this class from internal events and functions.
var base = this;
// Access to jQuery and DOM versions of element
base.$el = $(el);
base.el = el;
// Add a reverse reference to the DOM object
base.$el.data("ajaxSelect", base);
base.init = function() {
base.select = select;
base.options = $.extend({}, $.ajaxSelect.defaultOptions, options);
// Put your initialization code here
};
// Sample Function, Uncomment to use
// base.functionName = function(paramaters){
//
// };
// Run initializer
base.init();
};
$.ajaxSelect.defaultOptions = {
clear: false //append to select or replace current items
};
$.fn.ajaxSelect = function(select, options) {
return this.each(function() {
(new $.ajaxSelect(this, select, options));
});
};
})(jQuery);
but I don't know how to fill it.
What I would like to do is to call sever ones and then fill as many select items as I put in parameters.
Is all that code really necessary for such a small plugin?
I know that there are probably some plugins that this functionality, but I would like to create my own plugin, just to learn a bit more :)
You don't need all that boiler plate you could do as below
$.fn.fill = function fillSelect(options) {
var self = this;
options = $.extend({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Data.asmx/Status",
dataType: "json",
async: true,
success: function(data) {
var list = "";
$.each(data.d, function(i) {
list += '<option value='
+ data.d[i].value + '>'
+ data.d[i].name
+ '</option>';
});
self.filter("select").each(function(){
$(this).append(list);
});
},
error: function(result) {
alert("Error occured. Contact admin");
}
},options);
$.ajax(options);
return this;
}
the first thing to notice that the function is added to the jQuery prototype/$.fn. Then the success handler have been changed so that all selected elements will be handled and lastly the selection is returned to make chaining possible, as this is usually expect when using jQuery.
The above code will append the same options to all selected "select" elements only. If you select something else the options will not be appended to those elements.
I've changed the signature to accept an options element. In the above version there's default vesrion equaling your ajax options. If other values are supplied, they will override the default ones if a default exist. If a default does not exist the values will be added to the options object
You just need to add your method to the $.fn object, as described here: http://docs.jquery.com/Plugins/Authoring
The this keyword will evaluate to the jQuery selector that was used to invoke your function's code, so instead of using the select parameter in your code, just use this
Related
I tried to create a drop-down menu using options binding in KnockOut JS (ko.plus to be precise). Things were running as expected until I mixed my solution up with this jsfiddle: http://jsfiddle.net/jnuc6y05/ in order to place a default option in the list. The problem lies in "HERE" (please see the code) where I get
error message
"TypeError: this.fieldStreetApallou is not a function"
As I said I had no problem, and I think mixing plain javascript with KO caused the situation. I tried to unwrap the editable with no luck since it resolves to undefined. Even ko.toJS does not do the trick (undefined again).
I don't have any serious experience with KO and furthermore with Javascript, and any help would be greatly appreciated.
PS: Reduced code provided
/////// HTML
<input data-bind="value: fieldStreetApallou, enable: fieldStreetApallou.isEditing" />
Rename
<div data-bind="visible: fieldStreetApallou.isEditing">
Confirm
Cancel
</div>
/////// Javascript
<script type="text/javascript">
ko.observableArray.fn.find = function(prop, data) {
var valueToMatch = data[prop];
return ko.utils.arrayFirst(this(), function(item) {
return item[prop] === valueToMatch;
});
};
var availableCompanies = [{
offset: 1,
name: "Company1"
}, {
offset: 2,
name: "Company2"
}
// ...more pairs here
];
//Default pairs for the drop-down menus
var selectedCompanyApallou = {
offset: 1,
name: "Company1"
};
var ViewModel = function(availableCompanies, selectedCompanyApallou) {
this.availableCompaniesApallou = ko.observableArray(availableCompanies);
this.selectedCompanyApallou = ko.observable(this.availableCompaniesApallou.find("offset", selectedCompanyApallou));
this.fieldStreetApallou = ko.editable("Initial value");
postStreetFieldToServerForApallou = function() {
$.ajax({
type: "PUT",
url: "http://www.san-soft.com/goandwin/addresses/" + 15,
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: "Address_id=15&Street=" + this.fieldStreetApallou() //<---- HERE!
}).done(function(data) {
alert("Record Updated Successfully " + data.status);
}).fail(function(err) {
alert("Error Occured, Please Reload the Page and Try Again " + err.status);
});
};
};
ko.applyBindings(new ViewModel(availableCompanies, selectedCompanyApallou));
</script>
I think you linked to the wrong JSFiddle.
Looks like this is not what you are expecting when postStreetFieldToServerForApallou is called by the button click. this in JavaScript is based on who called the function.
To work around it in this case, I like to set var self = this; at the top of the view model so self always points to the view model, then I replace all instances of this with self. This is really only needed on your HERE line, but it simplifies to use self throughout.
The fixed view model code:
var ViewModel = function(availableCompanies, selectedCompanyApallou) {
var self = this;
self.availableCompaniesApallou = ko.observableArray(availableCompanies);
self.selectedCompanyApallou = ko.observable(self.availableCompaniesApallou.find("offset", selectedCompanyApallou));
self.fieldStreetApallou = ko.editable("Initial value");
postStreetFieldToServerForApallou = function() {
$.ajax({
type: "PUT",
url: "http://www.san-soft.com/goandwin/addresses/" + 15,
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: "Address_id=15&Street=" + self.fieldStreetApallou() //<---- HERE!
}).done(function(data) {
alert("Record Updated Successfully " + data.status);
}).fail(function(err) {
alert("Error Occured, Please Reload the Page and Try Again " + err.status);
});
};
};
I have an edit box, defined like this:
<input class="change-handled form-control" type-id="#sub.CategoryTypeId" sub-category-id="#sub.SubCategoryId" data-id="#sub.CategoryBudgetId" style="text-align: right; width: 100%" type="number" value="#(sub.BudgetAmount.HasValue ? sub.BudgetAmount.ToString() : "")" />
In Javascript, I get the data-id value successfully like this:
var dataId = $(this).attr('data-id');
I now need to set it to a different value. I am trying:
$(this).setAttribute("data-id", 5);
But it seems the data-id never gets set to the value I pass. How can I set the data-id value of my editbox?
Full code of the function being used. (Note, no error checking yet):
$('body').on('change', 'input.change-handled', UpdateTotals);
function UpdateTotals() {
var dataId = $(this).attr('data-id');
var categoryId = $(this).attr('sub-category-id');
var value = $(this).val();
var totalExp = 0;
var totalInc = 0;
var $changeInputs = $('input.change-handled');
$changeInputs.each(function (idx, el) {
if ($(el).attr('type-id') == 2) {
totalInc += Number($(el).val());
}
if ($(el).attr('type-id') == 1) {
totalExp += Number($(el).val());
}
});
$(this).val(numberWithCommas(value));
$('#budgettedExpenseValue').text(numberWithCommas(totalExp));
$('#budgettedIncomeValue').text(numberWithCommas(totalInc));
$('#budgettedAvailableValue').text(numberWithCommas(totalInc - totalExp));
$.ajax({
url: '#Url.Action("SaveBudgetValue", "Budget")',
type: "POST",
contentType: "application/json",
data: JSON.stringify({ budgetCategoryId: dataId, catgoryId: categoryId, month: 4, year: 2015, value: value }),
cache: false,
async: true,
success: function (result) {
if (result.Success == 'true') {
$(this).attr("data-id", result.Id);
alert("Saved! " + result.Id.toString());
} else {
alert("Failed");
}
},
error: function () {
alert("Oh no...");
}
});
The code, after an edit box of the class type is edited, sums up all the income boxes (Decorated with a type-id = 1), and updates a field, and all the expense boxes (type-id = 2) and updates a separate field.
It then saves the data with a json call to my controller. If it's a new entry, data-id would have been NULL. The save method returns the primary key of the value saved. That value is displayed in my alert, and is supposed to be assigned to the edit boxe's data-id. But - isn't.
Re your update
The problem is that in the ajax success callback, this doesn't refer to the element anymore.
Two ways to fix that, and a third way that will be available in ES6:
Assign this, or more usefully $(this), to a variable that you use in the success handler (and elsewhere, no need to constantly call $() repeatedly on the same element):
function UpdateTotals() {
var input = $(this); // <========== Save it here
// ...
$.ajax({
// ...
success: function (result) {
// ...
if (result.Success == 'true') {
input.attr("data-id", result.Id); // <========= Use it here
alert("Saved! " + result.Id.toString());
} else {
alert("Failed");
}
}
});
// ...
}
Use Function#bind (an ES5 feature, but it can be shimmed for really old browsers) to make this within the callback the same as this outside it:
function UpdateTotals() {
// ...
$.ajax({
// ...
success: function (result) {
// ...
if (result.Success == 'true') {
$(this).attr("data-id", result.Id);
alert("Saved! " + result.Id.toString());
} else {
alert("Failed");
}
}.bind(this) // <=========== Note
});
// ...
}
In ES6, we'll have arrow functions, which unlike normal functions inherit the this of the context in which they're created. So in ES6, you could do this:
// **ES6 ONLY**
function UpdateTotals() {
// ...
$.ajax({
// ...
success: (result) => { // <==== Arrow function syntax
// ...
if (result.Success == 'true') {
$(this).attr("data-id", result.Id);
alert("Saved! " + result.Id.toString());
} else {
alert("Failed");
}
}
});
// ...
}
I'd lean toward #1, because you're doing a lot of repeated $(this) anyway, so just as well to do var input = $(this); once and then use input throughout.
More about this on my blog:
You must remember this
Original answer pre-update:
Since you're using jQuery, you set an attribute with attr, like this:
$(this).attr("data-id", 5);
Live Example:
var input = $("input");
snippet.log("Before: " + input.attr("data-id"));
input.attr("data-id", 5);
snippet.log("After (jQuery): " + input.attr("data-id"));
snippet.log("After (DOM): " + input[0].getAttribute("data-id"));
snippet.log("Element's HTML (after): " + input[0].outerHTML);
<input class="change-handled form-control" type-id="#sub.CategoryTypeId" sub-category-id="#sub.SubCategoryId" data-id="#sub.CategoryBudgetId" style="text-align: right; width: 100%" type="number" value="#(sub.BudgetAmount.HasValue ? sub.BudgetAmount.ToString() : "")" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
Or you can just use the DOM directly, by not wrapping the element in a jQuery wrapper:
this.setAttribute("data-id", 5);
Note that in either case, even though you're giving a number as the value, the value will end up being a string (as attributes only store strings).
You'll get people telling you to use data, but data is not just a way to access data-* attributes, even though many people make that mistake. It might be useful for your end goal, though, depending on what that is. The jQuery data function manages a cache of data that it associates with the element. The values data manages are initialized from data-* attributes, but data never writes to data-* attributes. If you're just trying to update attribute values, use attr. If you're trying to do something more complex and it's not important that the values get written back to the element as attributes, look at the docs for data and see whether it might be useful for you. (For one thing, the values data manages can be types other than strings.)
You are putting your code in the success function where this will be some sort of jQuery ajax object and not an HTML element.
You need to store this in a variable outside the ajax call and then use that variable.
e.g.
var that = this;
$.ajax({
Then:
setAttribute is a DOM method, not a jQuery method.
Either:
$(that).attr("data-id", 5);
or (assuming this is a Element object):
that.setAttribute("data-id", 5);
I have a problem synchronizing calls using Rest Api and JavaScript Object Model.
I'm currently working with Client Side Rendering to customize a view for a Document Library and add some functionalities in this custom UI.
I have a small collection of id's, and I'm looping through this collection and make some ajax calls with each of this items.
The results of this operation is to perform some tasks and to update my UI when all these operations are completed to refresh my UI and display some icons.
What I expect is to have 3 icons displayed only for my three first items.
The problem is that sometimes it displays all the icons, sometimes the two first... randomly.
I know that there is some problems with the synchronization of my executeQueryAsync calls, I've learned about jQuery Deferred object, I've tried to use them but without results.
Below you'll find screenshots of what I expect.
Expected :
https://onedrive.live.com/redir?resid=E2C3CC814469DA54!3070&authkey=!AEf_C0XGDwfuFRY&v=3&ithint=photo%2cpng
What would be the good way of using deferred ? Could anyone help ?
Thanks a lot
Elhmido
This is my main function for overriding the display :
(function () {
var accordionContext = {};
accordionContext.Templates = {};
// Be careful when add the header for the template, because it's will break the default list view render
accordionContext.Templates.Item = itemTemplate;
// Add OnPostRender event handler to add accordion click events and style
accordionContext.OnPreRender = [];
accordionContext.OnPreRender.push(function () {
$(function () {
IsCurrentUserMemberOfGroup("TEST Owners");
**$.when(IsUserApprover(arrayOfIDS).done(function () {
displayIcons();
}));**
});
});
accordionContext.OnPostRender = [];
accordionContext.OnPostRender.push(function () {
$(function () {
accordionOnPostRender();
fixColumns();
audit.relativeUrl = _spPageContextInfo.webAbsoluteUrl;
});
});
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(accordionContext);
})();
The function where I have the problem,
function IsUserApprover(auditTab) {
var dfd = $.Deferred();
audit.tabIcons = new Array();
for (var i = 0; i < auditTab.length; i++) {
var uri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/Lists/GetByTitle('Audit')/items?$select=UserID&$filter=ID eq " + auditTab[i] + "";
var call = $.ajax({
url: uri,
type: "GET",
dataType: "JSON",
async: false,
headers: {
"Accept": "application/json;odata=verbose"
}
});
call.done(function (data, status, jqxhr) {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
var userId = data.d.results[0].UserID;
var context = SP.ClientContext.get_current();
var auditor = context.get_web().ensureUser(userId);
context.load(auditor);
//I think the problem is here because I don't know how to handle this call
context.executeQueryAsync(userLoaded, userFailed);
function userLoaded() {
var auditorId = auditor.get_id();
checkAuditorValidator(auditorId);
dfd.resolve();
}
function userFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
});
});
call.fail(function (jqxhr, status, error) {
alert(JSON.stringify(error))
dfd.reject();
});
}
return dfd.promise();
}
function checkAuditorValidator(auditorId) {
var uri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/Lists/GetByTitle('SecurityMgmt')/items?" +
"$select=Auditeur/ID,Validateur/ID" +
"&$expand=Auditeur/ID,Validateur/ID" +
"&$filter=(Auditeur/ID eq '" + auditorId + "') and (Validateur/ID eq '" + _spPageContextInfo.userId + "')";
var call = $.ajax({
url: uri,
type: "GET",
dataType: "JSON",
async: false,
headers: {
"Accept": "application/json;odata=verbose"
}
});
call.done(function (data, status, jqxhr) {
if (data.d.results.length > 0) {
if (audit.UserAdmin) {
audit.tabIcons.push(true);
}
}
else {
audit.tabIcons.push(false);
}
});
call.fail(function (jqxhr, status, error) {
alert(JSON.stringify(error))
});
}
Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
You should avoid synchronous ajax calls...
I had the same problem and solved by adding an id during the custom rendering of the fields (items), on the postrender call my service asynchronously and according the result edit the OnPreRender page using the previously added ids.
I also did some hacks...e.g overriding the standard function RenderItemTemplate. Yes I know, it's not very clean but it works like a charm.
Well, that's not the best situation description... Anyway, I'm trying to update my ViewModel but it's not working. By default I'm getting data from controller function and by button click - from another function in same contoller, but ViewModel contain only data received after first ViewModel initialization.
<script>
function viewModel () {
var self = this;
self.currentPage = ko.observable();
self.pageSize = ko.observable(10);
self.currentPageIndex = ko.observable(0);
self.salesdata = ko.observableArray();
self.newdata = ko.observable();
self.currentPage = ko.computed(function () {
var pagesize = parseInt(self.pageSize(), 10),
startIndex = pagesize * self.currentPageIndex(),
endIndex = startIndex + pagesize;
return self.salesdata.slice(startIndex, endIndex);
});
self.nextPage = function () {
if (((self.currentPageIndex() + 1) * self.pageSize()) < self.salesdata().length) {
self.currentPageIndex(self.currentPageIndex() + 1);
}
else {
self.currentPageIndex(0);
}
}
self.previousPage = function () {
if (self.currentPageIndex() > 0) {
self.currentPageIndex(self.currentPageIndex() - 1);
}
else {
self.currentPageIndex((Math.ceil(self.salesdata().length / self.pageSize())) - 1);
}
}
//Here I'm trying to update ViewModel
self.request = function (uri) {
$.ajax({
url: uri,
contentType: 'application/json',
data: [],
type: 'GET',
cache: false,
success: function (data) {
ko.mapping.fromJS(data.$values, {}, self.salesdata);
}
});
}
}
$(document).ready(function () {
$.ajax({
url: "/api/sales",
type: "GET",
cache: false,
}).done(function (data) {
var vm = new viewModel();
vm.salesdata(data.$values);
ko.applyBindings(vm);
}).error(function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
});
//Here i'm calling for ViewModel update
$(".btn-default").click(function () {
days = $(this).val();
var uri = "/api/sales?days=" + days;
new viewModel().request(uri);
});
});
</script>
UPDATE.
I chaged block of code where I'm getting new data to be as follow:
self.request = function (uri) {
$.getJSON(uri, function (data) {
ko.mapping.fromJS(data.$values, {}, viewModel);
});
}
Unfortunately this is not working as well. Here is no any JS errors, controller return proper portion of updated data.
I'm new to all of this, but if I'm reading your code correctly, you are calling the request function on a new instance of the view model and not the one that was bound to the html document. You need to make the request call on the view model that you created after the initial get call completed.
Update:
Sorry, I should have been more specific about the code I was referring to. At the end of your code block you have the following code:
$(".btn-default").click(function () {
days = $(this).val();
var uri = "/api/sales?days=" + days;
new viewModel().request(uri);
});
In this code, it appears that each time the default button is clicked, a new view model is created and the request function is called on that view model.
In the document ready function where you are defining what happens after the sales data is loaded, you have the following code which is what creates the view model that the html document is actually bound to:
var vm = new viewModel();
vm.salesdata(data.$values);
ko.applyBindings(vm);
Nothing ever calls the request function on this view model. I wonder if what you really want is to somehow bind the request function in this view model to the default button.
I would try updating the viewmodel salesdata observable, by giving context: self and using the following success method:
self.request = function (uri) {
$.ajax({
url: uri,
contentType: 'application/json',
context: self,
data: [],
type: 'GET',
cache: false,
success: function (data) {
this.salesdata(data.$values);
}
});
}
EDIT:
I can see you attached a click event with jQuery.
You should use knockout clck binding instead:
<button data-bind="click: clickEvent" value="1">Click me!</button>
And in the viewmodel
clickEvent: function (data, event) {
days = event.target.value;
var uri = "/api/sales?days=" + days;
data.request(uri);
}
This way you can retrieve your viewmodel instead of creating a new one as you did with new viewModel().request(uri);
For more on click binding see http://knockoutjs.com/documentation/click-binding.html
Building slightly on the answer from #brader24 here:
In your update button's click event, you use this line of code:
new viewModel().request(uri);
What that is doing is creating a new viewModel (separate from the one that you already have instantiated and have applied bindings for) and filling it's observable array with data via your request function. It isn't affecting your original viewModel at all (the one that has it's bindings applied on the DOM!). So you won't see any errors, but you also won't see anything happening on the page because all you did was create a new viewModel in memory, fill it with data, and do nothing with it.
Try this code (everything in your viewModel function looks fine).
$(document).ready(function () {
var vm = new viewModel(); // declare (and instantiate) your view model variable outside the context of the $.ajax call so that we have access to it in the click binding
$.ajax({
url: "/api/sales",
type: "GET",
cache: false,
}).done(function (data) {
vm.salesdata(data.$values);
ko.applyBindings(vm);
}).error(function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
});
//Here i'm calling for ViewModel update
$(".btn-default").click(function () {
days = $(this).val();
var uri = "/api/sales?days=" + days;
vm.request(uri); // don't use a new instance of a view model - use the one you have already instantiated
});
});
Using a Knockout click binding instead of attaching a click event handler using jQuery is usually the recommended route, but it is not necessary - so your existing code (with the modifications above) should work fine. For more info on that, see Using unobtrusive event handlers in the Knockout docs
Well. Final solution based on #GoTo answer is:
Here is the way to call function in viewmodel via click databind.
<button type="button" class="btn btn-default" id="7" value="7" data-bind="click: getDays.bind($data, '7')">7</button>
Here is the function. As you can see I'm calling self.salesdata instead of viewModel. This solution is working fine but somehow now I have problem with data format that is binded this way -
<td data-bind="text: moment($data.whensold).format('DD.MM', 'ru')"></td>.
self.getDays = function (days) {
var uri = "/api/sales?days=" + days;
$.getJSON(uri, function (data) {
ko.mapping.fromJS(data.$values, {}, self.salesdata);
});
}
I'm trying to convert some of my code to reusable plugins.
Many times I'm filling selects with dynamic options that comes from Ajax request.
I've managed to create something like this:
$.fn.fillSelect = function fillSelect(options) {
var self = this;
options = $.extend({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Data.asmx/StatusList",
dataType: "json",
async: true,
success: function(data) {
var list = "";
$.each(data.d, function(i) {
list += '<option value='
+ data.d[i].ID + '>'
+ data.d[i].Nazwa
+ '</option>';
});
self.filter("select").each(function() {
$(this).empty();
$(this).append(list);
//use selectmenu
if ($.ui.selectmenu) $(this).selectmenu();
});
}//,
//error: function(result) {
// alert("Error loading data!");
//}
}, options);
$.ajax(options);
return self;
}
Idea behind this is to be able to fill multiple selects with the same data multiple times with one request.
I have default options for Ajax request, but I would like to add some more options to it.
For example:
clear - fill determinate if I want new options to replace existing ones or append.
Also I would like to add some callbacks to my function that I could pass as parameters.
If for example server request will fail I would like to specify a function that will be called after this error occurs - for example to show alert or disable my selects.
My question is how should I change my plugin or which pattern (boilerplate) I should use?
Every boilerplate I found is for creating plugins that will 'stay' inside selected item, so that it is possible to call method of that plugin later.
I need a simple plugin that will allow user to fill select and then it will end it's life :)
My main idea is to do only one request to server for all elements.
Here is jsfiddle demo: http://jsfiddle.net/JC7vX/2/
A basic plugin can be built as follows
(function ($){
$.fn.yourPlugin = function (options){
// this ensures that function chaining can continue
return this.each(function (){
// merge defaults and user defined options
var params = $.extend({},defaultOptions,options);
// your plugin code
});
}
/* these options will help define the standard functionality of the plugin,
* and also serves as a nice reference
*/
var defaultOptions = {
someProperty : true
}
})(jQuery)
There are other things that you can do to extend the functionality of your plugin and give public methods that retain the context, but that would be overkill for your example.
This is my version of answer http://jsfiddle.net/Misiu/ncWEw/
My plugin looks like this:
(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);
I understand that it is very simple, but it has all functionality that I needed:
-You can select multiple elements at one time
-It filters only selects from Your selected items
-It makes only one request to server
-First it builds option string and then append it instead of adding items in loop
-You can specify 2 callbacks: one for error and second for success
And it is my first plugin, so there is much places for improvements.
As always comments and hints are welcome!