We Keep Coding

jquery share $(this) between functions

I have two click events that are almost identical, I am trying to refactor to make it more DRY. I want share some lines of code in a handlerShared() function - but I loose the context of $(this) which should be the DOM element that is clicked. There are two different elements an svg and button. They have some specific functionality but alot of it is the same. I guess what I want is a way to make $(this) select the specific DOM element.
function handelerShared() {
}
function handlerTabs() {
var $this = $(this)
var dataKey = $this.attr("data-key");
pushHistory(dataKey);
removeActiveClass();
hideContent();
$(this).addClass(activeClass);
var activeTab = $(this).attr('href');
$(activeTab).fadeIn();
return false;
}
function handlerDiagram() {
var $this = $(this)
var dataKey = $this.attr("data-key")
pushHistory(dataKey);
removeActiveClass();
hideContent();
scrollToTabs();
$(themeTab + "." + dataKey).addClass(activeClass);
var activeSVGTab = $(themeContent + "." + dataKey)
$(activeSVGTab).fadeIn();
return false;
}
I m try to take these lines of of each handler and out into a handlerShared()
var $this = $(this)
var dataKey = $this.attr("data-key");
pushHistory(dataKey);
removeActiveClass();
hideContent();
the clicks
$(themeTab).on( "click", handlerTabs );
$(themeDiagram).on( "click", handlerDiagram );

I believe you can just pass the element around:
function handlerShared(element) {
var $this = $(element);
var dataKey = $this.attr("data-key");
pushHistory(dataKey);
removeActiveClass();
hideContent();
}
function handlerTabs() {
handlerShared(this);
$(this).addClass(activeClass);
var activeTab = $(this).attr('href');
$(activeTab).fadeIn();
return false;
}
function handlerDiagram() {
handlerShared(this);
scrollToTabs();
$(themeTab + "." + dataKey).addClass(activeClass);
var activeSVGTab = $(themeContent + "." + dataKey)
$(activeSVGTab).fadeIn();
return false;
}
$(themeTab).on("click", handlerTabs);
$(themeDiagram).on("click", handlerDiagram);

how to get columns of selected rows using jquery

I tried with below code and getting alert of the column name but didn't get all columns of the multiple selected rows. Here is the sample code.
$('body').on('click', 'td', function() {
var selectedRows= $(this).toggleClass('selected');
var holdNames = $(this).closest("tr").find("td:eq(2)").text();
$("#holdNames").val(holdNames);
var holdsArr = [];
for ( var index=0; index<selectedRows.length;index++) {
holdsArr.push(holdNames[index]);
};
alert(holdsArr);
});

The below code will alert the 3rd <td> in each selected row
e.g. Text1,Text2,Text3
$('body').on('click', 'tr', function() {
$(this).toggleClass('selected');
var holdNames = $(this).children().eq(2).text();
$("#holdNames").val(holdNames);
var selectedRows= $('tr.selected');
var holdsArr = [];
for ( var index=0; index<selectedRows.length;index++) {
var name = selectedRows.eq(index).children().eq(2).text();
holdsArr.push(name);
};
alert(holdsArr);
});
A better approach would be
var holdsArr = [];
$(document).on('click','tr',function(){
var $tr = $(this);
$tr.toggleClass('selected');
updateHoldsArr();
alert(holdsArr);
});
function updateHoldsArr(){
var $trs = $('tr.selected'),
arr = [];
$trs.each(function(){
arr.push($(this).children().eq(2));
});
holdsArr = arr;
}

Index both an element and its contents

I'm making a jquery tab like set-up, however the tabs contain other elements that are being indexed at -1 rather then the index of their parent DIV, how could I index the nested elements accordingly or how would I use event.stopPropagation(); to invalidate, actions caused by nested elements?
Here Is a js fiddle of the problem
$.fn.tabSample = function () {
$(this).each(function (idx, el) {
var $this = $(this);
$this.on('click','.tabs .tab', function (event) {
event.stopPropagation();
var index = $this.find(".tabs .tab").index(event.target);
$this.find(".contents div").removeClass('active');
$this.find(".tabs .tab").removeClass('active');
var item = $this.find(".contents div:eq(" + index + ")").addClass('active');
var item2 = $this.find(".tabs .tab:eq(" + index + ")").addClass('active');
console.log(item, item2, event.target, index);
});
});
};
$('html').click(function () {
//Hide the menus if visible
$(".active").removeClass('active');
var $this = $(this);
var index2 = $this.find(".tab button").index(event.target);
console.log(index2);
});
$(".tab-control").tabSample();

How to Dynamically Change Name attribute of select box

The following Javascript dynamically adds another Select box 'on change' of the original select box. The issue I am having is that when it creates the new select box it gives it the same 'name' and 'id' as the original select box. Therefore when I do a submit action on the form, the last selectbox is the only value submitted. How can I change the 'name' and/or the 'id' attributes of the newly created select box? Honestly I am VERY new to Javascript so if this is an easy fix I do apologize. Thank you ALL in advance!
$(function () {
var values = new Array();
$(document).on('change', '.form-group-multiple-selects .input-group-multiple-select:last-child select', function () {
var selectsLength = $('.form-group-multiple-selects .input-group-multiple-select select').length;
var optionsLength = ($(this).find('option').length);
var sInputGroupHtml = $(this).parent().html();
var sInputGroupClasses = $(this).parent().attr('class');
$(this).parent().parent().append('<div class="' + sInputGroupClasses + '">' + sInputGroupHtml + '</div>');
updateValues();
});
$(document).on('change', '.form-group-multiple-selects .input-group-multiple-select:not(:last-child) select', function () {
updateValues();
});
$(document).on('click', '.input-group-addon-remove', function () {
$(this).parent().remove();
updateValues();
});
function updateValues() {
values = new Array();
$('.form-group-multiple-selects .input-group-multiple-select select').each(function () {
var value = $(this).val();
if (value != 0 && value != "") {
values.push(value);
}
});
$('.form-group-multiple-selects .input-group-multiple-select select').find('option').each(function () {
var optionValue = $(this).val();
var selectValue = $(this).parent().val();
});
}
function in_array(needle, haystack) {
var found = 0;
for (var i = 0, length = haystack.length; i < length; i++) {
if (haystack[i] == needle) return i;
found++;
}
return -1;
}
})

have you considered using an array for the select boxes?
The first one, and any that follow can be
<select name="example[]"></select>
And then simply process the array on form submission, you can check for the size and then do a foreach loop if the size is > 1

Cannot search multiselect after modification

I have 2 multi selects in a page, and I need to transfer some of the option in first into second, while mantaining the search capabilities.
The problem is, that when I use the search input, it restores the selects to their original options...
Here is the jquery search function:
jQuery.fn.filterByText = function(textbox) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function() {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");
$.each(options, function(i) {
var option = options[i];
if(option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};
Here is the js fiddle : http://jsfiddle.net/C2XXR/ !
*I believe the problem lies in the options variable, but have no idea on how to solve it *
Thanks!

I have updated the fiddle. http://jsfiddle.net/C2XXR/2/
I have updated the code for right and left transfer. You have to change the option array itself got the filter, adding them in the dom will not work. In the changed code one issue is once we add from right to left or left to right it is getting added in the last position of the target select.
Please check and let me know if this is what you want.
Below is the main changed function. Later you can create a common function i suppose. Code can be optimized more.
$('[id^=\"btnRight\"]').click(function (e) {
var selected = $(this).parent().prev('select');
var target = $(this).parent().next('select');
target.find('option[value="999"]').remove()
var options = selected.data('options');
var selectedVal = selected.find('option:selected').val()
var tempOption = [];
$.each(options, function(i) {
var option = options[i];
if(option.value != selectedVal) {
tempOption.push(option);
}
});
var targetOptions = target.data('options');
targetOptions.push({value: selected.find('option:selected').val(), text: selected.find('option:selected').text()});
target.data('options', targetOptions);
selected.find('option:selected').remove().appendTo('#isselect_code');
selected.data('options', tempOption);
});
$('[id^=\"btnLeft\"]').click(function (e) {
var selected = $(this).parent().next('select');
var target = $(this).parent().prev('select');
var options = selected.data('options');
var selectedVal = selected.find('option:selected').val()
var tempOption = [];
$.each(options, function(i) {
var option = options[i];
if(option.value != selectedVal) {
tempOption.push(option);
}
});
if( tempOption.length == 0 )
{
// add 999 here
}
var targetOptions = target.data('options');
targetOptions.push({value: selected.find('option:selected').val(), text: selected.find('option:selected').text()});
target.data('options', targetOptions);
selected.find('option:selected').remove().appendTo('#canselect_code');;
selected.data('options', tempOption);
});

the problem with your code is that after you click btnRight or btnLeft your collection of options for each select is not updated, so try after click on each button to call your filterByText as the following :
$('[id^=\"btnRight\"]').click(function (e) {
$(this).parent().next('select').find('option[value="999"]').remove()
$(this).parent().prev('select').find('option:selected').remove().appendTo('#isselect_code');
$('#canselect_code').filterByText($('#textbox'), true);
$('#isselect_code').filterByText($('#textbox1'), true)
});
$('[id^=\"btnLeft\"]').click(function (e) {
$(this).parent().next('select').find('option:selected').remove().appendTo('#canselect_code');
$('#canselect_code').filterByText($('#textbox'), true);
$('#isselect_code').filterByText($('#textbox1'), true)
});