Thread: Reactivating a "document function"

Hey all, slight issue, would be no problem with jQuery but in this example I can't use it.

Basically I have a lovely script that filters out rows of a table based on whether or not they have a cell containing the data in an input field.


So basically anything not in the 'filter' text field will be removed from the 'order-table' table below. All is well and good, the problem now is that I've added a 'Reverse Filter' checkbox, so that rows will disappear if they DON'T match the text field. The checkbox ID is 'rev-filter' and you can see the if statement in the middle of the JS.


Now this does actually work. I can type something in the filter text field and it'll filter them out, the problem is if I click the 'Reverse Filter' checkbox, I want the changes to be immediate. Instead, I have to do a keypress in the text field for the table to update, whereas I want the table to update as soon as I click the checkbox but nothing I try works. Have I made sense and can anyone help?

The first code fragment you posted is in the wrong order - JavaScript comes just before the </body> tag - not higher in the page.

The second code fragment is nonsense - don't jumble JavaScript with HTML. With the properly written (if misplaced) JavaScript in your first piece of code there is no way for the garbage JavaScript in the second fragment to interact with it as they are in completely different scopes.

You haven't posted the entire code for the form. How the JavaScript is to interact with the form depends on how the form is coded.

I live for the day I can be as indignant as you about Javascript, sir.

I didn't include the head/body tags and everything else because quite simply, they aren't actually that relevant. Yes to be pedantic I could post a W3C compliant webpage but frankly, the snippet works and is relevant without and that's all I need help with. The script still works all in one go if you paste the below into a .html file. Furthermore, inline Javascript launching as an event isn't yet punishable by death.

Code:

<input type="search" class="light-table-filter" data-table="order-table" id="filter" placeholder="Filter"> 
<label><input type="checkbox"  id="rev-filter" value="1">Reverse Filter</label>
<table class="order-table">
<tr>
<td>a</td>
</tr><tr>
<td>b</td>
</tr><tr>
<td>c</td>
</tr>
</table>
<script>
(function() {
   'use strict';
  var LightTableFilter = (function(Arr) {
    var _input;
    function _onInputEvent(e) {
      _input = filter;
      var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
      Arr.forEach.call(tables, function(table) {
        Arr.forEach.call(table.tBodies, function(tbody) {
          Arr.forEach.call(tbody.rows, _filter);
        });
      });
    }
    function _filter(row) {
      var text = row.textContent.toLowerCase(),
        val = _input.value.toLowerCase();
      if (document.getElementById("rev-filter").checked == true) {
        row.style.display = text.indexOf(val) > 0 ? 'none' : 'table-row';
      } else {
        row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
      }
    }
    return {
      init: function() {
        var inputs = document.getElementsByClassName('light-table-filter');
        Arr.forEach.call(inputs, function(input) {
          input.oninput = _onInputEvent;


   document.getElementById("rev-filter").onclick= _onInputEvent;
        });
      }
    };
  })(Array.prototype);  
 LightTableFilter.init(); 
})();
</script>

Originally Posted by Petsmacker

Code:

<label><input type="checkbox" onclick="javascript:WHATGOESHERE???" id="rev-filter" value="1">Reverse Filter</label>

as Stephen
has said "nothingGoesThe​re"
If your elements were in a form
you could replace this ,,,
_input = filter;
with code that would reference
the form then it could be reused
for other forms in the page
script goes at bottom
​​

Originally Posted by Petsmacker

I didn't include the head/body tags and everything else because quite simply, they aren't actually that relevant.

The form you want to have interact with the JavaScript IS relevant and you didn't post the complete form and so the exact JavaScript to interact with the form can't be determined as not enough of the actual HTML is supplied.

We need everything from the <form> to the </form> to be able to determine how JavaScript needs to interact with <input> tags. The only form fields allowed outside of form tags are <button> tags. The HTML needs to be valid for the JavaScript to work.

Just to prove a point, this is literally the author's codepen with the code, most of which is the same as mine: https://codepen.io/chriscoyier/pen/tIuBL

Solved, rewrote the script and I prefer my one, thanks for the help!

Some advice... rather than screwing around with readystatechange, just put the script before </body> and just run the attach then. By that point the DOM is always built, so you don't need to play around with events like onload, domdocumentready or readystatechange, just do it!

Likewise, try NOT to do lookups or nested references inside your events. They take up a good deal of time, processing power (therein battery life) which is why a lot of such scripting enhancements are unpopular with the mobile crowd. (which is why more and more mobile users are blocking JS)

If you were to store an array of the rows to be filtered in a data attribute (well, data_ since get/setAttribute are a PITA) you can do a lot of the heavy lifting at load time instead of on every keypress. The only reason to process every time is if you are adding/removing rows from the scripting -- and in that case I'd regenerate the list on add/remove/repopulate and not on keystroke.

Something like...

Code:

(function(d) {

	'use strict';

	function inputEvent(e) {
		for (
			var 
				value = e.target.value.toLowerCase(),
				i = 0, iLen = e.target.data_targetRows.length;
			i < iLen; i++
		) e.target.data_targetRows[i].style.display = 
			e.target.data_targetRows[i].textContent.toLowerCase().indexOf(value) === -1 ?
			'none' :
			'table-row';
	}
	
	for (
		var
			inputs = d.getElementsByClassName('light-table-filter'),
			i = 0, iLen = inputs.length;
		i < iLen; i++
	) {
		inputs[i].data_targetRows = [];
		inputs[i].addEventListener('input', inputEvent);
		for (
			var
				tables = d.getElementsByClassName(inputs[i].getAttribute('data-table')),	
				j = 0, jLen = tables.length;
			j < jLen; j++
		) for (
			var
				table = tables[j],
				k = 0, kLen = table.tBodies.length;
			k < kLen; k++
		) for (
			var
				rows = table.tBodies[k].rows,
				l = 0, lLen = rows.length;
			l < lLen; l++
		) inputs[i].data_targetRows.push(rows[l])
	}
	
})(document);

(untested, might be typo's but it should work)

In my version I create variable references to fixed values during the loop initializer, which prevents "long" array lookups on every loop. Amazingly declaring the new variable reference to an array index is faster inside the loop than looking it up every time -- same reason you'll see scripts (like mine) that store array lengths before looping too. I use "for" instead of "Array.forEach" as the overhead of the function calls (requring a good deal of stack dicking around) also slows down execution a LOT, even if it seems like less code/less typing.

I also reduced the number of functions -- that filter operation being in it's own function was cute, but it's just more overhead from another unnecessary function call. Unless you were calling that filter from multiple places, don't waste the overhead of a function on it!

I also prefer to keep things in call order; I realize JavaScript has "lifting" but I don't trust it.

I was going to go ahead and polyfill for legacy, but given the trigger event is "input", something that doesn't even exist in IE8/earlier there's really no reason to bother. STILL I'd consider trapping "keypress" and "onchange" instead (yes, both) with a timeout event for two reasons:

1) If someone is typing as fast as I do, you're not hammering the scripting for nothing. A 200 to 300ms delay before filtering can make an amazing drop in the amount of CPU chewed up by the scripting.

2) legacy browsers can trap onchange and keypress, and by the time a timeout() passes the event will have been processed. When a new event occurs you check if there's already a timeout counting down, if so you delete it... then either way create a new one. The trick would be passing the event to that timeout, which is why I'd put the timeout's handler and the element it is for into an object indexed by your data-table attribute.

Oh, and are you REALLY sure you'd have more than one table being filtered by this script? If you're only indexing one table axing the outer loop and using an ID instead would make more sense and use less overhead.

-------------

edit -- PS, i realize this is just a demo, but in production try to remember that a placeholder is not a label!