Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

[SOLVED] javascript filter problem

javascript filter C# innerHTML

  • This topic is locked This topic is locked
6 replies to this topic

#1 M2G

M2G

    CC Lurker

  • New Member
  • Pip
  • 4 posts

Posted 06 August 2012 - 09:14 AM

A friend asked me to help him with some homework from a javascript couse he's taking.
I have followed the instructions in the book and wrote the code.
The page has some digital camera displayed in a table. The javascript code must implement some filters so that when they are selected, the content of the page changes and shows just the cameras which respect the chosen filters.
The problem is that when I select a filter, nothing happnes and I can't figure out why.
I don't know if the handlers for the dropdown lists are not correctly added or there is a problem with one of the functions.
I'm fluent in Java, C# and VB but I can't figure out what is the problem in this case.
Could you help me fix this code?
I have zipped all the files needed for this exercise and you can't download them from here: http://www.mediafire...dv4um63v7q4hp2s
I have also added the pdf describing the steps in solving this problem.
Here is a picture of the page:
Posted Image
This is the Javascript code:
/*
New Perspectives on Javascript
Tutorial 10
Case Problem 2
Author:
Date:
Filename: filter.js

Function List:
resetTable()
	 Resets the data table, displaying all table rows
countRecords()
	 Contains the number of visible rows in the data table, displaying the
	 total in the "records" table cell
checkCell(cell, filterText)
	 If the inner content of the table cell does not equal the text string
	 filterText, hides the table row of which the table cell is part.
findCell(row, cellNum, filterText)
	 Loops through the table cells within a table row moving from the
	 first cell to the last, until it finds the cellNum cell.
filterTable(cellNum, filterText)
	 Hides a table row if the content of the cellNum table cell does not equal
	 the value of filterText
filter()
	 Filters the data table based on the values selected in the drop-down
	 selection lists. Also updates the record count.
init()
	 Initiates the Web page creating event handlers for each select element
	 and counting the number of records in the data table
*/
function resetTable(){
var allRows = document.getElementsByTagName('tr');
for (var i = 0; i<allRows.length; i++){
allRows[i].style.display = "";
}
}
function countRecords(){
var headRow = document.getElementById("titleRow");
var rowCount = 0;
for (var cRow = headRow.nextSibling; cRow = cRow.nextSibling;)
{
if ((cRow.tagName == "TR") && (cRow.style.display == ""))
rowCount++;	
}
var recordsVal = document.getElementById('records');
recordsVal.innerHTML = rowCount;
}
function checkCell(cell, filterText){
if(cell.innerHTML != filterText){
cell.parentNode.style.display = 'none';
}
}
function findCell(row, cellNum, filterText){
var cellCount = 0;
for (var cCell = row.nextSibling; cCell = cCell.nextSibling;)
{
//alert(cCell.tagName);
if (cCell.tagName == "TD"){
cellCount++;
if (cellCount == cellNum) {
checkCell(cCell,filterText);
}
}
}
}
function filterTable(cellNum, filterText){
var headRow = document.getElementById("titleRow");
for (var cRow = headRow.nextSibling; cRow = cRow.nextSibling;)
{
//alert(cRow.tagName); Aici da TR si undefined
if (cRow.tagName == "TR"){
findCell(cRow,cellNum,filterText);
}
}
}
function filter(){
resetTable();
var allSelects = document.getElementsByTagName('select');
for (var i = 0; i < allSelects.length; i++){
var filterText = allSelects[i].options[allSelects[i].selectedIndex].text;
if (filterText != ""){
filterTable(i+1,filterText);
}
}
countRecords();

}
function init(){
var allSelects = document.getElementsByTagName('select');
for (var i = 0; i < allSelects.length; i++){
//allSelects[i].addEventListener('change', filter(), true);
allSelects[i].onchange = filter();
}
countRecords();
}

This is the HTML code:
<html>
<head>
<!--
New Perspectives on Javascript
Tutorial 10
Case Problem 2
Camera List
Author:
Date:
Filename:		 cameras.htm
Supporting files: filters.js, links.jpg, logo.jpg, styles.css
-->
<title>Digital Cameras</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="filter.js"></script>

</head>
<body onload="init()">
<form name="prodForm" id="prodForm" action="">
<div id="title">
<img src="links.jpg" alt="" id="links" />
<img src="logo.jpg" alt="MicroCity" />
</div>
<table id="filters">
<tr><th colspan="2">Filter Product List</th></tr>
<tr>
<td>Records: </td>
<td id="records"></td>
</tr>
<tr>
<td>Model</td>
<td>
<select id="model" name="model">
	 <option></option>
	 <option>Camedia F-55</option><option>Camedia F-75</option>
	 <option>Camedia F-85</option><option>Camedia F-90</option>
	 <option>Digital X</option><option>Digital X Intro</option>
	 <option>Digital X+</option><option>DSC 125</option>
	 <option>EasyShot 125</option><option>FC 125</option>
	 <option>FP A340</option><option>IlluPix</option>
	 <option>Minishot 150</option><option>Next X</option>
	 <option>Next X2</option><option>Next X-5</option>
	 <option>Nic 5200</option><option>Nic 5300</option>
	 <option>PerfectPix 100</option><option>PowerShot 100</option>
	 <option>PowerShot 150</option><option>PowerShot 250</option>
	 <option>Pro-X</option><option>PS 400</option>
</select>
</td>
</tr>
<tr>
<td>Manufacturer</td>
<td>
<select id="manufacturer" name="manufacturer">
	 <option></option>
	 <option>CamSense</option>
	 <option>Ferrel</option>
	 <option>Kamtec</option>
	 <option>Nicolson</option>
	 <option>Olive</option>
	 <option>Sammon</option>
</select>
</td>
</tr>
<tr>
<td>Resolution</td>
<td>
<select id="resolution" name="resolution">
	 <option></option>
	 <option>3.2 Mpix</option>
	 <option>4.0 Mpix</option>
	 <option>5.0 Mpix</option>
	 <option>7.2 Mpix</option>
</select>
</td>
</tr>
<tr>
<td>Zoom</td>
<td>
<select id="zoom" name="zoom">
	 <option></option>
	 <option>2.0 x</option>
	 <option>2.2 x</option>
	 <option>2.5 x</option>
	 <option>3.0 x</option>
</select>
</td>
</tr>
<tr>
<td>Media</td>
<td>
<select id="media" name="media">
	 <option></option>
	 <option>cf</option>
	 <option>memory stick</option>
	 <option>mmc; sd</option>
	 <option>picture card</option>
	 <option>sd</option>
</select>
</td>
</tr>
<tr>
<td>Video</td>
<td>
<select id="video" name="video">
	 <option></option>
	 <option>yes</option>
	 <option>no</option>
</select>
</td>
</tr>
<tr>
<td>Microphone</td>
<td>
<select id="microphone" name="microphone">
	 <option></option>
	 <option>yes</option>
	 <option>no</option>
</select>
</td>
</tr>
</table>
<table id="prodTable">
<tr><th colspan="8">Digital Cameras</th></tr>
<tr id="titleRow">
<th>Model</th>
<th>Manufacturer</th>
<th>Resolution</th>
<th>Zoom</th>
<th>Media</th>
<th>Video</th>
<th>Microphone</th>
</tr>
<tr>
<td>PowerShot 100</td>
<td>CamSense</td>
<td>3.2 Mpix</td>
<td>2.2 x</td>
<td>sd</td>
<td>no</td>
<td>no</td>
</tr>
<tr>
<td>PowerShot 150</td>
<td>CamSense</td>
<td>3.2 Mpix</td>
<td>2.0 x</td>
<td>sd</td>
<td>no</td>
<td>no</td>
</tr>
<tr>
<td>Digital X</td>
<td>Kamtec</td>
<td>5.0 Mpix</td>
<td>3.0 x</td>
<td>mmc; sd</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>PowerShot 250</td>
<td>CamSense</td>
<td>4.0 Mpix</td>
<td>3.0 x</td>
<td>cf</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>PerfectPix 100</td>
<td>Nicolson</td>
<td>4.0 Mpix</td>
<td>3.0 x</td>
<td>sd</td>
<td>no</td>
<td>no</td>
</tr>
<tr>
<td>Digital X+</td>
<td>Kamtec</td>
<td>4.0 Mpix</td>
<td>3.0 x</td>
<td>mmc; sd</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>IlluPix</td>
<td>Nicolson</td>
<td>5.0 Mpix</td>
<td>3.0 x</td>
<td>cf</td>
<td>yes</td>
<td>no</td>
</tr>
<tr>
<td>FC 125</td>
<td>Sammon</td>
<td>7.2 Mpix</td>
<td>3.0 x</td>
<td>memory stick</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>Next X</td>
<td>Kamtec</td>
<td>4.0 Mpix</td>
<td>3.0 x</td>
<td>cf</td>
<td>no</td>
<td>no</td>
</tr>
<tr>
<td>Next X2</td>
<td>Sammon</td>
<td>7.2 Mpix</td>
<td>3.0 x</td>
<td>memory stick</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>Camedia F-55</td>
<td>Olive</td>
<td>3.2 Mpix</td>
<td>3.0 x</td>
<td>picture card</td>
<td>no</td>
<td>no</td>
</tr>
<tr>
<td>Pro-X</td>
<td>Sammon</td>
<td>5.0 Mpix</td>
<td>3.0 x</td>
<td>memory stick</td>
<td>yes</td>
<td>no</td>
</tr>
<tr>
<td>Digital X Intro</td>
<td>CamSense</td>
<td>3.2 Mpix</td>
<td>2.5 x</td>
<td>mmc; sd</td>
<td>no</td>
<td>no</td>
</tr>
<tr>
<td>FP A340</td>
<td>Ferrel</td>
<td>4.0 Mpix</td>
<td>3.0 x</td>
<td>picture card</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>PS 400</td>
<td>Nicolson</td>
<td>4.0 Mpix</td>
<td>3.0 x</td>
<td>picture card</td>
<td>no</td>
<td>no</td>
</tr>
<tr>
<td>Camedia F-75</td>
<td>Olive</td>
<td>4.0 Mpix</td>
<td>3.0 x</td>
<td>mmc; sd</td>
<td>yes</td>
<td>no</td>
</tr>
<tr>
<td>Next X-5</td>
<td>Kamtec</td>
<td>3.2 Mpix</td>
<td>3.0 x</td>
<td>sd</td>
<td>yes</td>
<td>no</td>
</tr>
<tr>
<td>Camedia F-85</td>
<td>Olive</td>
<td>3.2 Mpix</td>
<td>2.0 x</td>
<td>picture card</td>
<td>no</td>
<td>no</td>
</tr>
<tr>
<td>Minishot 150</td>
<td>Ferrel</td>
<td>3.2 Mpix</td>
<td>2.2 x</td>
<td>sd</td>
<td>no</td>
<td>no</td>
</tr>
<tr>
<td>Camedia F-90</td>
<td>Olive</td>
<td>5.0 Mpix</td>
<td>3.0 x</td>
<td>picture card</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>DSC 125</td>
<td>Sammon</td>
<td>4.0 Mpix</td>
<td>3.0 x</td>
<td>memory stick</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>Nic 5200</td>
<td>Nicolson</td>
<td>5.0 Mpix</td>
<td>3.0 x</td>
<td>sd</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>Nic 5300</td>
<td>Nicolson</td>
<td>5.0 Mpix</td>
<td>3.0 x</td>
<td>picture card</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>EasyShot 125</td>
<td>Kamtec</td>
<td>5.0 Mpix</td>
<td>3.0 x</td>
<td>mmc; sd</td>
<td>yes</td>
<td>yes</td>
</tr>
</table>
</form>
</body>
</html>

Attached Files


  • 0

#2 BlackRabbit

BlackRabbit

    CodeCall Legend

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3871 posts
  • Location:Argentina
  • Programming Language:C, C++, C#, PHP, JavaScript, Transact-SQL, Bash, Others
  • Learning:Java, Others

Posted 06 August 2012 - 10:05 PM

Hello m2g,
i just found a couple issues that i just fixed to give you the first hint, a table which filters

First :
you will need to change the onchange assigment from init() to javascript to html like this :

<select id="model" name="model" onchange="filter(this,0);" >

as you can see i added 2 parameters : this ( which will carry the select object itself, in this case the one named model) and 0 which is the column parameter that you use in javascript to filter the columns

then i changed some of your javascript :


function filter( selector, column )
{
    resetTable();
    var filterText = selector.options[selector.selectedIndex].text;

    if (filterText != "")
    {
          filterTable(column+1,filterText);
    }

    countRecords();
}
 

function findCell(row, cellNum, filterText)
{
  	 checkCell(row.cells[cellNum],filterText);
   	 return;
}

take note how easy is to work on the table cells via row.cells[ cellIndex ]

now, you will have to chek the resettable, set the init() function off, and work throught all the index, i just showed you what part of the code wasnt working, now you have to populate the solution and do your adjustements
:D
  • 0

#3 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 06 August 2012 - 11:11 PM

If you do
allSelects[i].onchange = filter;
without the braces at filter (That is your main issue), the filter() method will get called.

I assume the assignment makes you write all those methods, right? Cause this can be done is so much less code.


@BlackRabbit, assigning methods to events like that in Javascript instead of in the HTML will make the usage of "this' implicitly available.
allSelects[i].onchange = filter;

function filter(){
  this.selectedIndex; //works as you'd expect
}

Assigning the method in HTML will require the 'this' keyword to be given as parameter as you did correctly.

But anyway, 'this' is not so useful in this case since you need to go over all the other selects as to combine the filters.
  • 0

#4 M2G

M2G

    CC Lurker

  • New Member
  • Pip
  • 4 posts

Posted 07 August 2012 - 07:54 AM

First I want to thank you for your reply.
@wim DC
Indeed I had to write
allSelects[i].onchange = filter;
Without braces.

The problem is that it still doesn't work. I have used alert to debug and I have found a problem in the findCell function.

function findCell(row, cellNum, filterText){
var cellCount = 0;
for (var cCell = row.nextSibling; cCell = cCell.nextSibling;)
{
  alert(cCell.tagName); //here I get TR, Undefined, TR, Undefined etc...
  if (cCell.tagName == "TD"){
   cellCount++;   
   if (cellCount == cellNum)  {
    checkCell(cCell,filterText);
   }
  }
}
}

I think that Undefined value is causing problems since I should be TD, not Undefined.
Any idea of why is this happening?

@BlackRabbit unfortunately I have to stick to the instructions they give in that book. If I were to write that filter without those restrictions I think I could do it without so many problems.
The problem is that I didn't write any javascript code before this 10 exercices that I solved for my friend so I didn't read that book. I just used my background on other programming languages and google to solve them. This last one seems to be the one that I can't solve without your help. :)

If you have any other ideas of what is the problem, please reply.
Thank you very much for your time.
  • 0

#5 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 07 August 2012 - 08:22 AM

Main problem there is that I don't think you know what nextSibling does.

<table>
<tr id="row1">..</tr>
<tr id="row2">..</tr>
<tr id="row3">..</tr>
</table>
if your "row" variable, is row1, then nextSibling will be row2, and next row3.

While your code is made to be some kind of "nextChild".

You can try looping trough the cells by either "row.cells" and then "row.cells[0], row.cells[1] , ..."
Or else do something funny with "row.childNodes"
  • 0

#6 M2G

M2G

    CC Lurker

  • New Member
  • Pip
  • 4 posts

Posted 07 August 2012 - 02:36 PM

I have solved it. Thanks!
The problem was that I didn't read about familial references but I just wanted to finish this as fast as possible.
If I look back I find it almoust too easy. :)
  • 0

#7 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 07 August 2012 - 02:49 PM

This topic has been marked as SOLVED. If you have a similar question or topic, go back to the subforum and start a new topic to continue discussions.
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.






Also tagged with one or more of these keywords: javascript filter, C#, innerHTML

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download