So i have a select menu with various options and images below that change accordingly to what we choose in the options.
I managed to get help from stackoverflow using this code.
$(".filter").change(function() {
var filterValue = $(this).val();
var row = $('.categorias');
row.hide()
row.each(function(i, el) {
if($(el).attr('data-type') == filterValue) {
$(el).show();
}
})
// In Addition to Wlin's Answer (For "All" value)
if ("all" == filterValue) {
row.show();
}
});
This works just fine this way. With only one "data-type".
<article class="portfolio-item categorias" data-type="desporto">
But the problem is that some articles have 2, 3 or even 4 types and if i add another data type he only assumes the first one. How can i make one article have the data-types i want?
row.each(function(i, el) {
if($(el).attr('data-type').split(' ').indexOf(filterValue) !== -1) {
$(el).show();
}
})
or
row.each(function(i, el) {
if($(el).data('type').split(' ').indexOf(filterValue) !== -1) {
$(el).show();
}
})
I'm not sure what data structure you're using but, as far as I can imagine, you could put data-type as a list of types separated by commas (for example: data-type="type1,type2,type3") and your JavaScript code, taking advantage to make some better, could look like this:
$(".filter").change(function() {
var filterValue = $(this).val();
var row = $('.categorias');
if ("all" == filterValue) {
row.show();
} else {
row.each(function(i, el) {
if ($(el).attr('data-type').contains(filterValue)) {
$(el).show();
} else {
row.hide();
}
});
}
});
Related
I have this code to search data in my tables. I'm trying to add a class on the found rows. It works, however once the search input field is empty, it still keeps the class on the cells. Is there any quick way to remove the class once the search field is empty/found is false?
$(document).ready(function() {
$('#search').keyup(function() {
searchTable($(this).val());
});
});
function searchTable(inputVal) {
var table = $('.phonetable');
table.find('tr').each(function(index, row) {
var allCells = $(row).find('td');
if(allCells.length > 0) {
var found = false;
allCells.each(function(index, td) {
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text())) {
found = true;
return false;
}
});
if(found == true) $(row).show() .addClass("searchhighlight");
else $(row).hide();
}
});
}
Check if the value is empty and if it is remove the value:
$('#search').keyup(function() {
var value = $(this).val();
if(value)
searchTable();
else
$('.phonetable tr td').removeClass("searchhighlight");
});
Also look how I traverse the table with $('.phonetable tr td'), you can do something similiar in your current code.
I want to create a system that displays certain content based on the number for this innerhtml content...
Here's the actual element itself, 17 is just the number for mine it is different for each user:
<span id="your_div_id_diamonds"><dd><div class="field_uneditable">17</div></dd></span>
I want it to display if their number is say between 10 and 20... Here's a code I've been trying to work with, but it only does one number at a time and currently isn't working...
$(function() {
if(document.getElementById('your_div_id_diamonds').innerHTML = "17") {
document.getElementById('elitecontent').className="gotelite";
}
else {
document.getElementById('elitecontent').style.display="none";
}
}
});
Here's a version that works, but again only works for one number at a time... It'd be a huge pain if I had it go up to say 150 or 200, I'd have to make like 200 else if statements.
$( "#lev1" ).load('/u' + _userdata.user_id + ' #field_id-14 dd', function() {
var divs= document.getElementsByClassName('field_uneditable');
for (var i = 0, len = divs.length; i < len; ++i) {
if(divs[i].innerHTML.indexOf("7") != 1) {
document.getElementById('elitecontent').innerHTML="Elite";
}
else if(divs[i].innerHTML.indexOf("16") != -1) {
document.getElementById('elitecontent').innerHTML="Elite";
}
else if(divs[i].innerHTML.indexOf("17") != -1) {
document.getElementById('elitecontent').innerHTML="Elite";
}
else {
document.getElementById('elitecontent').innerHTML="Starter";
}
}
});
I basically want a code that works similar to with values, where I can just put something like >=10 and =<20
The problem you are facing with your current code is that you aren't using the correct comparison statements = is declarative, not used for comparison. In its place you should be using ==(matches regardless of data type) or === (must match data type as well) for instance
$(function() {
if(document.getElementById('your_div_id_diamonds').innerHTML = "17") {
document.getElementById('elitecontent').className="gotelite";
}else {
document.getElementById('elitecontent').style.display="none";
}
}
});
should be
$(function() {
if(document.getElementById('your_div_id_diamonds').innerHTML == "17") {
document.getElementById('elitecontent').className="gotelite";
}else {
document.getElementById('elitecontent').style.display="none";
}
}
});
However, for your needs something along the lines of:
$(function() {
if(document.getElementById('your_div_id_diamonds').innerHTML <=20 && document.getElementById('your_div_id_diamonds').innerHTML >=10) {
document.getElementById('elitecontent').className="gotelite";
}else {
document.getElementById('elitecontent').style.display="none";
}
}
});
should work.
I am using a type to filter textbox,where in yser type the data they want to highlight. The data entered in the textbox is then checked against the row in html table.
Row containing the typed data is shown and other rows are hidden.
My problem is that this works as expected but the trouble is that it hides the header.Is there any way that it shows the header along with the highlighted row?
Below is the Script I am using :
function Search() {
var value = $('input[id$="txtSearch"]').val();
if (value) {
$('#table-2 tr:not(:first:hidden)').each(function () {
var index = -1;
//$(this).children('td.hiddencls').each(function () {
$(this).children('td').each(function () {
var text = $(this).text();
if (text.toLowerCase().indexOf(value.toLowerCase()) != -1) {
index = 0;
return false;
}
});
if (index == 0) {
$(this).show();
}
else {
$(this).hide();
}
});
}
else
$('#table-2 tr').show();
}
Kindly provide your valuable suggestions..
Putting this at the end of the Search() definition should work
$('#table-2 tr>th').parent().show();
(I'm assuming the header row has th tags, instead of td)
Otherwise try this
$('#table-2 tr:first').show();
I have read about filtering table plugins. What I'm searching for is like this popup window.
(source: staticflickr.com)
When the user starts typing in the search-box, the relevant channel/category (as selected on previous dropdown box) should filter up. Also some animated loading action should happen while the filter process is going on.
I am looking for jQuery plugins which will make my filter-job easier to implement.
I think it is to ambigous to have a plugin for it. Just do something like this:
function filter($rows, category, search) {
$rows.each(function() {
if (category == ($("td:eq(2)", this).text() || category == "all") && (search. === "" || $("td:eq(1)", this).text().indexOf(search) !== -1) {
$(":checkbox", this).removeAttr("disabled");
$(this).show();
}
else
$(this).hide(function(){
$(":checkbox", this).attr("disabled", "disabled");
});
});
}
$("select.category").change(function() {
filter ($(this).closest("form").find("tr"), $(this).val(), $(this).closest("form").find("input.search").val());
});
$("input.search").keyUp(function() {
filter ($(this).closest("form").find("tr"), $(this).closest("form").find("select.catagory").val(), $(this).val());
});
You may need to make a few adjustments in order to make it work with the exact format of html.
Update to make it into a PLUGIN
$.fn.filter_table = function(options) {
options = $.extend(options, {
show: $.noop(), //Callback when a row get shown
hide: $.noop(), // Callback when a row gets hidden
entries: "table tr", // Selector of items to filter.
map: {} //Required parameter
//TODO Add default ajustment parameters here to remove ambiguity and assumptions.
});
return this.each(function() {
var form = this;
function each(callback) {
for (var selector in options.map) {
var check = options.map[selector];
$(selector, form).each(function(){
callback.call(this, check);
});
}
}
function show(row) {
if (!$(row).is(":visible")) {
options.show.apply(row);
$(row).show();
}
}
function hide(row) {
if ($(row).is(":visible"))
$(row).hide(options.hide);
}
function run_filter() {
$(options.entries, form).each(function() {
var row = this, matched = true;
each(function(check) {
matched &= check.call(this, row);
});
matched ? show(this) : hide(this);
})
}
//Bind event handlers:
each(function() {
$(this).bind($(this).is(":text") ? "keyup" : "change", run_filter);
});
});
};
You can use this plugin as follows:
$("form").filter_table({
map: {
//These callback define if a row was matched:
"select.category": function(row) {
//this refers to the field, row refers to the row being checked.
return $(this).val() == "all" || $(this).val() == $("td:eq(2)", row).text();
},
"input.search": function(row) {
return $(this).val() == "" || $(this).val() == $("td:eq(1)", row).text();
}
},
entries: "tr:has(:checkbox)", //Filter all rows that contain a checkbox.
show: function() {
$(":checkbox", this).removeAttr("disabled");
},
hide: function() {
$(":checkbox", this).attr("disabled", "disabled");
}
});
Okay it should work once it was debugged. I haven't tested it. I think that part is up to you.
If your HTML looks like this:
<form id="filterForm">
<input type="text" id="filterBox">
<input type="submit" value="Filter">
</form>
<div id="checkboxContainer">
<label><input type="checkbox" id="checkbox123"> Checkbox 123</label>
</div>
You could do something like...
//Set variables so we only have to find each element once
var filterForm = $('#filterForm');
var filterBox = $('#filterBox');
var checkboxContainer = $('#checkboxContainer');
//Override the form submission
filterForm.submit(function() {
//Filter by what the label contains
checkboxContainer.find('label').each(function() {
//If the value of filterBox is NOT in the label
if ($(this).indexOf(filterBox.val()) == -1) {
//Hide the label (and the checkbox since it's inside the label)
$(this).hide();
} else {
//Show it in case it was hidden before
$(this).show();
}
});
//Prevent the form from submitting
return false;
});
You can use this tablesorterfilter plugin to achieve what you need
Working Fiddle
And also please have a look at http://datatables.net/
There are many options out there. Here is a good place to start: http://www.wokay.com/technology/32-useful-jquery-filter-and-sort-data-plugins-62033.html
Filtering like this isn't incredibly complicated. It may be worth looking at the source of a couple plugins that come close to what you want and then try to write your own. You'll learn a lot more if you do it yourself!
$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
if (htext == '') {
alert("Pleae enter the search item.");
return false;
}
$("#lstCodelist option").each(function () {
$(this).removeClass('searchItem');
if ($(this).text().search(htext) != -1) {
$(this).addClass('searchItem');
}
});
});
});
Lets take I have a row something like this
I love to work with Jquery.
If I enter my search text as jquery its not highlighting Jquery. But my query should work in both they way regardless of CAPS or SMALL letters.
how to change my code to work like that.
thanks for your all help.
use .toUpperCase() ............. // or lowerCase
if ($(this).text().toUpperCase().indexOf(htext.toUpperCase()) != -1) {
This one should work, I believe:
$(document).ready(function () {
$("#btnhighlight").click(function() {
var htext = $("#txthighlighttext").val().toLowerCase();
if (htext === '') {
alert("Please enter the search item.");
return false;
}
$("#lstCodelist option").each(function() {
var $this = $(this);
if ($this.text().toLowerCase().indexOf(htext) !== -1) {
$this.addClass('searchItem');
} else {
$this.removeClass('searchItem');
}
});
});
});
Sidenote: indexOf is proven to be faster than search.