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.
Related
I am trying to toggle some table rows using jquery. The initial state is hidden
this is working
$('.table tr.items.' + name).each(function() {
$(this).show();
});
and this code is also working
$('.table tr.items.' + name).each(function() {
$(this).show();
});
but with this code
$('.table tr.items.' + name).each(function() {
$(this).toggle();
});
In the first call the rows are shown, but in the second call they are not hidden. I can see the style set to style="display: table-row;" in the second call. Do you have an idea on how to solve that?
js:
$('.table tr.items.' + name).toggleClass("notShow");
css:
.notShow{
display: none;
}
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 have made a table here : fiddle but I seem unable to get my table filter to work. What I tried to do was create a menu at the top where a specific filter would only show those rows. I tried to use .Data for this.
Filter Row Script
$('.filterMenu a').on('click', function(e){
e.preventDefault();
var c= $(this).data('qtype');
$('#questTable')[0].className = c;
});
Row Hover Script
$(document).ready(function() {
$('.table-row').hover(function() {
$(this).addClass('current-row');
}, function() {
$(this).removeClass('current-row');
});
});
Row hide Script
$(document).ready(function() {
$('tr')
.filter(':has(:checkbox:checked)')
.addClass('selected')
.end()
.click(function(event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
})
.find(':checkbox')
.click(function(event) {
$(this).parents('tr:first').toggleClass('selected');
});
});
Here is a working example
The basic idea is to first hide all rows and then recursively show them, when they match your criteria.
Find all tr in tbody and hide them
var trs = $("#questTable").find("tbody tr");
trs.hide();
I would make use of the filter function
.filter(function (i, v) {})
to check if the row should be shown.
trs.filter(function (i, v) {
if ($(this).data("qtype") == c) {
return true;
}
if(c=="all"){
return true;
}
return false;
})
//just show the row if it fits the criteria
.show();
Additionally I have fixed your typo msq -> mcq for the data-qtype in tr
Edit: Just updated the fiddle with more comments and fixed the thead area
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').
});
I am making tree with the help of jquery in the tree whenever there is more than one child for a particular child i want to gave a toggle effect.it means that there should be a plus icon on click of it tree should expand and minus image should come on click of minus tree should collapse and plus image should come.
how to develop this any working example of tree node will be helpful
In this manner i have used your function
function createSpanImageNode(spnNew) {
var spnImage = document.createElement("span");
spnImage.id = spnNew + "_" + "spn1";
$(spnImage).addClass('SpanPlus');
spnImage.setAttribute('onclick', 'toogleNode("' + spnImage.id + '")');
return spnImage;
}
function toogleNode(spnID) {
debugger;
var dv = $("#" + spnID).parents("div:first");
var chkUl = $(dv).find('ul').length;
if (chkUl > 0) {
if ($("#" + spnID).hasClass('SpanPlus'))
$("#" + spnID).removeClass('SpanPlus').addClass('SpanMinus');
else
$("#" + spnID).removeClass('SpanMinus').addClass('SpanPlus');
$(dv).find('ul').animate({ height: 'toggle' });
}
}
the two actions that it should perform are
1)remove the class with the span and add the class with minus.
2)it should toggle the ul.
both is not working????
http://api.jquery.com/toggle/
<script type="text/javascript">
$(document).ready(function () {
$('.navbar .dropdown-item').on('click', function (e) {
var $el = $(this).children('.dropdown-toggle');
var $parent = $el.offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if (!$parent.parent().hasClass('navbar-nav')) {
if ($parent.hasClass('show')) {
$parent.removeClass('show');
$el.next().removeClass('show');
$el.next().css({"top": -999, "left": -999});
} else {
$parent.parent().find('.show').removeClass('show');
$parent.addClass('show');
$el.next().addClass('show');
$el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
}
e.preventDefault();
e.stopPropagation();
}
});
$('.navbar .dropdown').on('hidden.bs.dropdown', function () {
$(this).find('li.dropdown').removeClass('show open');
$(this).find('ul.dropdown-menu').removeClass('show open');
});
});
for full menu you can find here
http://blog.adlivetech.com/how-to-make-vertical-menu-with-plus-minus-toggle/