We Keep Coding

jQuery .filter() acts differently on a set with a single element

I'm finding some really strange behavior of the filter function which I cannot work out.
I have a list of table rows that have certain text in a custom data-filter attribute. A user types text into a text box and the page automatically filters the table rows using jQuery, based on what's in the data-filter attribute:
$('tbody > tr').hide();
var validTextElements = findMatchingTextRows($('tbody > tr'));
validTextElements.show();
function findMatchingTextRows(elements) {
var textFilterInput = $('#tb_text_filter').val();
textFilterInput = textFilterInput.toLowerCase();
return elements.filter('tr[data-filter*=\'' + textFilterInput + '\']');
}
All works fine unless I have a table with one row in it. In this case, even when the user inputs an empty string (in which case I expect no filtering and the list to remain the same), elements.filter('tr[data-filter*=\'' + textFilterInput + '\']') returns an empty list, but when there are multiple items in elements, and the user inputs an empty string, the list remains the same.
There seems no difference between the single element and multiple elements, if I have it working with multiple elements, then I delete all except one from the HTML in Chrome developer tools, it stops working.
Why could this be happening?

I suspect some of the confusion is arising from your interpretation of the behaviour of the 'attribute contains' selector. If the value provided is an empty string, nothing is matched.
https://drafts.csswg.org/selectors-3/#attribute-selectors
The relevant section defines the selector thus:
Represents an element with the att attribute whose value contains at least > one instance of the substring "val". If "val" is the empty string then the > selector does not represent anything.
JQuery's filter function will filter the matched elements to those which match the selector:
Reduce the set of matched elements to those that match the selector or pass the function's test
In your case, this is none of them, so the filter function returns an empty jQuery object. An empty string should filter out all rows, not leave them unfiltered, as you indicate that you expect.
It's hard to surmise exactly what is happening in your original code, but I suspect something is throwing an error and the filtering doesn't occur at all when your string is empty. If you're able to replicate the exact issue, update your fiddle and I'll see if I can help further.

Return object bound to a dynamic element when label for object is also dynamic

I am using CKEditor. Within my page, the user can dynamically add/remove the element containing the WYSIWYG ckeditor text editor.
CKEDITOR.instances returns an object which contains within it all the ck_editor objects on my page.
When the user clicks the add button, then the following code successfully grabs that element:
CKEDITOR.instances[“my_textarea_0_body"]
The issue is when the user clicks delete to remove that element, and then reclicks add. I now want to grab that new ckeditor element on the page. However, now I need to grab it with this:
CKEDITOR.instances[“my_textarea_1_body"]
Notice that the number changed. So, the user is able to toggle the add/remove of this element any number of times. Example: if they did it 100 times I would need to have a way to grab that object like so:
CKEDITOR.instances[“my_textarea_100_body"]
The problem is that I never know what that number will be. That number is vital for me to create the string in order to grab the appropriate object.
Question: How can I grab this dynamically labeled object that is contained within the CKEDITOR.instances object? I know that my desired object will always be the LAST object appended within that CKEDITOR.instances object.

I assume that CKEDITOR.instancess a kind of a map (dictionary), so you can get all key names by Object.keys(). And then select the last/first/ or n-th instance name.
var mapping_length = Object.keys(CKEDITOR.instances).length;
var object_label = Object.keys(CKEDITOR.instances)[mapping_length - 1];
CKEDITOR.instances[object_label];
This will return the desired object from within that dictionary object.

Regex indeed is your friend here. /^CKEDITOR\.instances\["my_textarea_\d+_body"\]$/.test(str) should get the job done. (if you copy and paste any of your initial examples to test, it will fail however since you've got an angled quote illegal character in there)
console.log(/^CKEDITOR\.instances\["my_textarea_\d+_body"\]$/.test('CKEDITOR.instances["my_textarea_0_body"]'))
I think I understand what you're getting at though - you know the vague structure of the key, but not exactly what it will be when you're trying to retrieve it. In that case, you'd want to search through the keys of the CKEDITOR.instances object for any that match that pattern. So, let matchingKeys = Object.keys(CKEDITOR.instances).filter(key => /^my_textarea_\d+_body$/.test(key)). That will return a set of all keys that match that pattern.

You can create a helper function which checks for a regex match. The regex for that field should be:
my_textarea_\d+_body
Then you can modify/add the new object key to instances

How can I overwrite an array using Ractive?

I have a componet that updates an array on it's parent. Specifically, it takes additions, and creates an entirely new array that has been sorted, overwriting the original array.
var sortedUpdatedDomainNames = updatedProposedDomainNames.sort(sorts.domainName)
// even though we sort them, after setting the value, getting it returns the unsorted items
debugger;
Typing in the debugger here:
sortedUpdatedDomainNames
(4) ["example.com", "www.example.com", "swag.com", "www.swag.com"]
OK that works. The array items are sorted (using sorts.domainName which puts www immediately after parent domains)
await parentComponent.set('order.proposedDomainNames', sortedUpdatedDomainNames)
Here's the first issue: the DOM doesn't update poroperly, some items are duplicated in the DOM even though they're not duplicated in the data.
Running parentComponent.update fixes these duplications, however:
// Work around odd ractive bug where DOM doesn't update properly
// Trigger an update manually using .update()
// TODO: find proper fix!
await parentComponent.update('order.proposedDomainNames');
Her's the second issue: the values are now unsorted (well, they're sorted alphabetically now, which isn't what I want).
parentComponent.get('order.proposedDomainNames');
(4) ["example.com", "swag.com", "www.example.com", "www.swag.com"]
How can I overwrite an array using Ractive?
Please do not submit answers re: ractive.splice() etc - I do not know in advance the index where the data will be inserted, I simply wish to sort the entire array and update it.

Using the deep option for ractive.set() ensures the DOM updates to match the new array values - even though the array is a simple array of primitives.
await parentComponent.set('order.proposedDomainNames', sortedUpdatedDomainNames, { deep: true })
I also tried shuffle, which was suggested, but this does not work and the DOM is still inconsistent with the array value when using shuffle.
Though the issue is solved, I'm still interested in why deep was needed to make the DOM update correctly, so if you have your own answer to that, add it and I'l; accept it!

javascript removing item from an array, splice

I'm making a small appwith localstaorage (not implemented yet): you type a note int the text area and it is display in a list
the note are stacked in an object called notes (for localstorage in the future);
But my problem is : I can add a note, but when I try to remove on of them, I have to remove my li and the related note object in the 'notes' array, so i decided to use splice method, but it works in a strange way...
when i click 'close', it works fine one or two times but at a moment the array stays with one or two object in it...
I tried different ways to solve the problem but without success...
Here is the fiddle : http://jsfiddle.net/h8hg6/1/
thanks for your help

I have made some modifications to your fiddle that I think solve the problem. Essentially you were using .splice incorrectly, and your Array was falling out of sync with your note elements. I've replaced your array with an numeric-based object because it is much easier to deal with. Here are some of the relevant changes:
http://jsfiddle.net/h8hg6/2/
var notes = {}; // notes is now an object instead of an array
// snip
var number = jQuery(this).parents('li').data('number');
delete notes[number]; // this is how you remove properties from an object
// snip
var note = {
color: color,
text: text
};
notes[i] = note; // add this object as a property of the notes object
i++;

The problem is that your call to splice uses the value of the queue variable to determine the index of the element that will be removed in the notes array. Right here:
notes.splice(queue, 1);
Since the queue value is always increasing (right here):
function addNoteToPage(){
i++;
...
jQuery('ul#notes li:first').before('<li data-queue="'+ i +'">'+ note.text +' <a href=""#>CLOSE</a>
You hit a moment where you call splice on an non-existing index of the notes array and nothing is removed as a result. Basically, you end up with an out-of-sync notes array.
You need to make sure that the value of the data-queue attribute coincides with the real index of the element in the notes array so that your call to splice(queue,1) always succeeds and removes the appropriate array element.
With that said, if above answer works for you, I'd go with that one. I just wanted to give you more insight on what was going on...

How can I call an element from an array created by "document.getElementBytag()"?

I am trying to make a page work for my website using the mootools framework. I have looked everywhere I can think of for answers as to why this isn't working, but have come up empty.
I want to populate several arrays with different data types from the html, and then, by calling elements from each array by index number, dynamically link and control those elements within functions. I was testing the simple snippet of code below in mootools jsfiddle utility. Trying to call an element from array "region" directly returns "undefined" and trying to return the index number of an element returns the null value of "-1".
I cannot get useful data out of this array. I can think of three possible reasons why, but cannot figure out how to identify what is really happening here:
1. Perhaps this array is not being populated with any data at all.
2. Perhaps it is being populated, but I am misunderstanding what sort of data is gotten by "document.getElementBytag()" and therefore, the data cannot be displayed with the "document.writeln()" statement. (Or am I forced to slavishly create all my arrays?)
3. Perhaps the problem is that an array created in this way is not indexed. (Or is there something I could do to index this array?)
html:
<div>Florida Virginia</div>
<div>California Nevada</div>
<div>Ohio Indiana</div>
<div>New York Massachussetts</div>
<div>Oregon Washington</div>
js:
var region = $$('div');
document.writeln(region[2]);
document.writeln(region.indexOf('Ohio Indiana'));
Thanks for helping a js newbie figure out what is going on in the guts of this array.

$$ will return a list of DOM elements. If you are only interested in the text of those DOM nodes, then extract that bit out first. As #Dimitar pointed out in the comments, calling get on an object of Elements will return an array possibly by iterating over each element in the collection and getting the property in question.
var region = $$('div').get('text');
console.log(region[2]); // Ohio Indiana
console.log(region.indexOf('Ohio Indiana')); // 2
Also use, console.log instead of document.writeln or document.write, reason being that calling this function will clear the entire document and replace it with whatever string was passed in.
See an example.