Convert Javascript ES6 into Naive Javascript

JavaScript
1

Hi, I have following script can someone help me to convert it into naive javascript because it’s not working on internet explorer 8.

function onFilter(e) {
  let table = e.target.parentElement.parentElement.parentElement.parentElement;
  let fields = table.querySelectorAll('thead tr th input');
  let searchText = Array.from(fields).map(field => field.value.trim());
  Array.from(table.querySelectorAll('tbody tr')).forEach(row => {
    let hideRow = false;
    Array.from(row.children).forEach((col, index) => {
      var value = col.innerHTML.trim().toLowerCase();
      var search = searchText[index].toLowerCase();
      if (search.length > 0) {
        if (!value.startsWith(search)) {
          hideRow = true;
          return;
        }
      }
    });
    row.classList.toggle('hidden-row', hideRow);
  });
}
2

IE 8? You really need to support a browser that was obsoleted 7 years ago and has not been supported by Microsoft for 3 years? For 0.37% of internet users?

Right… well lets see. Let’s at least scope what would have to change, and then you evaluate whether it’s worth doing.

EDIT: I started writing this out, and then realized how much typing i’d be doing, so i’m going to use colors. Red are things you’d have to rewrite. You determine whether it’s worth your effort.

function onFilter(e) {
let table = e.target.parentElement.parentElement.parentElement.parentElement;
let fields = table.querySelectorAll(‘thead tr th input’);
let searchText = Array.from(fields).map(field => field.value.trim());
Array.from(table.querySelectorAll(‘tbody tr’)).forEach(row => {
let hideRow = false;
Array.from(row.children).forEach((col, index) => {
var value = col.innerHTML.trim().toLowerCase();
var search = searchText[index].toLowerCase();
if (search.length > 0) {
if (!value.startsWith(search)) {
hideRow = true;
return;
}
}
});
row.classList.toggle(‘hidden-row’, hideRow);
});
}

1 Like
3

thanks for the reply, Yes, actually it’s a legacy application and you are right Highlighted texts need to be replaced.

4

Well my first response to that is “Get an updated application. It’ll be less hassle than rewriting all of your scripts to use archaic forms of javascript that are five editions of ECMAScript out of date.”

from is rewritten by extracting the values from your object.
map is rewritten with a for loop walking through the result from the from and writing the values back out.
trim is rewritten by checking both ends of the string (see here for an example of a left trim)
let is var
startsWith is a .match with a proper regex.
classList is a string,className. You can use whatever string properties you have access to to manipulate it.

Good luck.

5

Can you please supply a working version of the code (html and javascript) for a modern browser, so that we can rework things to something that works in IE8?

6

Here is full wokring code:


<table id="demo">
	<thead><tr>
		<th>name</th>
		<th>drink</th>
		<th>pizza</th>
		<th>movie</th>
	</tr>
	<tr>
		<th><input placeholder="name" onkeyup="onFilter(event)"></th>
		<th><input placeholder="drink" onkeyup="onFilter(event)"></th>
		<th><input placeholder="pizza" onkeyup="onFilter(event)"></th>
		<th><input placeholder="movie" onkeyup="onFilter(event)"></th>
	</tr>
</thead>
<tbody><tr class=""><td>Homer</td><td>Squishie</td><td>Magheritta</td><td>The Avengers</td></tr><tr class=""><td>Marge</td><td>Squishie</td><td>Magheritta</td><td>The Avengers</td></tr><tr class=""><td>Bart</td><td>Squishie</td><td>Pepperoni</td><td>Black Dynamite</td></tr><tr class=""><td>Lisa</td><td>Buzz Cola</td><td>Pepperoni</td><td>Iron Man</td></tr><tr class=""><td>Maggie</td><td>Duff Beer</td><td>Magheritta</td><td>The Avengers</td></tr><tr class=""><td>Kent</td><td>Duff Beer</td><td>Hawaiian</td><td>The Avengers</td></tr></tbody></table>

function onFilter(e) {
  var table = e.target.parentElement.parentElement.parentElement.parentElement;
  console.log(table);
  var fields = table.querySelectorAll('thead tr th input');
  console.log(fields);
  var searchText = Array.from(fields).map(function (field) {
    return field.value.trim();
  });
  console.log(searchText);
  Array.from(table.querySelectorAll('tbody tr')).forEach(function (row) {
    var hideRow = false;
    Array.from(row.children).forEach(function (col, index) {
      var value = col.innerHTML.trim().toLowerCase();
      console.log(value);
      var search = searchText[index].toLowerCase();
      console.log(search);
      if (search.length > 0) {
        if (value.indexOf(search) === -1) {
          hideRow = true;
          return;
        }
      }
    });
    row.classList.toggle('hidden-row', hideRow);
  });
}
8

Why don’t you give it a try on your own. People have already outlined the functions that are not compatible with IE8.

9

Why not use babel to transpile it down to ES5? Doing it manually seems like a real waste of time.

3 Likes
11

(Because IE8 doesnt use ES5.) He’s asking for a transpile down to ES3.

1 Like
12

On the other hand, I’m lazy, and it’s nearly time for bed.

Use Babel to compile the ES6 code into something that IE8 can understand.

Then use some polyfills to get things working.

Then you just have the input event to manage, which should be as easy as using a change/keyup event to organise that.

13

Here is the solution in detail. This aims to keep the original code as intact as possible, so that the same code can be easily used and maintained across all web browsers.

Getting started

First, is for me to install IE8, because using other IE’s emulations isn’t as accurate as using the real thing ™.
Even though IE8 doesn’t work on Windows 10, Microsoft gives away virtual machines with it on there.
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

And to make the code easily accessible, I can just run live-server from my main machine, and access it from my virtual machine on 192.168.1.138:8080

Getting IE8 to run anything of the code

Using Babel to convert the existing JavaScript code into ES5 lets the code be used both by IE8 and anything more recent, because let statements are turned into var statements, and arrow-notation is turned into normal functions.

With that in place, IE8 loads the page, and gives us the first of many errors that will be resolved.

I can use the F12 developer tools screen to help find out the problem, by going to the Script tab and selecting the console to find out details about what’s causing the problem.

IE8 event handler

Unable to get property ‘parentElement’ of undefined or null reference
var table = e.target.parentElement.parentElement.parentElement.parentElement;

The parentElement issue occurs because IE8 doesn’t have a target object in the event object.

While it’s possible to polyfill almost every IE8 issue, I don’t think that there’s one that fixes how IE8 responds to events. We can though use a minimal technique where we try to get e.target first, and if that fails we then attempt to get e.srcElement instead.

  // var table = e.target.parentElement.parentElement.parentElement.parentElement;
  var el = e.target || e.srcElement;
  var table = el.parentElement.parentElement.parentElement.parentElement;

We can now use one of the text entry fields, to find out other IE8 problems.

Array.from polyfill

Object doesn’t support this property or method
var searchText = Array.from(fields).map(function (field) {

We can now use some polyfills to patch up problems that IE8 has. A nice an easy way of doing this is from polyfill.io where we can just select the ones that we require, and they’re packaged together for us.

First I select to Minify the code, and to use Feature detects.
Then I can use the search field to search for from, and select Array.from in the list.
Finally I select the HTML bundle tab and copy that code.

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CArray.from"></script>

With that in place before the scripting code, IE8 gives us the same error but it’s all okay, because it’s for a different problem.

String.trim polyfill

Object doesn’t support this property or method
return field.value.trim();

We now need to include a polyfill for trim, so I can search the polyfill site for trim, select that and copy the HTML bundle code.

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CArray.from%2CString.prototype.trim"></script>

Replacing the old bundle for that one, IE8 now gives a new error. That’s good, it means that we’re making progress.

Element.classList polyfill

‘classList’ is null or not an object
row.classList.toggle('hidden-row', hideRow);

IE8 now needs to be told how to use classList, so another polyfill is needed.

Search the polyfill builder page for class, select Element.prototype.classList, and copy the HTML bundle code.

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CArray.from%2CString.prototype.trim"></script>

Use that instead of the previous one, and the code now looks to fully work on IE8.

Summary

The above is a fairly easy process to fairly easily get code working on IE8 using a trial-and-error approach, fixing problems as and when they occur when IE8 is running the code.

7 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.