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();
Related
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);
Hi I use Bootstrap tab menu and ShinDarth's Nestable++ menu editor
My problem live demo
$("a[data-toggle='tab']").on("shown.bs.tab", function(e) {
var hedef = $(e.target).attr("href");
alert(hedef);
if (hedef == "#footmenu") {
var nestabad = "#nestable2";
var menutip = "alt";
var nestableList = $("#nestable2 > .dd-list");
} else if (hedef == "#headmenu") {
var nestabad = "#nestable";
var menutip = "ust";
var nestableList = $("#nestable > .dd-list");
}
});
var deleteFromMenu = function () {
var targetId = $(this).data('owner-'+menutip+'-id');
alert(JSON.stringify($(this).data()));
var target = $('[data-'+menutip+'-id="' + targetId + '"]');
alert(JSON.stringify(target));
var result = confirm("Delete " + target.data('name') + " and all its subitems ?");
if (!result) {
return;
}
// Remove children (if any)
target.find("li").each(function () {
deleteFromMenuHelper($(this));
});
// Remove parent
deleteFromMenuHelper(target);
target.data();
// update JSON
updateOutput($('#nestable2').data('output', $('#json-output2')));
updateOutput($('#nestable').data('output', $('#json-output')));
};
always tabs menu change menutip variable defined.
I delete menu link before switch menu page menutip defined.
TWO confirm(1.undefined variable,2.defined variable) after menu link deleted
Help me!
I'm using jquery ui connected list to drag and drop between 2 uls.Now drag and drop is working fine.
I want to write customised function for both the drops.How will I achieve this?
I tried the following but it didn't worked for me(this executes for both drops)
$("#sortable1").sortable({
update: function (event, ui) {
debugger;
var id = ui.item.attr("id");
alert(id);
var val = ui.item.val();
alert(val);
var index = ui.item.index()+1;
alert(index)
}
});
This doesn't execute for both drops
$("#sortable2").droppable({
update: function (event, ui) {
debugger;
var id = ui.item.attr("id");
alert(id);
var val = ui.item.val();
alert(val);
var index = ui.item.index() + 1;
alert(index)
}
});
I need to use receive instead of update
For 1st ul drop function:
$("#sortable1").droppable({
receive: function (event, ui) {
debugger;
var id = ui.item.attr("id");
alert(id);
var val = ui.item.val();
alert(val);
var index = ui.item.index() + 1;
alert(index)
}});
For 2nd ul drop function:
$("#sortable2").droppable({
receive: function (event, ui) {
debugger;
var id = ui.item.attr("id");
alert(id);
var val = ui.item.val();
alert(val);
var index = ui.item.index() + 1;
alert(index)
}});
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
I have a fiddle here: my fiddle. What I am trying to do is create a list of items from a separate group of lists. I cannot seem to get a grasp on what I am doing wrong, but here is whats happening:
I have a group of lists based on tabular data
Each list has the name of the column and a selection checkbox
If I select an item, it needs to be added to the selected columns area (vertical list)
There are 14 unique tabular items with checkboxes
(PROBLEM -->) When I select an item, it gets added 14 times in the selected columns section
code
(html):
I tried ti insert HTML but is not working right. Please look at the fiddle listed above.
(jquery):
var dte = // drag table elements
{
init: function() {
var chkbx = $('.group input[type="checkbox"]:checkbox');
//var chkbx = $('#accordion');
for (var i = 0, ii = chkbx.length; i < ii; i++) {
$(chkbx).bind("click", dte.adjustList);
}
},
adjustList: function(event) {
var list = [];
var str = '';
var eleval = event.currentTarget.value;
var eleid = event.currentTarget.id;
if (eleval == 1) {
list.push(eleid);
str = '<li>' + eleid + '</li>';
}
$('#vertical ul').append(str);
/*
//var ele = event.currentTarget.id;
var allVals = [];
var str = '';
//var obj = $("#"+ele);
var ele = $('#accordion');
$(obj+': checked').each(function(){
allVals.push($(this.val()));
dte.list.push($(this.val()));
str += '<li>'+$(this.val())+'</li>';
});
$('#verticle').text(str);
alert('List: ' + toString(list));
*/
}
};
dte.init();
init: function() {
$('.group input:checkbox').bind("click", dte.adjustList);
},
you only need to bind once based on your selector.
init: function() {
var chkbx = $('.group input[type="checkbox"]:checkbox');
$(chkbx).bind("click", dte.adjustList);
},
fiddle
I have edited your fiddle, I removed the for loop. Here is the link updated fiddle
You only need to bind the click event once.
You are binding events multiple time. You can do something like this:
init:function(){
$('.group input[type="checkbox"]:checkbox').bind('click',dte.adjustList);
},
Edited your fiddle:
http://jsfiddle.net/emphaticsunshine/tPAmc/