Question:
I'm using the following library: jQuery-Dual-Listbox .
I made a simple code modification creating a function that allowed working with the selected elements.
Function name: afterChanges
Here is the code of the modified library:
/*
* Developed by Justin Mead
* ©2011 MeadMiracle
* www.meadmiracle.com / meadmiracle@gmail.com
* Version 1.3
* Testing: IE8/Windows XP
* Firefox/Windows XP
* Chrome/Windows XP
* Licensed under the Creative Commons GPL http://creativecommons.org/licenses/GPL/2.0/
*/
(function ($) {
var settings = new Array();
var group1 = new Array();
var group2 = new Array();
var onSort = new Array();
$.configureBoxes = function (options) {
var index = settings.push({
box1View: 'box1View',
box1Storage: 'box1Storage',
box1Filter: 'box1Filter',
box1Clear: 'box1Clear',
box1Counter: 'box1Counter',
box2View: 'box2View',
box2Storage: 'box2Storage',
box2Filter: 'box2Filter',
box2Clear: 'box2Clear',
box2Counter: 'box2Counter',
to1: 'to1',
allTo1: 'allTo1',
to2: 'to2',
allTo2: 'allTo2',
transferMode: 'move',
sortBy: 'text',
useFilters: true,
useCounters: true,
useSorting: true,
selectOnSubmit: true,
afterChanges: function () { }
})
index--;
$.extend(settings[index], options);
group1.push({
view: settings[index].box1View,
storage: settings[index].box1Storage,
filter: settings[index].box1Filter,
clear: settings[index].box1Clear,
counter: settings[index].box1Counter,
index: index
});
group2.push({
view: settings[index].box2View,
storage: settings[index].box2Storage,
filter: settings[index].box2Filter,
clear: settings[index].box2Clear,
counter: settings[index].box2Counter,
index: index
});
if (settings[index].sortBy == 'text') {
onSort.push(function (a, b) {
var aVal = a.text.toLowerCase();
var bVal = b.text.toLowerCase();
if (aVal < bVal) { return -1; }
if (aVal > bVal) { return 1; } return 0;
});
} else {
onSort.push(function (a, b) {
var aVal = a.value.toLowerCase();
var bVal = b.value.toLowerCase();
if (aVal < bVal) { return -1; }
if (aVal > bVal) { return 1; } return 0;
});
} if (settings[index].useFilters) {
$('#' + group1[index].filter).keyup(function () {
Filter(group1[index]);
});
$('#' + group2[index].filter).keyup(function () {
Filter(group2[index]);
});
$('#' + group1[index].clear).click(function () {
ClearFilter(group1[index]);
}); $('#' + group2[index].clear).click(function () {
ClearFilter(group2[index]);
});
} if (IsMoveMode(settings[index])) {
$('#' + group2[index].view).dblclick(function () {
MoveSelected(group2[index], group1[index]);
settings[index].afterChanges();
});
$('#' + settings[index].to1).click(function () {
MoveSelected(group2[index], group1[index]);
settings[index].afterChanges();
});
$('#' + settings[index].allTo1).click(function () {
MoveAll(group2[index], group1[index]);
settings[index].afterChanges();
});
} else {
$('#' + group2[index].view).dblclick(function () {
RemoveSelected(group2[index], group1[index]);
}); $('#' + settings[index].to1).click(function () {
RemoveSelected(group2[index], group1[index]);
}); $('#' + settings[index].allTo1).click(function () {
RemoveAll(group2[index], group1[index]);
});
}
$('#' + group1[index].view).dblclick(function () {
MoveSelected(group1[index], group2[index]);
settings[index].afterChanges();
});
$('#' + settings[index].to2).click(function () {
MoveSelected(group1[index], group2[index]);
settings[index].afterChanges();
});
$('#' + settings[index].allTo2).click(function () {
MoveAll(group1[index], group2[index]);
settings[index].afterChanges();
}); if (settings[index].useCounters) {
UpdateLabel(group1[index]);
UpdateLabel(group2[index]);
} if (settings[index].useSorting) {
SortOptions(group1[index]);
SortOptions(group2[index]);
}
$('#' + group1[index].storage + ',#' + group2[index].storage).css('display', 'none');
if (settings[index].selectOnSubmit) {
$('#' + settings[index].box2View).closest('form').submit(function () {
$('#' + settings[index].box2View).children('option').attr('selected', 'selected');
});
}
};
function UpdateLabel(group) {
var showingCount = $("#" + group.view + " option").size();
var hiddenCount = $("#" + group.storage + " option").size();
$("#" + group.counter).text('Showing ' + showingCount + ' of ' + (showingCount + hiddenCount));
}
function Filter(group) {
var index = group.index;
var filterLower;
if (settings[index].useFilters) {
filterLower = $('#' + group.filter).val().toString().toLowerCase();
} else {
filterLower = '';
} $('#' + group.view + ' option').filter(function (i) {
var toMatch = $(this).text().toString().toLowerCase();
return toMatch.indexOf(filterLower) == -1;
}).appendTo('#' + group.storage);
$('#' + group.storage + ' option').filter(function (i) {
var toMatch = $(this).text().toString().toLowerCase();
return toMatch.indexOf(filterLower) != -1;
}).appendTo('#' + group.view);
try {
$('#' + group.view + ' option').removeAttr('selected');
} catch (ex) { }
if (settings[index].useSorting) {
SortOptions(group);
} if (settings[index].useCounters) {
UpdateLabel(group);
}
}
function SortOptions(group) {
var $toSortOptions = $('#' + group.view + ' option');
$toSortOptions.sort(onSort[group.index]);
$('#' + group.view).empty().append($toSortOptions);
}
function MoveSelected(fromGroup, toGroup) {
if (IsMoveMode(settings[fromGroup.index])) {
$('#' + fromGroup.view + ' option:selected').appendTo('#' + toGroup.view);
} else {
$('#' + fromGroup.view + ' option:selected:not([class*=copiedOption])').clone().appendTo('#' + toGroup.view).end().end().addClass('copiedOption');
} try {
$('#' + fromGroup.view + ' option,#' + toGroup.view + ' option').removeAttr('selected');
} catch (ex) { }
Filter(toGroup);
if (settings[fromGroup.index].useCounters) {
UpdateLabel(fromGroup);
}
}
function MoveAll(fromGroup, toGroup) {
if (IsMoveMode(settings[fromGroup.index])) {
$('#' + fromGroup.view + ' option').appendTo('#' + toGroup.view);
} else {
$('#' + fromGroup.view + ' option:not([class*=copiedOption])').clone().appendTo('#' + toGroup.view).end().end().addClass('copiedOption');
}
try {
$('#' + fromGroup.view + ' option,#' + toGroup.view + ' option').removeAttr('selected');
} catch (ex) { }
Filter(toGroup);
if (settings[fromGroup.index].useCounters) {
UpdateLabel(fromGroup);
}
}
function RemoveSelected(removeGroup, otherGroup) {
$('#' + otherGroup.view + ' option.copiedOption').add('#' + otherGroup.storage + ' option.copiedOption').remove();
try {
$('#' + removeGroup.view + ' option:selected').appendTo('#' + otherGroup.view).removeAttr('selected');
} catch (ex) { }
$('#' + removeGroup.view + ' option').add('#' + removeGroup.storage + ' option').clone().addClass('copiedOption').appendTo('#' + otherGroup.view);
Filter(otherGroup);
if (settings[removeGroup.index].useCounters) {
UpdateLabel(removeGroup);
}
}
function RemoveAll(removeGroup, otherGroup) {
$('#' + otherGroup.view + ' option.copiedOption').add('#' + otherGroup.storage + ' option.copiedOption').remove();
try {
$('#' + removeGroup.storage + ' option').clone().addClass('copiedOption').add('#' + removeGroup.view + ' option').appendTo('#' + otherGroup.view).removeAttr('selected');
} catch (ex) { }
Filter(otherGroup);
if (settings[removeGroup.index].useCounters) {
UpdateLabel(removeGroup);
}
}
function ClearFilter(group) {
$('#' + group.filter).val('');
$('#' + group.storage + ' option').appendTo('#' + group.view);
try {
$('#' + group.view + ' option').removeAttr('selected');
} catch (ex) { }
if (settings[group.index].useSorting) {
SortOptions(group);
} if (settings[group.index].useCounters) {
UpdateLabel(group);
}
}
function IsMoveMode(currSettings) {
return currSettings.transferMode == 'move';
}
})(jQuery);In my View, I overlay this function performing validations, where there is a rule:
It is only allowed to select one item per type.
Otherwise the item reverts to the first selection box.
$.configureBoxes({
useCounters: false,
useSorting: false,
afterChanges: function () {
var itens = [];
var tipos= [];
$("#box2View").find("option").each(function () {
var item = parseInt($(this).val());
var tipo= $(this).data("tipo");
if ($.inArray(tipo, tipos) >= 0) {
alert("Tipos Iguais!");
Reverse();
} else {
itens.push(item);
tipos.push(tipo);
}
});
}
});
My problem is with the Reverse function that I'd like to be in the plugin, but since I'm overriding the afterChanges function on the View, so I can't access the Reverse function, so I don't know where to put it.
Reverse Function:
function Reverse() {
var removeGroup = group1[index];
var otherGroup = group2[index];
$('#' + otherGroup.view + ' option.copiedOption').add('#' + otherGroup.storage + ' option.copiedOption').remove();
try {
$('#' + removeGroup.view + ' option:selected').appendTo('#' + otherGroup.view).removeAttr('selected');
} catch (ex) { }
$('#' + removeGroup.view + ' option').add('#' + removeGroup.storage + ' option').clone().addClass('copiedOption').appendTo('#' + otherGroup.view);
Filter(otherGroup);
if (settings[removeGroup.index].useCounters) {
UpdateLabel(removeGroup);
}
}
How do I make the Reverse function accessible in the View?
Where should I put it in the plugin?
Answer:
To solve my problem it was necessary to modify the library.
It was as follows:
/*
* Developed by Justin Mead
* ©2011 MeadMiracle
* www.meadmiracle.com / meadmiracle@gmail.com
* Version 1.3
* Testing: IE8/Windows XP
* Firefox/Windows XP
* Chrome/Windows XP
* Licensed under the Creative Commons GPL http://creativecommons.org/licenses/GPL/2.0/
*/
(function ($) {
var settings = new Array();
var group1 = new Array();
var group2 = new Array();
var onSort = new Array();
$.configureBoxes = function (options) {
var index = settings.push({
box1View: 'box1View',
box1Storage: 'box1Storage',
box1Filter: 'box1Filter',
box1Clear: 'box1Clear',
box1Counter: 'box1Counter',
box2View: 'box2View',
box2Storage: 'box2Storage',
box2Filter: 'box2Filter',
box2Clear: 'box2Clear',
box2Counter: 'box2Counter',
to1: 'to1',
allTo1: 'allTo1',
to2: 'to2',
allTo2: 'allTo2',
transferMode: 'move',
sortBy: 'text',
useFilters: true,
useCounters: true,
useSorting: true,
selectOnSubmit: true,
enableValidation: false,
afterChanges: function (toGroup, toGroupIsMoveMode) { },
validation: function (to1destined, allGroupdestined, fromGroup, toGroup, fromGroupIsMoveMode, toGroupIsMoveMode) { return true }
})
index--;
$.extend(settings[index], options);
group1.push({
view: settings[index].box1View,
storage: settings[index].box1Storage,
filter: settings[index].box1Filter,
clear: settings[index].box1Clear,
counter: settings[index].box1Counter,
index: index
});
group2.push({
view: settings[index].box2View,
storage: settings[index].box2Storage,
filter: settings[index].box2Filter,
clear: settings[index].box2Clear,
counter: settings[index].box2Counter,
index: index
});
if (settings[index].sortBy == 'text') {
onSort.push(function (a, b) {
var aVal = a.text.toLowerCase();
var bVal = b.text.toLowerCase();
if (aVal < bVal) { return -1; }
if (aVal > bVal) { return 1; } return 0;
});
} else {
onSort.push(function (a, b) {
var aVal = a.value.toLowerCase();
var bVal = b.value.toLowerCase();
if (aVal < bVal) { return -1; }
if (aVal > bVal) { return 1; } return 0;
});
} if (settings[index].useFilters) {
$('#' + group1[index].filter).keyup(function () {
Filter(group1[index]);
});
$('#' + group2[index].filter).keyup(function () {
Filter(group2[index]);
});
$('#' + group1[index].clear).click(function () {
ClearFilter(group1[index]);
}); $('#' + group2[index].clear).click(function () {
ClearFilter(group2[index]);
});
} if (IsMoveMode(settings[index])) {
$('#' + group2[index].view).dblclick(function () {
if ((!settings[index].enableValidation) || (settings[index].enableValidation && settings[index].validation(to1destined = true, allGroupdestined = false, group1[index], group2[index], IsMoveMode(settings[group1[index].index]), IsMoveMode(settings[group2[index].index])))) {
MoveSelected(group2[index], group1[index]);
settings[index].afterChanges(group2[index], IsMoveMode(settings[group2[index].index]));
}
});
$('#' + settings[index].to1).click(function () {
if ((!settings[index].enableValidation) || (settings[index].enableValidation && settings[index].validation(to1destined = true, allGroupdestined = false, group1[index], group2[index], IsMoveMode(settings[group1[index].index]), IsMoveMode(settings[group2[index].index])))) {
MoveSelected(group2[index], group1[index]);
settings[index].afterChanges(group2[index], IsMoveMode(settings[group2[index].index]));
}
});
$('#' + settings[index].allTo1).click(function () {
if ((!settings[index].enableValidation) || (settings[index].enableValidation && settings[index].validation(to1destined = true, allGroupdestined = true, group1[index], group2[index], IsMoveMode(settings[group1[index].index]), IsMoveMode(settings[group2[index].index])))) {
MoveAll(group2[index], group1[index]);
settings[index].afterChanges(group2[index], IsMoveMode(settings[group2[index].index]));
}
});
} else {
$('#' + group2[index].view).dblclick(function () {
RemoveSelected(group2[index], group1[index]);
}); $('#' + settings[index].to1).click(function () {
RemoveSelected(group2[index], group1[index]);
}); $('#' + settings[index].allTo1).click(function () {
RemoveAll(group2[index], group1[index]);
});
}
$('#' + group1[index].view).dblclick(function () {
if ((!settings[index].enableValidation) || (settings[index].enableValidation && settings[index].validation(to1destined = false, allGroupdestined = false, group1[index], group2[index], IsMoveMode(settings[group1[index].index]), IsMoveMode(settings[group2[index].index])))) {
MoveSelected(group1[index], group2[index]);
settings[index].afterChanges(group2[index], IsMoveMode(settings[group2[index].index]));
}
});
$('#' + settings[index].to2).click(function () {
if ((!settings[index].enableValidation) || (settings[index].enableValidation && settings[index].validation(to1destined = false, allGroupdestined = false, group1[index], group2[index], IsMoveMode(settings[group1[index].index]), IsMoveMode(settings[group2[index].index])))) {
MoveSelected(group1[index], group2[index]);
settings[index].afterChanges(group2[index], IsMoveMode(settings[group2[index].index]));
}
});
$('#' + settings[index].allTo2).click(function () {
if ((!settings[index].enableValidation) || (settings[index].enableValidation && settings[index].validation(to1destined = false, allGroupdestined = true, group1[index], group2[index], IsMoveMode(settings[group1[index].index]), IsMoveMode(settings[group2[index].index])))) {
MoveAll(group1[index], group2[index]);
settings[index].afterChanges(group2[index], IsMoveMode(settings[group2[index].index]));
}
}); if (settings[index].useCounters) {
UpdateLabel(group1[index]);
UpdateLabel(group2[index]);
} if (settings[index].useSorting) {
SortOptions(group1[index]);
SortOptions(group2[index]);
}
$('#' + group1[index].storage + ',#' + group2[index].storage).css('display', 'none');
if (settings[index].selectOnSubmit) {
$('#' + settings[index].box2View).closest('form').submit(function () {
$('#' + settings[index].box2View).children('option').attr('selected', 'selected');
});
}
};
function UpdateLabel(group) {
var showingCount = $("#" + group.view + " option").size();
var hiddenCount = $("#" + group.storage + " option").size();
$("#" + group.counter).text('Showing ' + showingCount + ' of ' + (showingCount + hiddenCount));
}
function Filter(group) {
var index = group.index;
var filterLower;
if (settings[index].useFilters) {
filterLower = $('#' + group.filter).val().toString().toLowerCase();
} else {
filterLower = '';
} $('#' + group.view + ' option').filter(function (i) {
var toMatch = $(this).text().toString().toLowerCase();
return toMatch.indexOf(filterLower) == -1;
}).appendTo('#' + group.storage);
$('#' + group.storage + ' option').filter(function (i) {
var toMatch = $(this).text().toString().toLowerCase();
return toMatch.indexOf(filterLower) != -1;
}).appendTo('#' + group.view);
try {
$('#' + group.view + ' option').removeAttr('selected');
} catch (ex) { }
if (settings[index].useSorting) {
SortOptions(group);
} if (settings[index].useCounters) {
UpdateLabel(group);
}
}
function SortOptions(group) {
var $toSortOptions = $('#' + group.view + ' option');
$toSortOptions.sort(onSort[group.index]);
$('#' + group.view).empty().append($toSortOptions);
}
function MoveSelected(fromGroup, toGroup) {
if (IsMoveMode(settings[fromGroup.index])) {
$('#' + fromGroup.view + ' option:selected').appendTo('#' + toGroup.view);
} else {
$('#' + fromGroup.view + ' option:selected:not([class*=copiedOption])').clone().appendTo('#' + toGroup.view).end().end().addClass('copiedOption');
} try {
$('#' + fromGroup.view + ' option,#' + toGroup.view + ' option').removeAttr('selected');
} catch (ex) { }
Filter(toGroup);
if (settings[fromGroup.index].useCounters) {
UpdateLabel(fromGroup);
}
}
function MoveAll(fromGroup, toGroup) {
if (IsMoveMode(settings[fromGroup.index])) {
$('#' + fromGroup.view + ' option').appendTo('#' + toGroup.view);
} else {
$('#' + fromGroup.view + ' option:not([class*=copiedOption])').clone().appendTo('#' + toGroup.view).end().end().addClass('copiedOption');
}
try {
$('#' + fromGroup.view + ' option,#' + toGroup.view + ' option').removeAttr('selected');
} catch (ex) { }
Filter(toGroup);
if (settings[fromGroup.index].useCounters) {
UpdateLabel(fromGroup);
}
}
function RemoveSelected(removeGroup, otherGroup) {
$('#' + otherGroup.view + ' option.copiedOption').add('#' + otherGroup.storage + ' option.copiedOption').remove();
try {
$('#' + removeGroup.view + ' option:selected').appendTo('#' + otherGroup.view).removeAttr('selected');
} catch (ex) { }
$('#' + removeGroup.view + ' option').add('#' + removeGroup.storage + ' option').clone().addClass('copiedOption').appendTo('#' + otherGroup.view);
Filter(otherGroup);
if (settings[removeGroup.index].useCounters) {
UpdateLabel(removeGroup);
}
}
function RemoveAll(removeGroup, otherGroup) {
$('#' + otherGroup.view + ' option.copiedOption').add('#' + otherGroup.storage + ' option.copiedOption').remove();
try {
$('#' + removeGroup.storage + ' option').clone().addClass('copiedOption').add('#' + removeGroup.view + ' option').appendTo('#' + otherGroup.view).removeAttr('selected');
} catch (ex) { }
Filter(otherGroup);
if (settings[removeGroup.index].useCounters) {
UpdateLabel(removeGroup);
}
}
function ClearFilter(group) {
$('#' + group.filter).val('');
$('#' + group.storage + ' option').appendTo('#' + group.view);
try {
$('#' + group.view + ' option').removeAttr('selected');
} catch (ex) { }
if (settings[group.index].useSorting) {
SortOptions(group);
} if (settings[group.index].useCounters) {
UpdateLabel(group);
}
}
function IsMoveMode(currSettings) {
return currSettings.transferMode == 'move';
}
})(jQuery);I created 3 new properties:
-
enableValidation : Boolean – By default it is false , but when true it enables the use of the second property (function) to perform a validation before transferring the item.
-
validation : Function – When enableValidation is true the function created for this property is executed before moving the selected item. It is important to say that the function created for this property must return a Boolean (true or false) to move the item if it is valid.
-
afterChanges : Function – When an item is moved this function is executed. No need to return anything.
Example of use:
$.configureBoxes({ useCounters: false, useSorting: false, enableValidation: true, // Habilitando validação afterChanges: function (toGroup, toGroupIsMoveMode) { // Obtendo itens que foram movidos da caixa1 para a caixa2: var toGroupItens = new Object(); if (toGroupIsMoveMode) { toGroupItens = $('#' + toGroup.view + ' option'); } else { toGroupItens = $('#' + toGroup.view + ' option:not([class*=copiedOption])') } // Continue aqui com os itens já em mãos... }, validation: function (to1destined, allGroupdestined, fromGroup, toGroup, fromGroupIsMoveMode, toGroupIsMoveMode) { // Itens não são destinados para caixa1? (ou seja, itens são destinados para caixa2?) if (!to1destined) { // Obtendo itens: var fromGroupItens = new Object(); var toGroupItens = new Object(); if (allGroupdestined) { if (fromGroupIsMoveMode) { fromGroupItens = $('#' + fromGroup.view + ' option'); } else { fromGroupItens = $('#' + fromGroup.view + ' option:not([class*=copiedOption])') } if (toGroupIsMoveMode) { toGroupItens = $('#' + toGroup.view + ' option'); } else { toGroupItens = $('#' + toGroup.view + ' option:not([class*=copiedOption])') } // Obtendo tipos dos itens var fromGroupItensArray = [], ocurrence = 0; fromGroupItens.each(function () { fromGroupItensArray.push(parseInt($(this).data("tipo"))); }); fromGroupItens.each(function () { var target = parseInt($(this).data("tipo")); var numOccurences = $.grep(fromGroupItensArray, function (elem) { return elem === target; }).length; if (numOccurences > 1) { ocurrence++; } }); if (ocurrence != 0) { alert("Erro de validação!"); return false; } var toGroupItensArray = [], ocurrence = 0; toGroupItens.each(function () { var elem = parseInt($(this).data("tipo")); toGroupItensArray.push(elem); }); fromGroupItens.each(function () { var target = parseInt($(this).data("tipo")); if ($.inArray(target, toGroupItensArray) >= 0) { ocurrence++; } }); if (ocurrence == 0) { return true; } else { alert("Erro de validação!"); return false; } } else { if (fromGroupIsMoveMode) { fromGroupItens = $('#' + fromGroup.view + ' option:selected'); } else { fromGroupItens = $('#' + fromGroup.view + ' option:selected:not([class*=copiedOption])'); } if (toGroupIsMoveMode) { toGroupItens = $('#' + toGroup.view + ' option'); } else { toGroupItens = $('#' + toGroup.view + ' option:not([class*=copiedOption])'); } var fromGroupItensArray = [], ocurrence = 0; fromGroupItens.each(function () { fromGroupItensArray.push(parseInt($(this).data("tipo"))); }); fromGroupItens.each(function () { var target = parseInt($(this).data("tipo")); var numOccurences = $.grep(fromGroupItensArray, function (elem) { return elem === target; }).length; if (numOccurences > 1) { ocurrence++; } }); if (ocurrence != 0) { alert("Erro de validação!"); return false; } var toGroupItensArray = [], ocurrence = 0; toGroupItens.each(function () { var elem = parseInt($(this).data("tipo")); toGroupItensArray.push(elem); }); fromGroupItens.each(function () { var target = parseInt($(this).data("tipo")); if ($.inArray(target, toGroupItensArray) >= 0) { ocurrence++; } }); if (ocurrence == 0) { return true; } else { alert("Erro de validação!"); return false; } } } else { return true; } } });