I have an Asp gridview that I am hiding elements in using a css class. When a row on the grid is selected I have a jQuery function that adds a selected_row class and changes the color. I am trying to find the data for the rows that are selected, and hidden. My function looks like this
$(function() {
$("[id*=MainContent_grvAccounts] td").bind("click", function() {
var row = $(this).parent();
$("[id*=MainContent_grvAccounts] tr").each(function() {
if ($(this)[0] != row[0]) {
$("td", this).removeClass("selected_row");
} else {
var hiddenElements = $("body").find(".hidden-field").not("script");
console.log(hiddenElements);
var myElements = Array.from(hiddenElements, element => element.innerHTML);
console.log(myElements);
}
});
$("td", row).each(function() {
if (!$(this).hasClass("selected_row")) {
$(this).addClass("selected_row");
} else {
$(this).removeClass("selected_row");
}
});
});
In the DOM I can see that they have a class name of "hidden-field selected_row".
When I try to filter using jQuery grep my data returns empty.
I need the var hiddenElements to only contain elements with class name hidden-field selected_row
I ended up using
var hiddenElements = row.find(".hidden-field");
To get my data.
Related
I'm new to jQuery and need help on searching for user-typed element within a table. I wrote this in JS, but have a problem writing in using jQuery.
When the element is found, the other rows in the table with the same class name should be visible and other rows should be hidden:
$(document).ready(function()
{
search(".site-table", "#recordInput");
console.log("Document is ready");
}
);
function search(search_table, search_field)
{
// Searching for an item specified in search_field within a table
$(search_field).on("keyup", function()
{
var target_text = $(this).val().toLowerCase();
//Hide everything first
$(search_table).find('tr').addClass(".hidden");
$(search_table).find('tr').each(function(index, element){
// For each row, find out if the row has the target_text in it
$element:contains($target_text).each(function(index, element){
$(element).removeClass(".hidden");
});
// for each row with the target text in it, find other rows with this rows class name in their class name and show them. Any other row should be hidden
});
Any help is appreciated.
EDIT 1:
So, here is the editted code after the comments. I still cannot get it working:
$(document).ready(function()
{
search(".site-table", "#recordInput");
console.log("Document is ready");
}
);
function search($search_table, $search_field)
{
console.log("Starting to search...");
$($search_field).on("keyup", function()
{
// Heighlight the search field
$(this).css('border', '1px solid red');
$search_text = $(this).val().toLowerCase();
// 1st method:
$search_result = $($search_table).find('tbody tr').text().toLowerCase().indexOf($search_text > -1); // Does not work! Nothing is found when there is a match
console.log("Search Result: ", $search_result);
// 2nd method:
$($search_table).find('tr').each(function(index, element){
// For each row, toggle the hidden class if the row contains the search text
$(this).toggleClass('hidden', $(this).text().toLowerCase().indexOf($search_text > -1));
});
// 3rd method:
var found = $($search_table).find('tbody tr').filter(function() {
return $(this).text().toLowerCase() == $search_text;
});
console.log("found: ", found);
});
}
None of these methods works! What am I doing wrong in each method?
Your problem is about using the indexOf. What you must put between the parentheses is only the searching text and > -1 must be out. See this sample:
var its_ok = $('div').first().html().indexOf('b') > -1
console.log('first one: ', its_ok)
var its_not_ok = $('div').first().html().indexOf('b' > -1)
console.log('second one: ', its_not_ok)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>abcd</div>
What you have done is the second one that is not true way of using the indexOf.
I have table which contains 4 rows and (Expand or Collapse) button initially,see the below image
When i click the (Expand or Collapse) button initially,need to insert new row in the middle of rows, i did it using the below code
JQuery('#btnId').click(function() {
var that = this;
$("#example tbody tr").each(function(i, object) {
$(object).after("<tr id=\"dispId\"><td>Full name:'"+i+"'</td><td></td></tr>")
});
});
and which in result
Again if click the (Expand or Collapse) button, i need to hide the rows which is inserted in the middle.Is there a way to do this using Jquery or Javascript?
It's pretty simple.
mark all items as new before adding them
if you want to hide them, just remove the last inserted rows (as they are marked)
Here is the code:
JQuery('#btnId').click(function() {
var that = this;
IF ($("newRow", "#example tbody").length = 0){ // add rows if no rows exists
$("#example tbody tr").each(function(i, object) {
$(object).after("<tr class="newRow" id=\"dispId\"><td>Full name:'"+i+"'</td><td></td></tr>")
});
} // remove rows if already exist
else {
$("newRow", "#example tbody").remove()
}
});
You can use like this:
var inc = 0;
JQuery('#btnId').click(function() {
var that = this;
inc++;
$("#example tbody tr").each(function(i, object) {
$(object).after("<tr class=\"dispId\"><td>Full name:'"+i+"'</td><td></td></tr>")
if(inc%2==0){//remove at every second click
$('tr .dispId').eq(i).remove();
}
});
});
I have the following jQuery function below:
$("[id*=gridView1] td").on("click", function () {
var row = $(this).parent();
$("[id*=gridView1] tr").each(function () {
if ($(this)[0] != row[0]) {
$("td", this).removeClass("gridView1_selectedRow");
}
});
var done = 0;
$("td", row).each(function () {
if (!$(this).hasClass("gridView1_selectedRow")) {
$(this).addClass("gridView1_selectedRow");
}
else {
$(this).removeClass("gridView1_selectedRow");
}
});
});
What it does is it will add a css class on the selected row, adding highlight.
My problem is I don't want my user to highlight or select the last row of my gridview because it will be a row of page number, not data row.
I tried using this:
$("[id*=gridView1] tr:not(:last-child)")
But I ended up highlighting the whole gridview or all rows.
Any help would be appreciated.
Thanks!
Have you tried: $("[id*=gridView1] tr:not(:last)")?
It would make your entire script something like this:
$("[id*=gridView1] tr:not(:last)").on("click", function () {
$(this).parent().find(".gridView1_selectedRow").removeClass("gridView1_selectedRow");
$(this).addClass("gridView1_selectedRow")
});
I am using isotope on a page with 2 group filters, here is the fiddle,
and I am trying to add an extra functionality, if the filter button is pressed the second time, when it has the "selected" class on it, the list should reset itself and display all the elements again. I tried to do it using the 'reLayout' method.
Like this:
if ( $this.hasClass('selected') ) {
$container.isotope( 'reLayout' );
return;
}
but it's not working and I have no clue why.
Does anyone has a better idea on how to make this work ? Thanks
After many try-outs I've managed to do this.
Here is my solution in case anyone will have the same need
The updated fiddle http://jsfiddle.net/K8QN6/2/
$('.filter a').click(function () {
var $this = $(this);
// don't proceed if already selected
var $optionSet = $this.parents('.option-set');
// change selected class
$this.toggleClass('selected');
// store filter value in object
// i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[group] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for (var prop in filters) {
isoFilters.push(filters[prop])
}
var selector = isoFilters.join('');
$container.isotope({
filter: selector
});
if (!$this.hasClass('selected')) {
$this.attr("data-filter-value", $this.data("filter-value"));
} else {
$this.data("filter-value", $this.attr("data-filter-value"));
$this.attr("data-filter-value", "");
}
return false;
});
I have a set groups with a checkbox, I am trying to get the value of each checkbox when is checked and appending this value to a counter span element i have next to it, but every time i click on any of the checkboxes is appending the value to all the counter elements. I created a http://jsfiddle.net/creativestudio/xm838/
This is the Js I am using:
function set_index_id_checkbox() {
$("input:checkbox[name='like']").each(function (index) {
var currElem = $(this);
var prevLabel = currElem.next();
currElem.attr("id", this.id + index);
prevLabel.attr("for", prevLabel.attr("for") + index);
});
}
set_index_id_checkbox();
function getValues() {
$("input:checkbox[name='like']").click(function () {
if ($(this).is(':checked')) {
$('.likes').html($(this).val());
}
});
}
getValues();
That's because you are selecting all the elements with class of likes, you can use prev and find or closest methods for selecting the target element.
$(this).parent().prev().find('.likes').html(this.value);
or:
if (this.checked) { // better than creating an unnecessary jQuery object
$(this).closest('.block').find('span.likes').text(this.value);
} else {
// ...
}
http://jsfiddle.net/Ud9T4/