I have a jQuery selectable list that has a handle to select an item from one list and put it in another "selected" list. This works fine in Firefox but does not work at all in Chrome and IE. I am not able to click an item to move it to the selected list. See my fiddle in Firefox, which works fine, and then view it in IE or Chrome and notice that it no longer works as expected. (click the plus sign to add a column to the selected list).
jQuery code to move to selected list:
$(function () {
$(".list")
.find("li")
.addClass("ui-corner-all")
.prepend("<div class='handle'><span class='ui-icon ui-icon-plus'></span></div>")
.selectable({
handle: ".handle",
stop: function () {
var result = $("#select-result");
$("ul li div").click(function () {
var index = $("ul li div").index(this);
var listLiText = $("ul.list li").eq(index).text();
var listLiID = $("ul.list li").eq(index).attr('id');
$("ul.list li").eq(index).css('background-color', '#669966');
$("ul.list li").eq(index).css('color', '#FFFFFF');
if ($("#select-result #" + listLiID).length == 0) {
result.append('<li id="' + listLiID + '">' + listLiText + '</li>');
}
sortColumns();
});
}
});
});
JS Fiddle (try first in FF then in IE or Chrome):
http://jsfiddle.net/kmbonin82/NkgC2/17/
I found your problem: You are using an "click" after you have already "stopped" the click event on selectable. You cannot click after it has stopped a selectable click. If you comment out the click, as below, then it fixes your main problem. Then, you need to change your selectors from "ul li div" to ".list li" because you are not selecting from your "list".
stop: function () {
var result = $("#select-result");
//$(".list li").click(function () { -----------PROBLEM-----------
var index = $(".list li").index(this); //Changed to .list li
var listLiText = $(".list li").eq(index).text(); //Changed to .list li
var listLiID = $(".list li").eq(index).attr('id'); //Changed to .list li
$(".list li").eq(index).css('background-color', '#669966'); //Changed to .list li
$(".list li").eq(index).css('color', '#FFFFFF'); //Changed to .list li
if ($("#select-result #" + listLiID).length == 0) {
result.append('<li id="' + listLiID + '">' + listLiText + '</li>');
}
sortColumns();
//});
}
Your updated JS Fiddle: http://jsfiddle.net/NkgC2/30/
Your code should execute after the page is ready:
(function($) {
$(document).ready(function() {
// your code here
});
})(jQuery);
Related
I have the following example:
https://codepen.io/baidoc/pen/LYVvOZq
jQuery(function ($) {
$(".box").click(function() {
$(".box").removeClass("active");
$(this).addClass("active");
$(".boxContent").removeClass("show-content");
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
});
});
2 Boxes, by default deactivated (hidden), and only once clicked, the content will be shown.
What I'm trying to do: when I click again on the box, it should hide the box (display:none)
I've tried with toggle function, but somehow it doesn't seem to work. What alternative do I have?
What about this?
jQuery(function ($) {
$(".box").click(function() {
var currentActive = $(this).hasClass("active");
$(".boxContent").removeClass("show-content");
$(".box").removeClass("active");
if (!currentActive){
$(this).addClass("active");
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
}
});
});
Try this below :
jQuery(function ($) {
$(".box").click(function() {
$(".box").removeClass("active");
$(this).addClass("active");
if($(".boxContent").hasClass("show-content")){
$(".boxContent").removeClass("show-content");
}else{
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
};
});
});
I'd appreciate some help regarding this Fiddle. A user would be presented with two unordered lists. By clicking on an option in one of the lists, a table will be shown and all else hidden.
My problem is that with my current setup, I can't get all the table combinations to work properly. I can use $(this).attr("value") on click to get the selected value for a given list, but using $("#select2 li").attr("value") for instance will always return value "c", even if a user had selected "option d" previously. This results in options like table "bd" not being possible.
Here's the JavaScript:
$(document).ready(function () {
$('.select-menu a').click(function () {
var text = $(this).text();
$(this).parent().parent().siblings().html(text + ' <span class="caret"></span>');
$(this).parent().siblings().removeClass('active');
$(this).parent().addClass('active');
});
$("#ac").show();
$("#select1 li").click(function () {
target = $(this).attr("value") + $("#select2 li").attr("value");
$('table.table').hide();
$("#" + target).show();
});
$("#select2 li").click(function () {
target = $("#select1 li").attr("value") + $(this).attr("value");
$('table.table').hide();
$("#" + target).show();
});
});
I wanted to allow for the user to have to provide only one input for either list to see a different table, instead of requiring a selection in both lists.
Can anyone help me with this please or suggest a better approach? Thanks!
you fetching value with only #select2 li instead of #select2 li.active
try to replace your code with this block even i have updated in jsfiddle.
$("#select1 li").click(function () {
target = $(this).attr("value") + $("#select2 li.active").attr("value");
$('table.table').hide();
$("#" + target).show();
});
$("#select2 li").click(function () {
target = $("#select1 li.active").attr("value") + $(this).attr("value");
$('table.table').hide();
$("#" + target).show();
});
I am trying to get a close button to close 2 LIs but they're in 2 different ULs - LIs generated by jQuery dynamically.
When someone enters an item / qty and clicks add they are rendered into a new LI but when they include the pricing, it renders in a different LI
So pressing the "X" in the Item/Qty to close the specific LI wont affect the price corresponding to that item.
Also the "Clear" button works fine just the individual LIs
Any suggestions on fixing this issue without having to add the "X" on the price LI as well?
I hope my explanation makes sense, you can see the code here
$(document).ready(function () {
// Adds typed items and qty to the list
$('#add').on('click', function () {
var item = $('#list').val();
var qty = $('#qty').val();
$('#list-a').append('<li>' + '<div class="delete"></div>' + qty + ' ' + item + '</li>');
var price = $('#price').val();
$('#list-b').append('<li>' + '$' + price + '</li>');
// Resets input field to empty and focus
$('#list').val('').focus();
$('#qty, #price').val('');
});
// Fires Add to List button when enter is clicked
$('#list, #qty, #price').keyup(function (event) {
if (event.keyCode === 13) {
$('#add').click();
}
});
// Deletes/fades out 'li' when X is clicked
$('#list-a').on('click', '.delete', function () {
var listItem = $(this).closest('li');
listItem.fadeOut(500, function () {
listItem.remove();
});
});
// Clear all items on the list and focus back on new shopping item
$('#clear').on('click', function () {
var li = $('li');
li.fadeOut(500, function () {
$(li).remove('li');
});
$('#list').val('').focus();
});
});
You would need to remove the li with the same sibling index from the next ul:
$('#list-a').on('click', '.delete', function () {
var listItem = $(this).closest('li'),
index = listItem.index();
listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
.fadeOut(500, function () {
$(this).remove();
});
});
Demo: http://codepen.io/anon/pen/emdyqX
$('#list-a').on('click', '.delete', function() {
var listItem = $(this).closest('li');
var ind = listItem.index();
listItem.fadeOut(500, function() {
listItem.remove();
});
$('#list-b').find('li').eq(ind).fadeOut(500, function() {
$(this).remove();
});
});
http://codepen.io/anon/pen/OPRzKx
i want to remove the an item from server side also , so i need id of item that is gone to trash div, below method is called on when dropped to trash div.
drop: function(e, selected) {
var $current_container, $original_container, $previous_container;
if (_this.options.enableTrash) {
alert(original_container_class);
$original_container = $("." + original_container_class);
$current_container = $("." + current_container_class);
$previous_container = $("." + previous_container_class);
$selected = $(selected.helper);
$current_container.trigger("ss-trashed", $selected);
$selected.remove();
$original_container.trigger("ss-rearrange").removeClass(original_container_class);
$current_container.trigger("ss-rearrange").removeClass(current_container_class);
return $previous_container.trigger("ss-arrange").removeClass(previous_container_class);
}
}
FIDDLE:
http://jsfiddle.net/LNysC/2244/
Try this
$('.trash').on('ss-trashed', function (e, selected) {
console.log($(selected).attr('id'))
})
DEMO: http://jsfiddle.net/LNysC/2245/
I have a jquery function that when a li is clicked, the li expands. That part is working fine. Now, I want, when the li is clicked it toggles a background color. But it works, however when i have to click on the li item again to untoggle the background color. Can someone assist me in the right direction on how to achieve this.
$(function() {
$('.a').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
$('.selected').css('background', 'yellow');
content.slideToggle('fast');
});
$("li").click(function() {
$(this).toggleClass("highlight");
});
});
On every click set your <li>-s to default color and highlight the current:
$("li").click(function() {
$("li").removeClass("highlight");
$(this).addClass("highlight");
});
...
UPDATE
http://jsfiddle.net/NXVhE/4/
$(function() {
$('.a').click(function() {
$(this).removeClass("highlight");
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide();
content.toggle();
});
$("a").click(function () {
$("a").removeClass("highlight");
if ( $(".content").is(":visible") ) {
$(this).addClass("highlight");
}
});
});
Assuming the <li>s are all siblings, it would be slightly more efficient to do something like this, and would allow for more than one list on the same page to function independently of one another (again, assuming that is the desired functionality)
$('li').click(function() {
$('this').addClass('highlight').siblings().removeClass('highlight').
});