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();
});
Related
Ok what I'm trying to accomplish is once someone clicks a button at the top we'll say the "Pagado" button I would like this to also display the "Pendiente" results as well whereas we'll say they are related and I want them both to be displayed.
See image below as the example:
Below is what the outcome I'm trying to create... Once the "Pagado" button is pressed only the results with the "Pagado" mention would be displayed on the page.
Here is the code for the example... http://ibootstrap.net/Snippets/IDXdL46
How to show Pendiente and Pagado at the same time?
Just use a combined data-status in your html something like:
<tr data-status="pagado_pendiente"> where the row has both status say (Pagado) and (Pendiente)
and in your JS instead of matching the exact string look for contains something like:
$('.table tr[data-status*="' + $target + '"]').fadeIn('slow'); instead of $('.table tr[data-status="' + $target + '"]').fadeIn('slow');
add this js instead of old one and it will work smoothly
$(document).ready(function () {
$('.star').on('click', function () {
$(this).toggleClass('star-checked');
});
$('.ckbox label').on('click', function () {
$(this).parents('tr').toggleClass('selected');
});
$('.btn-filter').on('click', function () {
var $target = $(this).data('target');
if ($target === 'pagado') {
$('.table tr').css('display', 'none');
$('.table tr[data-status="' + $target + '"], .table tr[data-status="pendiente"]').fadeIn('slow');
} else if ($target != 'all') {
$('.table tr').css('display', 'none');
$('.table tr[data-status="' + $target + '"]').fadeIn('slow');
} else {
$('.table tr').css('display', 'none').fadeIn('slow');
}
});
});
i've added new if conditional to your code which check if the target is pagado show this tr plus pendiente tr
if ($target === 'pagado') {
$('.table tr').css('display', 'none');
$('.table tr[data-status="' + $target + '"], .table tr[data-status="pendiente"]').fadeIn('slow');
}
you can change pagado to whatever you want or add more table rows , cheers.
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 Select option where if I select any option related div Shows up. Upto this it's fine. But I am wanting to make something like if I select the option it will display the related div but option it self will be removed.
FIDDLE
Is this possible ? Any help will be appreciated.
JS
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
});
Fixed my answer to reflect the update in the question:
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
var selIndex = $("#contact-location").prop('selectedIndex');
$("#contact-location").prop(selIndex).remove();
$('div').hide();
div.show();
});
});
http://jsfiddle.net/uwt73sj3/
var selIndex = $("#contact-location").prop('selectedIndex'); here we set the select element index to a variable we can work with later.
$("#contact-location").prop(selIndex).remove(); removed the index value from the select drop down.
You could try something like:
$(document).ready(function() {
$('#contact-location').change(function(){
$('#contact-location option').show(); //clean alls
$('option:selected',this).hide(); // hide selected
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
})
LIVE DEMO
Why not make things more generic at the same time?
$(function () {
$('#contact-location').change(function () {
var $this = $(this);
// show only correct location
$('div').hide(); // maybe use a class rather than hiding every <div>
$('#' + $this.val()).show();
// show only alternate options
$this.find('option').show();
$this.find('option:selected').hide();
});
});
one solution is to use click on the children of select (i.e. the options) and then hide this (which is the option). Then the value of the select still has the value of the selected option and you have to reset it manually (I used the content of the first child via the css :first-child selector but you could use anything else, too).
$(document).ready(function(e) {
$('#contact-location').children().click(function(){
var $select = $(this).parent();
var $clicked = $(this);
var location = $clicked.val(); //is the same like $select.val()
var $div = $('#' + location);
$clicked.hide();
$select.val($select.children(":first-child"));
$div.show();
});
});
I used $ before the names of some variables to indicate that these variables store jQuery objects.
You can get the selected option like this:
$("option:selected", this);
From there you can hide or remove it:
$("option:selected", this).hide();
$("option:selected", this).remove();
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);
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').
});