I’m still lost. You suggested earlier to wrap the lines lengthDropdown, greater than, less than and exact value in a not. This is not included in the code you posted. Please be patient with me, I’m still a beginner, getting more and more lost.
1 Like
No problem, we are getting there, okay now I want before we can proceed I want you to tell me what code editor you are using?
Sorry for this late reply - our internet has been down for most of the day.
I am not using a code editor.
1 Like
Then this a great opportunity to start using one , I know this could be overwhelming at first but you have to try, give VS code editor a chance
Code editors like VS code are great because they can help us with error detection such as syntax errors, code organization and Linting
OK, I installed the version for Linux (my OS), I’ll play with it a bit tomorrow.
However, it won’t resolve two fatal errors that I found.
For getting the dropdown and the selected value, the “old” code failed completely (I put in an ‘alert’ to check)
function setLen() {
// Get the dropdown element
var dropdown = document.getElementById(“lengthDropdown”);
// Get the selected value of the dropdown, i.e. a variable
var LenValue = dropdown.value;
alert(LenValue);
gives the alert (even on loading the page):
function Number() {
[native code]
}
I fixed this with:
$(“#lengthDropdown”).change(function () {
var LenText = $(this).find(“option:selected”).text();
var LenValue = $(this).val();
alert(LenValue);
});
This works perfectly.
The second problem is getting the input value of the ‘length’ textbox and putting it into a variable. I tried many approaches, none work. So we are stuck until this is fixed.
1 Like
We will fix it dw,
first can you explain more how the original code failed because it worked just fine for me, we will try just to use JS here and avoid the jquery solution. are there any error messages in VS code or some code underlined in red?
Please bare with me on this, this is so interesting and I really want to help you make it
I’ve no idea why the code fails for me, but works for you. Could it be a browser problem? I’m using Firefox 115.13.0.
Maybe I did a bad job, putting some of your changes into the wrong place. It would help a lot if you would post your full code so that I can try it.
When I say it failed, this means not only the length selection part but also selection in all other columns of the table.
Regarding VS code, I’m still trying to use it, I might be able to let you know in a day or so.
I really appreciate your help and all the time you are putting into this!
1 Like
Here is the code that worked for me
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body bgcolor="AED6F1">
<div class="sticky">
<p style="font-size: 2rem; font-weight: bold; color: green; position: relative;
top: 0; line-height: 0;">Search Strain Data</p>
<p style="font-size: 1rem; font-weight: bold; line-height: 0; ">Please see the <a href="search_data-help.html"
target="_blank"><b>help</b></a> for further details.</p>
<form>
<div id="searchblock">
<!-- It was causing an error because images/searchicon.png is not found -->
<!-- <img src="images/searchicon.png" alt="cyanobacteriota" style="width:3%"
title="Search (case insensitive, whole or part of word)"> -->
<input type="text" style="width:150px" id="name" placeholder="taxon name" onkeyup="searchTable()">
<input type="text" style="width:70px;" id="strain" placeholder="strain" onkeyup="searchTable()">
<input type="text" style="width:100px" id="accession" placeholder="accession" onkeyup="searchTable()">
<input type="text" style="width:47px" id="length" placeholder="length" onkeyup="searchTable()">
<!-- Do not forget to add the label -->
<label>
Please Choose a search criteria
<select id="lengthDropdown">
<option value="exact value">exact value</option>
<option value="greater than">greater than</option>
<option value="less than">less than</option>
</select>
</label>
<input onclick="myFilterTable(true);" type="reset" class="rst" value="Reset"
title="clear all queries, restore table">
</div>
</form>
<script>
function myFilterTable(clear) {
var input, filter, table, tr, td, i, xtValue;
input = document.getElementById("myInput");
filter = clear ? "" : input.value.toUpperCase();
table = document.getElementById("data_table");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<table id="data_table" style="top:383px; position:sticky">
<thead>
<th id="name_col_head">taxon name (genus/species)</th>
<th id="strain_col_head">strain</th>
<th id="accession_col_head">accession</th>
<th id="length_col_head">length (bp)</th>
</thead>
<tbody>
<tr>
<td class="name_col">Jack</td>
<td class="strain_col">PC</td>
<td class="accession_col">AY</td>
<td class="length_col">1000</td>
</tr>
<tr>
<td class="name_col">Mike</td>
<td class="strain_col">OP</td>
<td class="accession_col">BZ</td>
<td class="length_col">1000</td>
</tr>
<tr>
<td class="name_col">Fred</td>
<td class="strain_col">UT9</td>
<td class="accession_col">AY</td>
<td class="length_col">1500</td>
</tr>
<tr>
<td class="name_col">Mike</td>
<td class="strain_col">PC</td>
<td class="accession_col">CP</td>
<td class="length_col">2000</td>
</tr>
</tbody>
</table>
<script>
function setLength(cells) {
var length = document.getElementById("length").value.toLowerCase();
var dropdown = document.getElementById('lengthDropdown');
var LenValue = dropdown.value;
if (LenValue === "greater than") {
return Number(cells[3].innerText.toLowerCase()) > Number(length);
} else if (LenValue === "less than") {
return Number(cells[3].innerText.toLowerCase()) < Number(length);
} else if (LenValue === "exact value") {
return Number(cells[3].innerText.toLowerCase()) === Number(length);
}
}
function searchTable() {
var name = document.getElementById("name").value.toLowerCase();
var strain = document.getElementById("strain").value.toLowerCase();
var accession = document.getElementById("accession").value.toLowerCase();
var length = document.getElementById("length").value.toLowerCase();
// var gc = document.getElementById("gc").value.toLowerCase();
var table = document.getElementById("data_table");
var rows = table.getElementsByTagName("tr");
// Loop through the rows and hide those that don't match the search criteria
for (var i = 1; i < rows.length; i++) { // Skip the header row
var cells = rows[i].getElementsByTagName("td");
var match1 = cells[0].innerText.toLowerCase().includes(name);
var match2 = cells[1].innerText.toLowerCase().startsWith(strain);
var match3 = cells[2].innerText.toLowerCase().startsWith(accession);
function setLength() {
var length = document.getElementById("length").value.toLowerCase();
var dropdown = document.getElementById('lengthDropdown');
var LenValue = dropdown.value;
if (LenValue === "greater than") {
return Number(cells[3].innerText.toLowerCase()) > Number(length);
} else if (LenValue === "less than") {
return Number(cells[3].innerText.toLowerCase()) < Number(length);
} else if (LenValue === "exact value") {
return Number(cells[3].innerText.toLowerCase()) === Number(length);
}
}
var match4 = setLength();
if (match1 && match2 && match3 && match4) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
</script>
</body>
</html>
Amazing, it works! I really don’t see where I went wrong, but I’ll keep your version (and make several backups).
This looks like the end of a long road; thank you so much for your interest and patience.
When I have adapted the code to my real table (15 columns, over 4000 rows), I’ll upload to my website.
Oops, I spoke to soon. Your code works perfectly for the 3 values of length. However, typing even a single letter into any of the other boxes hides ALL rows of the table. Any idea how this can be fixed?
I noticed that your code has two copies of function setLength, one as function setLength(cells), the second as function setLength(). Is there a reason for this? Deleting the first has no effect - I still lose the table when typing into any of the search input boxes, but the length routine still works.
1 Like
Hello,
sorry for the long delay, first the setLength function outside the searchTable is unnecessary so you can remove it if you want
As for the other boxes, if you type Jack for example in the first one the corresponding row will appear so I do not know if that is how you want it
One last thing, using this code on a table with (15 columns, over 4000 rows) is not really a good idea in terms of performance, the idea will remain the same but the code should be optimized even further
Something strange seems to be happening!! If I type Jack in the first box, the whole table disappears. Same for Mike or Fred.
How can it work for you but not for me?
Are you suing the same code I provided earlier or different one?
I am using exactly the code you gave.
Hello,
if you add the line if(!length) return true; then that will make it work properly, well kind of. I wanted to ask you for permission to refactor the code and cover all the edge cases
function setLength() {
var length = document.getElementById("length").value.toLowerCase();
var dropdown = document.getElementById('lengthDropdown');
var LenValue = dropdown.value;
if(!length) return true;
if (LenValue === "greater than") {
return Number(cells[3].innerText.toLowerCase()) > Number(length);
} else if (LenValue === "less than") {
return Number(cells[3].innerText.toLowerCase()) < Number(length);
} else if (LenValue === "exact value") {
return Number(cells[3].innerText.toLowerCase()) === Number(length);
}
}
Wow! That works nicely, I never would have thought of it. Thank you so much.
Of course you may refactor the code.
One thing that puzzles me is that the real table (over 4000 lines) can only be searched by Firefox. Other browsers (tested MS Edge, Chromium, Brave, Opera) just freeze completely, giving error messages. After playing around, I found that the limit for those browsers is about 1000 rows. Even then, one has to wait 4-5 sec after entering a search term and seeing the results, while FF still gives immediate results. I settled for a shorter table of about 700 rows, which, although it works fine, obviously omits much of the data present in the full table.
The same is true for the pure JS version that I started this with. Have you any tricks to overcome what appears to be a memory limitation of web browsers?
The code worked perfectly, with the line
if(!length) return true;
added to function setLength as you suggested.
I added an extra column G+C (mol%) and lines, with values 50.00 50.50 50.52 50.55.
Added extra gcDropdown with id=“gcDropdown”.
Added function setGC() [a copy of setLength() with all occurrences of length changed to gc]. This fails, and no table rows disappear when normal text input values are entered. Removal of function setGC() restores the search ability for name, strain and accession, and the search with the different values of lengthDropdown.
The two functions are:
function setLength() {
var length = document.getElementById(“length”).value.toLowerCase();
var dropdown = document.getElementById(‘lengthDropdown’);
var LenValue = dropdown.value;
if(!length) return true; // added by constantcode9909
if (LenValue === “greater than”) {
return Number(cells[3].innerText.toLowerCase()) > Number(length);
} else if (LenValue === “less than”) {
return Number(cells[3].innerText.toLowerCase()) < Number(length);
} else if (LenValue === “exact value”) {
return Number(cells[3].innerText.toLowerCase()) === Number(length);
}
}
var match4 = setLength();
if (match1 && match2 && match3 && match4) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
function setGC() {
var gc = document.getElementById(“gc”).value.toLowerCase();
var dropdown = document.getElementById(‘gcDropdown’);
var gcValue = dropdown.value;
if(!gc) return true;
if (gcValue === “greater than”) {
return Number(cells[4].innerText.toLowerCase()) > Number(gc);
} else if (gcValue === “less than”) {
return Number(cells[4].innerText.toLowerCase()) < Number(gc);
} else if (gcValue === “exact value”) {
return Number(cells[4].innerText.toLowerCase()) === Number(gc);
}
}
var match5 = setGC();
if (match1 && match2 && match3 && match4 && match5) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
What is wrong with the above?
False alarm, sorry. I fixed this problem by removing the lines
if (match1 && match2 && match3 && match4) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
from function setLength()
Hello,
Sorry for not responding lately I have been busy, but I did some research on your question about the memory limitation of browsers when you want to demonstrate your entire table I could it find a concrete answer but one approach I found is to divide your table into pages that the user can navigate to see the values
One other thing that I thought of is the overall performance of the website with the real table (over 4000 line), trying to filter and redisplay such a large table can slow or even crash the browser especially with the pure JS version, I wanted to ask sis you consider using something like React.js for this?
Again sorry for the long delay