We Keep Coding

Datatables deleting a row where column value equals something

I have tried the following and I am unable to find a match. What am I doing wrong?
var table = $('#mytable').DataTable();
//hide the row where text in column 1 equals 202733001010
var index = table.row().eq( 0 ).filter( function (rowIdx) {
return table.cell( rowIdx, 0 ).data() === '202733001010' ? true : false;
} );
What i get is a convoluted empty array that does not seem to have any values in it. My end purpose is to delete a row where a column cell (in this case 0) equals a certain value but I think I may be using an incorrect approach. Many thanks in advance for your suggestions. Datatables documentation : https://datatables.net/reference/type/row-selector

If your goal is to actually remove the row (filter and search just hides/shows matching data), the logic below can do it fairly straight forward. I use a text box to enter a value to get ride of out of the first column. If found, I remove it.
See it work here http://live.datatables.net/natejiju/1/edit
$(document).ready( function () {
var table = $('#example').DataTable();
$("#btnGo").on("click", function(){
var s = $("#txtSearch").val();
table.rows().nodes().each(function(a,b) {
if($(a).children().eq(0).text() == s){
table.rows(a).remove();
}
} );
table.rows().invalidate();
table.draw();
});
});

jQuery show/hide rows based on filter

Preface:
I am working on a function to allow a user to choose data points to filter a table by. Each table row has 3 attributes associated with it, Title, Department, and Location.
There are three multi-select filter options on the page that allow the user to narrow their search down by selecting 1 or more filter options by each of the fields.
As those options are selected, it triggers a function to adjust the table and only show the rows with data that matches their filter.
The Problem:
Since my function contains a loop that checks each of the filter options independently, its hiding/showing rows in order which is causing problems. For example if it was supposed to show the first row in the table because the filter told it to, the next filter says to only show rows that matches its filter, ignoring the ones before it.
What I have Tried:
I attempted to build the function in a way where it hides all the rows to start and then if the attribute of the table row was contained in our filter, it shows the row. This works for the first filter but as it iterates over the rows and hits the other filters, it hides them when it shouldn't be.
Ideal Solution:
Looking for a way to clean up this function where it applies the filter logic all at once and not in order by the function call. If I choose Austin as my location, it will show rows that have the attribute location=austin. If I then select a department in the filters, it needs to apply both the location and department filter to the table.
Code Sample:
// Filters our user groups based on selections
function filterUserGroups(){
// Define our vars
var locationsFilter = $('[name=in_ugLocationsFilter]').val(),
departmentsFilter = $('[name=in_ugDepartmentsFilter]').val(),
titlesFilter = $('[name=in_ugTitlesFilter]').val(),
tempLocation = '',
tempDepartment = '',
tempTitle = '';
// Loop over our rows and show the data that matches our filters
$('[name=userGroupsRows] tr').hide();
$('[name=userGroupsRows] tr').each(function(){
// Get the current vars of each row
tempLocation = $(this).data('location');
tempDepartment = $(this).data('department');
tempTitle = $(this).data('title');
// Do we have any filter options selected?
if(locationsFilter || departmentsFilter || titlesFilter){
// If the location is in our filter, show row
if(jQuery.inArray(tempLocation, locationsFilter) != -1) {
$(this).show();
}
// If the departmentis in our filter, show row
if(jQuery.inArray(tempDepartment, departmentsFilter) != -1) {
$(this).show();
}
// If the title is in our filter, show row
if(jQuery.inArray(tempTitle, titlesFilter) != -1) {
$(this).show();
}
}
})
}
Fiddle:
https://jsfiddle.net/p4xvgLo1/1/

EDITED: Try with this:
var show = false;
if (locationsFilter) {
if (jQuery.inArray(tempLocation, locationsFilter) != -1) {
show = true;
}
}
if (!show && departmentsFilter) {
if (jQuery.inArray(tempDepartment, departmentsFilter) != -1) {
show = true;
}
}
if (!show && titlesFilter) {
if (jQuery.inArray(tempTitle, titlesFilter) != -1) {
show = true;
}
}
if (show) $(this).show();
See the edited fiddle: https://jsfiddle.net/p4xvgLo1/7/

Because you hide everything I would also add a check so that if all the filters are empty everything is shown (locationsFilter==null && departmentsFilter==null && titlesFilter==null) and then I'd change data-department="Global Financial Services 2" to not have a space so it's the same as the filter name: data-department="Global Financial Services2".
if (locationsFilter || departmentsFilter || titlesFilter) {
// If the location is in our filter, show row
if (jQuery.inArray(tempLocation, locationsFilter) != -1 || (locationsFilter==null&&departmentsFilter==null&&titlesFilter==null)) {
$(this).show();
}
// If the location is in our filter, show row
if (jQuery.inArray(tempDepartment, departmentsFilter) != -1|| (locationsFilter==null&&departmentsFilter==null&&titlesFilter==null)) {
$(this).show();
}
// If the location is in our filter, show row
if (jQuery.inArray(tempTitle, titlesFilter) != -1|| (locationsFilter==null&&departmentsFilter==null&&titlesFilter==null)) {
$(this).show();
}
Edited fiddle: https://jsfiddle.net/3c3vjfhz/1/

How do I set the CSS for one instance of a class when the markup has multiple instances

I have a page with a content accordion with 8 items. I also have an h4 tag on the page outside of the accordion. I want to hide which ever content accordion item matches the text inside the h4 tag.
The text inside the h4 tag and the content accordion items might change so I need to use variables (I think).
Here is what I have so far:
var category = $('.leftColumnNav h4').html();
var topic = $('.contentAccordionItemTitle p').html();
if(topic === category){
$(".contentAccordionItemTitle").css("display", "none");
} else {
$(".contentAccordionItemTitle").css("display", "block");
}
What I have sort of works. It successfully hides the .contentAccordionItemTitle. Unfortunately it obviously hides all of them. I just want to hide the one that matches the h4 tag.
If it's needed I can probably create a JSFiddle example.

var category = $('.leftColumnNav h4').text();
$(".contentAccordionItemTitle").each(function() {
if ($(this).text() === category) { $(this).hide() }
})

var topic = $('.contentAccordionItemTitle p').html();
That line means you're getting all the p-tags. If you want to continue down this solution, you could use the jQuery each function -> http://api.jquery.com/each/
$(".contentAccordionItemTitle").css("display", "none");
} else {
$(".contentAccordionItemTitle").css("display", "block");
The $(".contentAccordionItemTitle") also gets all elements with this class.

You should use a loop, like jQuery each:
var category = jQuery('.leftColumnNav h4').html();
jQuery('.contentAccordionItemTitle p').each(function() {
if(jQuery(this).html() === category) {
jQuery(this).parent('.contentAccordionItemTitle').css('display', 'none');
} else {
jQuery(this).parent('.contentAccordionItemTitle').css('display', 'block');
}
This is assuming there is only one element that matches jQuery('.leftColumnNav h4')

jquery dropdownlist hide value if selected in second dropdown

Okay so I have two drop downs I want the selected item in dropdown one to be hidden in dropdown two and vice versa.
I have done the following so far can't seem to figure out the final step was hoping for a hand.
What I have currently is I have two lists that append to the dropdowns from and to, these list are looped over and append values to the dropdownlists, I then check for change event and when this occurs I remove values from a dropdown based on its index.
I am currently removing on selectedIndex, I want to remove on selectedValue rather then index but could not grasp that either.
<script type="text/javascript">
var fromCurrencies = {
FRO : 'Convert this currency',
AUD : 'AUD, Australian Dollar',
NZD : 'NZD, New Zealand Dollar',
EUR : 'EUR, Euro',
USD : 'USD, United States Dollar',
};
var toCurrencies = {
TOC : 'To this currency',
AUD : 'AUD, Australian Dollar',
NZD : 'NZD, New Zealand Dollar',
EUR : 'EUR, Euro',
USD : 'USD, United States Dollar',
};
$(document).ready(function () {
var ddFrom = $(".ddConvertFrom");
$.each(fromCurrencies, function (val, text) {
ddFrom.append(
$('<option></option>').val(val).html(text)
);
}); /*End ddFrom loop*/
var ddTo = $(".ddConvertTo");
$.each(toCurrencies, function (val, text) {
ddTo.append(
$('<option></option>').val(val).html(text)
);
}); /*End ddTo loop*/
}); /*End document.ready function*/
function doAction(){
if ($('.ddConvertFrom').val == "" || $('.ddConvertFrom').get(0).selectedIndex == 0) {
//Do nothing or hide...?
} else {
/*Hide selected value from other dropdown*/
var index = $('.ddConvertFrom').get(0).selectedIndex;
$('.ddConvertTo option:eq(' + index + ')').remove();
}
}
</script>
The html:
<div class="selectstyler">
<asp:DropDownList ID="ddConvertFrom" OnChange="doAction()" CssClass="ddConvertFrom" runat="server"></asp:DropDownList>
</div>
<div class="selectstyler">
<asp:DropDownList ID="ddConvertTo" CssClass="ddConvertTo" runat="server"></asp:DropDownList>
</div>

Purely for completeness to add to an already working answer from undefined.
To address the vice versa and the extended issue of re-adding those values including auto-selecting the previous value if it exists see: DEMO
See below for the changes I made to your original scripts.
I'm sure the code below can be optimised on several levels but I only tried to get it working first. Making it pretty I leave to you :)
To start I re-factored your code so the values are attached in their respective methods.
The dropdowns are now fully cleared before the values are re-added.
First though we record the value of the currently selected option to ensure we can re-select it if it exists. Adds a more dynamic feel to it and saves the user form re-selecting manually.
See example of attaching values to the from-dropdown:
function attachFromValues() {
var ddFrom = $(".ddConvertFrom");
var selectedValue = ddFrom.val();
var selectedIndex = 0;
ddFrom.html("");
var index = 0;
$.each(fromCurrencies, function(val, text) {
ddFrom.append(
$('<option></option>').val(val).text(text));
if (selectedValue == val) {
selectedIndex = index;
}
index++;
}); /*End ddFrom loop*/
if (selectedIndex > 0) {
ddFrom.get(0).selectedIndex = selectedIndex;
}
};
I also re-factored the code which removes the value in the other dropdown calling the new re-factored methods to re-attach all values first before removing the specific value. That makes sure you do not end up with an empty dropdown after while.
See example of the change event of the to-dropdown:
(taken from undefined's answer, only added call to re-populate)
$('select.ddConvertTo').change(function() {
if ($('.ddConvertTo').val == "") {
//Do nothing or hide...?
} else { /*Hide selected value from other dropdown*/
attachFromValues();
var txt = $(this).val();
$('.ddConvertFrom option[value=' + txt + ']').remove();
}
})
For the complete code changes check the linked DEMO
Edit (25-Jun-2012)
Updated code as I noticed an inconsistency whereby the currencies did not re-set correctly if the default selection (index 0) was made. The latest version of this code now re-binds the currencies correctly.

try this and instead of using onChange attribute you can use change event handler.
$('select:first').change(function(){
/*remove selected value from other dropdown*/
var txt = $(this).val();
$('.ddConvertTo option[value=' + txt + ']').remove();
})
http://jsfiddle.net/ue4Cm/1/

jQuery/javascript - list box item deselect/show/hide not working in IE?

I have the following javascript/jquery code, the purpose of which is to -
Deselect a previously selected item from the list, if the selected item value exists in an array
Hide/display each list item dependent on whether they exist in the array
var list = $(row).find("select > option")
var selectedValue = $(row).find("select > option:selected")
if (selectedValue) {
if ($.inArray(selectedValue[0].value, dependencyListItemValues) == -1) {
alert('deselect');
$(selectedValue).attr("selected", false);
}
}
$(list).each(function () {
var value = this.value;
if (value != "") {
if ($.inArray(value, dependencyListItemValues) > -1) {
alert('show');
$(this).show();
}
else {
alert('hide');
$(this).hide();
}
}
});
This is working fine in chrome and firefox, but not in IE9. When running in IE, the alert lines are hit, but the following lines seemingly do nothing:
$(selectedValue).attr("selected", false);
$(this).show();
$(this).hide();
Do I need to use alternative code so this will work in IE?

First: You can use
list.each
instead of $(list).each.
Second, you cannot hide an OPTION element in crossbrowser way.
So, you must remove it (for hide) and re-create it (for show).
You can store all options (and them parent) in array, like so:
var cache_options= [];
list.each(function(index) {
cache_options.push({el:$(this), parent:$(this).parent()});
});
and after
for(var i = 0; i<cache_options.length; i++) {
var value = cache_options[i].el[0].value;
if (value != "") {
if ($.inArray(value, dependencyListItemValues) > -1) {
cache_options[i].parent.append(cache_options[i].el);
}
else {
cache_options[i].el.remove();
}
}
}
Tested!

OK my solution was as follows ... this is based on the answer by meder (thanks!) on this question - Hide select option in IE using jQuery
Firstly, in place of this line:
$(selectedValue).attr("selected", false);
I did this:
$(row).find("select")[0].selectedIndex = -1;
And to show/hide the relevant list items, I had to first wrap those that I needed to hide in a span and then apply the .hide() command, and for those I needed to display, replace the span with the original option element:
//first we need to hide the visible list values that are not in the list of dependent list values.
//get the list values which are currently displayed, these will be the 'option' elements of the 'select' element (list).
//the hidden values are within a span so will not be picked up by this selector
var displayedListValues = $(row).find("select > option")
//loop through the displayed list values
$(displayedListValues).each(function () {
//get the value from this 'option' element
var displayedValue = this.value;
//ignore empty values (first blank line in list)
if (displayedValue != "") {
//if the value is not in the list of dependent list values, wrap in span and apply .hide() command
if ($.inArray(displayedValue, dependencyListItemValues) == -1) {
$(this).wrap('<span>').hide();
}
}
});
//now we need to display the hidden list values that are in the list of dependent list values.
//get the list values which are currently hidden, these will be the 'span' elements of the 'select' element (list).
//the visible values are within an 'option' so will not be picked up by this selector
var hiddenListValues = $(row).find("select > span")
//loop through the hidden list values
$(hiddenListValues).each(function () {
//find the 'option' element from this 'span' element and get its value
var opt = $(this).find('option');
var hiddenValue = opt[0].value;
//ignore empty values (first blank line in list)
if (hiddenValue != "") {
//if the value is in the list of dependent list values, apply .show() command on the 'option' element
//(not sure why the .show() command works in this case?)
//and then replace the 'span' element with the 'option' element, which is effectively removing the span wrapper
if ($.inArray(hiddenValue, dependencyListItemValues) > -1) {
$(opt).show();
$(this).replaceWith(opt);
}
}
});
Which works fine ... although rather annoying I had to do this rather messy re-coding just because IE doesn't support .show() and .hide() of list values!!!!!

Here is a good solution:
http://ajax911.com/hide-option-elements-jquery/