Develop Reference

Select2: Tags not working properly with custom DataAdapter

I am using a custom dataAdapter and also trying to use the 'tags' attribute in Select2 jQuery plugin. But the exemple found in the documentation is not working at all, the 'tags' attribute is simply ignored (this is only happening when using a custom dataAdapter, otherwise it's working fine).
So this is not working:
$(".js-example-tags").select2({
tags: true
});
As a solution for this, I've found out we can use a decorator for Tags in the dataAdapter, and it really works! Problem is, it will always work. So if I have two 'select' tags in HTML, and I want one of them to have 'tags:true' and the other one to have 'tags:false', they'll both have tagging enabled because of this decorator. I've tried setting 'tags:false', but it's not working.
I'm thinking a solution would be in the dataAdapter, to create an if statement for the decorator, for it to be applied or not. But then the problem is that this specific code is executed only once, when the first 'select' is created.
So I'm thinking that if I use a dataAdapter for creating multiple selects, all of them will have the same decorators. And I don't think having multiple dataAdapters would be a solution for me.
So my question is, if I have multiple 'select' elements, how can I use different decorators applied for each of them? Also using the same dataAdapter?
I also have a JSFiddle for this:
Tags with dataAdapter
Thanks!

We have just run into this as well and I have been unable to find anything on how to "correctly" implement this. Feel there is a pattern or hook I'm missing that select2 should provide here.
I've come up with 2 ways of handling this.
1. Handle adding the decorators up front of calling select2
(function ($) {
var CustomDataAdapter = $.fn.select2.amd.require('select2/data/customDataAdapter');
var Utils = $.fn.select2.amd.require('select2/utils');
var Tags = $.fn.select2.amd.require('select2/data/tags');
var MinimumInputLength = $.fn.select2.amd.require('select2/data/minimumInputLength');
$.fn.mySelect2 = function(options) {
if (!options.dataAdapter && options.customDataAdapterOptions) {
options.dataAdapter = CustomDataAdapter;
if (options.minimumInputLength > 0) {
options.dataAdapter = Utils.Decorate(options.dataAdapter, MinimumInputLength);
}
if (options.tags) {
options.dataAdapter = Utils.Decorate(options.dataAdapter, Tags);
}
}
return this.select2(options);
};
}(jQuery));
Usage changes to: $('selector').mySelect2(options);
2. Override the Defaults.apply method that handles this for built in dataAdapters
(function() {
var CustomDataAdapter = $.fn.select2.amd.require('select2/data/customDataAdapter');
var Utils = $.fn.select2.amd.require('select2/utils');
var Tags = $.fn.select2.amd.require('select2/data/tags');
var MinimumInputLength = $.fn.select2.amd.require('select2/data/minimumInputLength');
var baseApply = $.fn.select2.defaults.apply;
$.fn.select2.defaults.apply = function (options) {
if (!options.dataAdapter && options.customDataAdapterOptions) {
options.dataAdapter = CustomDataAdapter;
if (options.minimumInputLength > 0) {
options.dataAdapter = Utils.Decorate(options.dataAdapter, MinimumInputLength);
}
if (options.tags) {
options.dataAdapter = Utils.Decorate(options.dataAdapter, Tags);
}
}
return baseApply.apply(this, arguments);
};
}());
Usage does not change: $('selector').select2(options);

How to splice ko.computeds

I got these two ko.computeds lists that I want to drag and drop among, but also moved with pushbuttons to remove an add to lists.
However I cannot make them work with both the dragndrop and the pushbutton functionality.
For the drag and drop I use Ryan Niemeyers excellent sortable library.
I guess I need to make my computeds writable, but this is where I get stuck and can´t seem to get rid of the error "splice is not a function" for the computed.
Hence the sorting by drag and drops fails.
This is one of the computers:
this.availableTexts = ko.computed({
read: function(){
return ko.utils.arrayFilter(self.texts(), function(text) {
return text.sceneID() === null;
})
},
write: function(value){
return value;
},
owner: this
});
Full fiddle: http://jsfiddle.net/AsleG/yLvrp7zz/

Niemeyer's knockout-sortable library works with splice internally to sort an array of items (source). I believe it simply won't work on a computed, even if it returns an array and has a correct write method...
I'd suggest to use the visible binding to hide individual items. You'll have to expose projectID or map your items to include a computed like so:
var projectID = 1;
self.allScenes = ko.observableArray(scenes.map(function(scene) {
return Object.assign({}, scene, {
isVisible: ko.computed(function() {
return scene.projectID === projectID;
});
});
Alternatively, in viewmodel:
self.projectId = 1;
in HTML:
<li data-bind="visible: projectID === $parent.projectId"> ... </li>

See: https://stackoverflow.com/a/16464935/4024558
You can use observableArray.filter instead of computed in your case.
Suddenly I can't fork your fiddle. So you can replace your js with this http://pastebin.com/jjNQ39nJ and it will work.

efficiently creating variables when a checkbox is checked and using these variables later in the code

below is the information I need help with.
$(document).ready(function(){
$('.checkboxes :checkbox').click(function(){
if($(this).is(':checked')){
console.log(this.id + this.checked)
i want to set a variable with the samename of the id of the checked box
so if showItems was checked i would have a variable
var showItems = true;
I want this so I could see if showItems is checked which would alow me to perform the proper functions
i think i could do something like this
if($this.id = "withones"){
var withones = true;//on
}
if($this.id = "withoutOnes"){
var withoutOnes = true;//on
}
etc.
i feel like the above is a rookie way to code. lets say i have alot of checkboxes and it also looks like im repeating myself. I tried putting the ids in an array and loop through them but I got the html element in the console when i clicked on the box. I would like for someone to tell me if there is a more efficient way to set up these variables. and if so show me please.
Also I'm new to programming so thanks for your help so far. but I was also thinking about another problem. if I set up these variables here and I want to set up another function somewhere else to perform mathematical operations perse. i want that function to be able to evaluate the value of the withones and withoutOnes variables so I would like to do something like this in the function
function add(){
if(withones){ //true|| false
return 2 + 2;
}
if (withoutOnes) {
return 'blah'
};
}
I have had problems in the past trying to test the values that are set outside the function. I think i tried setting it in the arguments. but it just didn't read. If you could also show me an example of using the variables some where else in the code like discussed above that will be helpful . I forgot to mention that the value of the variable will change when the user clicks on the box. either to true or false. I think my problem in the past is that when the box is checked and then uncheck I had a problem changing the variable especially when it is being used in a separate function
}
});
});

You can have an object with your vars and add vars to that object dinamically:
var oVars = {}
// adding a var
oVars[nameVar] = valueVar
// accessing the var
oVars[nameVar]

You can capture the id with the attr() or you can just change the value of the checkbox with val() method in jQuery like this: FIDDLE
$(document).ready(function () {
$('.checkboxes').change(function (event) {
if ($(this).is(':checked')) {
var captureId = $(this).attr('id');
$(this).val(true);
alert($(this).val());
}
else {$(this).val(false);
alert($(this).val());}
});
});
Note that you can evaluate later all the checkboxes with one button and collect the value false or true from them. Why would you go through all of the complications with changing values of variables.

The other two answers are correct, though it sounds like you're wanting to know generally how to manage a big list of checkboxes with differing methods depending on type. It could look like this:
function multiply(this_object){
if((this_object.is(':checked')) && (this_object.attr("with") == 1))
return "with withone and checked";
else
return "is not both";
}
$(document).ready(function(){
$('.checkboxes').click(function(){
var this_object = $(this);
alert(multiply(this_object));
});
});
There should be no need to store all of the values in a variable unless you are passing all of them to another page - eg., via AJAX. Just reference them straight from the source field. If you need other info stored alongside, make a new attribute on the field - like the "with" one that I made for this example. See this Fiddle: http://jsfiddle.net/6ug6gL97/

your question is quite broad; so I’ll try to do my best to give you some kind of answer. First of all I’d use variables of global scope when declaring variables: withones and withoutOnes. Secondly, you wanted to avoid repetition in your code. Well, for that purpose I’d use JavaScript Arrays. In an array, you can add your variables as objects. In an object you can have your ids and other data “packed” neatly in the array, which in turn helps your code to become efficient.
Below is an array with objects:
objectArray = [{
id: "withones",
checked: false,
method: function () {
return 2 + 2;
}
}, {
id: "withoutOnes",
checked: false,
method: function () {
return 'blah';
}
}];
The above array can be used in your $('.checkboxes :checkbox').click(function() handler and add() function to avoid repetition. The updated code is below where jQuery's each() method is used for looping Array elements.
The last a bit of your question was related to add() function. Well, this was the tricky bit of your question, and I tried to use a callback function hopefully in the right way to execute your functions from the array. In the add method I tried to follow this answer: https://stackoverflow.com/a/13343452/2048391
About the last bit I’m not 100% sure did I use a callback function in the right way; so I hope someone more familiar with these tricky JavaScript functions can correct me, if something needs to be changed –thanks.
objectArray = [{
id: "withones",
checked: false,
method: function () {
return 2 + 2;
}
}, {
id: "withoutOnes",
checked: false,
method: function () {
return 'blah';
}
}];
$(document).ready(function () {
$('.checkboxes :checkbox').click(function () {
var id = this.id;
var checkedValue = this.checked;
$.each(objectArray, function (index, object) {
if (object.id === id) {
object.checked = checkedValue;
}
});
add();
});
function add() {
// clear results
$("#addResults").text("");
$.each(objectArray, function (index, object) {
if (object.checked === true) {
var returnValue = createCallback(object.method)
$("#addResults").append(returnValue + "<br>");
console.log(returnValue);
}
});
}
function createCallback(method) {
return method();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="checkboxes">
<input type="checkbox" id="withones"></input>
<label>With Ones</label>
<br>
<input type="checkbox" id="withoutOnes"></input>
<label>Without Ones</label>
</div>
<div id="addResults">
</div>

jQuery style getter and setters

I have a constructor Dropdown which will take an array as a parameter. This parameter will be used by a method attached to the prototype. The parameter is an array which should be turned into a parameter of jQuery option objects, which should be the drop down menu options for the select element. Currently I have:
function Dropdown(data) {
this.sel = $('<select>');
}
Dropdown.prototype.options = function (options) {
var self = this; //using $(this) doesn't work either
if ( !options ) {
//if null return the current values of
return self.sel.html();
} else {
//make a jQuery option object out of every item in the array
//set the sel property's html to that
self.sel.html = ($.map(options, function (val) {
return $('<option>').text(val).val(val);
}));
}
}
var testArray = ['one', 'two', 'three'];
var dropdown = new Dropdown(testArray);
dropdown.sel.appendTo($('body'));
console.log(dropdown.options()); //nothing outputted to the console
by passing testArray into the Dropdown constructor this should set the html property of sel, but it doesn't and trying to use the jQuery style getter prints nothing to the console. dropdown is appended to the page, just with no options.

To start with, you're not calling the options function in the prototype. After calling it, some other bugs showed up.
self.sel.html = ($.map(options, function (val) {
return $('<option>').text(val).val(val);
}));
This turns self.sel.html into an array filled with jQuery option elements, which you're doing nothing with.
I changed it a little bit to get it working. See if it works for you. I believe it's easy to understand.
function Dropdown(data) {
this.sel = $('<select>');
this.options(data);
}
Dropdown.prototype.options = function (options) {
var sel = this.sel;
options && options.forEach(function ( val ) {
$('<option>').val(val).text(val).appendTo(sel);
});
}
Fiddle: http://jsfiddle.net/b7pvS/

Right now your constructor does nothing other than to create a select element in jQuery. You pass in the data parameter and do nothing with it. You simply need to add this.options(data); in the constructor and you should be good to go.
function Dropdown(data) {
this.sel = $('<select>');
this.options(data);
}

Creating methods on the fly

Hi I'm trying to author a jQuery plugin and I need to have methods accessible to elements after they are initialized as that kind of object, e.g.:
$('.list').list({some options}); //This initializes .list as a list
//now I want it to have certain methods like:
$('.list').find('List item'); //does some logic that I need
I tried with
$.fn.list = function (options) {
return this.each(function() {
// some code here
this.find = function(test) {
//function logic
}
}
}
and several other different attempts, I just can't figure out how to do it.
EDIT:
I'll try to explain this better.
I'm trying to turn a table into a list, basically like a list on a computer with column headers and sortable items and everything inbetween. You initiate the table with a command like
$(this).list({
data: [{id: 1, name:'My First List Item', date:'2010/06/26'}, {id:2, name:'Second', date:'2010/05/20'}]
});
.list will make the <tbody> sortable and do a few other initial tasks, then add the following methods to the element:
.findItem(condition) will allow you to find a certain item by a condition (like findItem('name == "Second"')
.list(condition) will list all items that match a given condition
.sort(key) will sort all items by a given key
etc.
What's the best way to go about doing this?

If you want these methods to be available on any jQuery object, you will have to add each one of them to jQuery's prototype. The reason is every time you call $(".list") a fresh new object is created, and any methods you attached to a previous such object will get lost.
Assign each method to jQuery's prototype as:
jQuery.fn.extend({
list: function() { .. },
findItem: function() { .. },
sort: function() { .. }
});
The list method here is special as it can be invoked on two occasions. First, when initializing the list, and second when finding particular items by a condition. You would have to differentiate between these two cases somehow - either by argument type, or some other parameter.
You can also use the data API to throw an exception if these methods are called for an object that has not been initialized with the list plugin. When ('xyz').list({ .. }) is first called, store some state variable in the data cache for that object. When any of the other methods - "list", "findItem", or "sort" are later invoked, check if the object contains that state variable in its data cache.
A better approach would be to namespace your plugin so that list() will return the extended object. The three extended methods can be called on its return value. The interface would be like:
$('selector').list({ ... });
$('selector').list().findOne(..);
$('selector').list().findAll(..);
$('selector').list().sort();
Or save a reference to the returned object the first time, and call methods on it directly.
var myList = $('selector').list({ ... });
myList.findOne(..);
myList.findAll(..);
myList.sort();

I found this solution here:
http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html
This seems to do exactly what I need.
(function($) {
var TaskList = function(element, options)
{
var $elem = $(element);
var options = $.extend({
tasks: [],
folders: []
}, options || {});
this.changed = false;
this.selected = {};
$elem.sortable({
revert: true,
opacity: 0.5
});
this.findTask = function(test, look) {
var results = [];
for (var i = 0,l = options.tasks.length; i < l; i++)
{
var t = options['tasks'][i];
if (eval(test))
{
results.push(options.tasks[i]);
}
}
return results;
}
var debug = function(msg) {
if (window.console) {
console.log(msg);
}
}
}
$.fn.taskList = function(options)
{
return this.each(function() {
var element = $(this);
if (element.data('taskList')) { return; }
var taskList = new TaskList(this, options);
element.data('taskList', taskList);
});
}
})(jQuery);
Then I have
$('.task-list-table').taskList({
tasks: eval('(<?php echo mysql_real_escape_string(json_encode($tasks)); ?>)'),
folders: eval('(<?php echo mysql_real_escape_string(json_encode($folders)); ?>)')
});
var taskList = $('.task-list-table').data('taskList');
and I can use taskList.findTask(condition);
And since the constructor has $elem I can also edit the jQuery instance for methods like list(condition) etc. This works perfectly.

this.each isn't needed. This should do:
$.fn.list = function (options) {
this.find = function(test) {
//function logic
};
return this;
};
Note that you'd be overwriting jQuery's native find method, and doing so isn't recommended.
Also, for what it's worth, I don't think this is a good idea. jQuery instances are assumed to only have methods inherited from jQuery's prototype object, and as such I feel what you want to do would not be consistent with the generally accepted jQuery-plugin behaviour -- i.e. return the this object (the jQuery instance) unchanged.