JavaScript is not working on Swedish letters

Question

My javascript code for filtering is not working on Swedish letters å ä ö

<input name='tablefilter' type='checkbox' value='Linköping' id='tablefilter1' checked/>
<label for='tablefilter1'>Linköping</label>
<input name='tablefilter' type='checkbox' value='Mjölby' id='tablefilter2' checked/>
<label for='tablefilter2'>Mjölby</label>
<input name='tablefilter' type='checkbox' value='Norrköping' id='tablefilter3' checked/>
<label for='tablefilter3'>Norrköping</label>
<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody id='tablebody'>
    <tr>
      <td>Linköping</td>
      <td>One</td>
      <td>First</td>
    </tr>
    <tr>
      <td>Mjölby</td>
      <td>Two</td>
      <td>Second</td>
    </tr>
    <tr>
      <td>Norrköping</td>
      <td>Three</td>
      <td>Third</td>
    </tr>
  </tbody>
</table>

js

/* Demo filtering table using checkboxes. Filters against first td value */

/* Set 'ready' handler' */
document.addEventListener('DOMContentLoaded', initFunc);

/* When document ready, set click handlers for the filter boxes */
function initFunc(event) {
  var filters = document.getElementsByName('tablefilter');
  for (var i = 0; i < filters.length; i++) {
    filters[i].addEventListener('click', buildAndExecFilter);
  }
}

/*
    This function gets called when clicking on table filter checkboxes.
    It builds a list of selected values and then filters the table based on that
*/
function buildAndExecFilter() {
  var show = [];
  var filters = document.getElementsByName('tablefilter');
  for (var i = 0; i < filters.length; i++) {
    if (filters[i].checked) {
      show.push(filters[i].value);
    }
  }
  execFilter(show); // Filter based on selected values
}

function execFilter(show) {
  /* For all rows of table, see if td 0 contains a selected value to filter */
  var rows = document.getElementById('tablebody').getElementsByTagName('tr');
  for (var i = 0; i < rows.length; i++) {
    var display = ""; // Default to display
    // If it is not found in the selected filter values, don't show it
    if (show.indexOf(rows[i].children[0].textContent) === -1) {
      display = "none";
    }
    // Update the display accordingly
    rows[i].style.display = display;
  }
}

http://jsfiddle.net/2Lm7pytt/4/

It works on jsfiddle, but it's not working on my visual studio. The problem is not that it can't display Swedish letters, because it can.

The problem is that the JavaScript is not working on Swedish letters.

What should I do to make it work?

Answer 1

you might try adding to the top of the head tag

< meta charset="utf-8" />

Answer 2

This could fail at several points but it is most likely failing on the comparison due to an encoding issue, so I would suggest using the debugger to breakpoint the JavaScript before this line:

if (show.indexOf(rows[i].children[0].textContent) === -1) {
     display = "none";
}

Check what is contained within textContent , try doing a comparison in your Immediate Window, eg rows[i].children[0].textContent === "Linköping" . If you find this coming back false, this will likely confirm it.

Go to FILE > Advanced Save Options in Visual Studio and check the encoding option set here - I am using "Unicode (UTF-8 with signature) - Codepage 65001" and my code includes the meta code as seen in Brandon's suggestion in the answers below. With these set, it is running as intended, for me.