0

I'm trying to help someone out with some javascript that works in IE but not in firefox.

It's basically a filter so you select some options from select boxes and the javascript hides or shows any table cell that is not needed.

The html is shocking and the javascript doesn't look too hot either but it works in IE so can't be all bad

Can anyone tell me why it works in IE and not firefox and how to get it working in firefox?

This is the javascript

function query() {
    var vacancyRows = vacanciesTable.tBodies[0].rows;
    var count = vacancyRows.length - 1;           
      
    var query = location.search;
        
    //-- If there isn't a query --//
    if(query == "" || query == "?category=&location=&skills=") {
        
        //-- Do nothing! --//
    }   
    //-- Else --//
    else {
        query = query.substr(1);
        var queryParts = query.split("&");
          
        for(var i = 0; i < queryParts.length; i++) {
          
            var nameAndValue = queryParts[i].split("=");
            var name = nameAndValue[0];
            var value = nameAndValue[1].replace("/\+/g", " ");
            for(var rowIndex = 1; rowIndex < vacancyRows.length; rowIndex++) {
            
				var curRow = vacancyRows[rowIndex];
				if(curRow.style.display == "none") continue;
              
				switch(name) {
              
					case "category" :{

						//-- Put value in category select --//
						searchForm.categorySelect.value = value;
					
						//-- Hide rows that don't match this category --//
						if(curRow.cells[1].innerText.indexOf(value) == -1) {
					  
							curRow.style.display = "none";
							count--;
						}
						break; 
					}
                
					case "location" :{
					
						//-- Put value in location Select --//
						searchForm.locationSelect.value = value;
					
						//-- Hide rows that don't match this location --//
						if(curRow.cells[6].innerText.indexOf(value) == -1) {
					  
							curRow.style.display = "none";
							count--;
						}
						break;
					}
                
					case "skills" :{
                
						//-- Put value in skills input --//
						searchForm.skillsInput.value = value;
						
						//-- Hide rows that don't match these skills --//
						if(curRow.innerText.toLowerCase().indexOf(value.toLowerCase()) == -1) {
					  
							curRow.style.display = "none";
							count--;
						}
					
						break;
					}
				}	
			}
        }
          
		vacanciesTable.style.display = "block";
		
		messageDiv.style.display = "block";
		if(count == 0) nomatchesElem.style.display = "block";
		else matchesElem.style.display = "block";
    }
}

I've attached the html page as it is too long to list here

Edited by AdRock: n/a

Attachments
<html>
	<head>
    
		<link rel="stylesheet" href="normal.css" />

		<style type="text/css">
		  .section td, .section th {
			border: solid 1px #5AA594;
		  }
		  
		  input, select {
			width: 100%;
		  }
		</style> 
 
		<script type="text/javascript" src="js.js"></script>
	</head>
	<body style="margin: 0px; overflow: hidden"  onload="query();">
		<table cellspacing="0" style="height: 100%;">
			<col style="width: 68px; text-align: right;" />
			<tr style="height: 58px;">
				<td rowSpan="1" style="padding: 0px; background: #5AA594 url(Images/StripeTop.gif) no-repeat; background-position: bottom right;">
				  &nbsp;
				</td>
				<td style="background-color: #5AA594; text-align: center;">
				  <img src="Images/name.gif" alt="JARVIS BENTLEY" />
				</td>
				<td rowSpan="2" style="width: 64px">
				  <img src="Images/rec.gif" />
				</td>
			</tr>
			<tr style="height: 20px;">
				<td rowSpan="2" style="background: url(Images/StripeBottom.gif) no-repeat; background-position: top right;">
				  &nbsp;
				</td>
				<td style="text-align: right">
					<a class="smallButton" href="Index.htm">Home</a>
					<a class="smallButton" href="AboutUs.htm">About us</a>
					<a class="smallButton" href="Candidates.htm">Candidates</a>
					<a class="smallButton" href="Clients.htm">Clients</a>
					<a class="smallButton" href="Vacancies.htm">Vacancies</a>
					<a class="smallButton" href="ContactDetails.htm">Contact us</a>
				</td>
			</tr>
			<tr style="height: 100%;">
				<td colSpan="2" style="padding: 30px 0px 15px 15px">
					<div style="width: 100%; height: 100%; padding-right: 15px; overflow: auto">
					<table>
						<tr>
							<td>
								<h1 style="margin: 0px">Vacancies</h1>
							</td>
							<td style="text-align: right">
								<img src="Images/SectorsHoriz.jpg" />
							</td>
						</tr>
					</table> 
					<br />
					<br /> 
					<form id="searchForm">
						<table class="section">
							<col style="width: 10ex" />
							<col style="width: 25ex" />
							<col style="width: 10ex" />
							<col style="width: 30ex" />
              
							<tr>
								<th rowspan="2" style="text-align: center;"><h2 style="margin: 0px">Search:</h2></th>
								<th>Industry sub-sector</th>
								<th>Postcode</th>
								<th>Skills</th>
								<th>&nbsp;</th>
							</tr>
							<tr>
								<td>
									<select id="categorySelect" name="category">
										<option></option>
										<option value="Electronics">Electronics</option>
										<option value="Mechanical">Mechanical</option>
										<option value="BuildingServices">BuildingServices</option>
										<option value="QSurveying">QSurveying</option>
										<option value="Sales">Sales</option>
										<option value="Civils ">Civils </option>
										<option value="Engineering">Engineering</option>
										<option value="Electrical">Electrical</option>
										<option value="Maintenance">Maintenance</option>
										<option value="Manufacturing">Manufacturing</option>
										<option value="Technical Office">Technical Office</option>
										<option value="Buyer">Buyer</option>
										<option value="Design Engineer">Design Engineer</option>
										<option value="PURCHASING">PURCHASING</option>
										<option value="Fitter">Fitter</option>
										<option value="Machinist">Machinist</option>
										<option value="Software Engineer">Software Engineer</option>
										<option value="Mechanical Engineer">Mechanical Engineer</option>
										<option value="Shipping">Shipping</option>
										<option value="Mechanical Engineering">Mechanical Engineering</option>
										<option value="Quality ">Quality </option>
										<option value="IT">IT</option>
										<option value="Quality">Quality</option>
										<option value="CAD">CAD</option>
									</select>
								</td>
								<td>
									<select id="locationSelect" name="location">
										<option></option>
										<option value="B">B</option>
										<option value="TN">TN</option>
										<option value="SO">SO</option>
										<option value="BN">BN</option>
										<option value="W">W</option>
										<option value="PO">PO</option>
										<option value="RH">RH</option>
										<option value="GU">GU</option>
										<option value="SW">SW</option>
										<option value="KG">KG</option>
										<option value="RG">RG</option>
									</select>
								</td>
								<td>
									<input id="skillsInput" name="skills" />
								</td>
								<td>
									<input type="submit" value="Search" style="width: auto;"  />
								</td>
							</tr>
						 </table>  
					</form>	
					<br /> 
					<br />         
					<table id="vacanciesTable" class="section" style="display: block">
						<col style="width: 11ex" />
						<col style="display: none" />
						<col style="width: 30ex; font-weight: bold;" />
						<col style="width: 9ex" />
						<col style="width: 12ex" />
						<col style="width: 13ex" />
						<col style="width: 9ex" />
						<col style="width: 7ex" />
						<col style="width: 9ex" />
						<col style="display: none" />
						<tr>
							<th>Date</th>
							<th>Category</th>
							<th>Title</th>
							<th>Ref #</th>
							<th>Perm/Temp</th>
							<th>Salary</th>
							<th>Postcode</th>
							<th>Details</th>
							<th>Send us your CV</th>
							<th>Description</th>
						</tr>
						<tr>
							<td>12/08/2006</td>
							<td>Electronics</td>
							<td>Field Service Engineer - Birmingham</td>
							<td>JC65</td>
							<td>Permanent</td>
							<td>20k - 24k +car</td>
							<td>B</td>
							<td><a href="JC65.htm">View</a></td>
							<td><a href="mailto:Justin@jarvisbentley.com?subject=Application for job JC65">Apply</a></td>
							<td>Field Service Engineer - Birmingham<br/>A vacancy has arisen for a Field Service Engineer to join a worldwide supplier of Gas Analysis Solutions. To work within the Customer Service Department, operating around East Birmingham.<br/>The principal responsibility is to provide field service to customers to a high standard in order to generate customer satisfaction and profitable service revenues.<br/><br/>As the successful candidate you will have a minimum of 2 years experience in a similar role within the analytical/instrument environment, an HNC/HND in Electronics or other similar industry Diploma.<br/><br/> In return you will receive a salary between 20k and 24k + car + benefits<br/>To apply for this position contact Justin on 01903 263344, or send your cv to Justin@jarvisbentley.com<br/><br/></td>
						</tr>
						<tr>
							<td>03/08/2006</td>
							<td>Mechanical</td>
							<td>Design Engineeer</td>
							<td>JP116</td>
							<td>Permanent</td>
							<td>24k - 30k</td>
							<td>TN</td>
							<td><a href="JP116.htm">View</a></td>
							<td><a href="mailto:james@jarvisbentley.com?subject=Application for job JP116">Apply</a></td>
							<td>Design Engineer<br/><br/>Our Client has 40 years specialist experience in design, manufacture and supply of equipment for high and ultra high vacuum applications and are looking to employ a Design Engineer, as they are increasing the market focus in product design.  The main skills that our Client is looking for are as follows.<br/> Product development, including design, feasibility study, detailed drawings and customer collaboration.<br/> Cost-Out, identifying cost-out opportunities and support sourcing.<br/> Technical Innovation and Competitive Position<br/> Engineering Changes<br/> Custom Design<br/> Quality<br/> People & Budgets<br/> Communication<br/> Metrics<br/><br/>The type of Candidate our Client is looking for will be AutoCAD literate, with a mechanical design degree or similar, 2 to 3 years experience in mechanisms and have Project Engineering experience. In return our Client can offer a very competitive salary of between 24k to 30k plus benefits. If you are interested in applying please forward your CV by email stating full contact details, availability and salary requirements. Alternatively contact James Paskett on 0845 650 1720 to discuss suitability   <br/></td>
						</tr>
						<tr>
							<td>12/08/2006</td>
							<td>BuildingServices</td>
							<td>Electrical Engineer  Building Services</td>
							<td>JC82</td>
							<td>Permanent</td>
							<td>Negotiable</td>
							<td>SO</td>
							<td><a href="JC82.htm">View</a></td>
							<td><a href="mailto:Justin@jarvisbentley.com?subject=Application for job JC82">Apply</a></td>
							<td>Electrical Engineer  Building Services<br/><br/>An exciting opportunity for an experienced Electrical Engineer to join a successful company in the field of Building Services, based in Hampshire.<br/>The job holder shall be responsible for Electrical design work, project coordination, support of junior electrical staff, assisting the Members in promoting the Practice.<br/> <br/>The job holder will be required to:-<br/><br/>1. Attend project meetings with Clients and other Design Team Members, Contractors etc.<br/>2. Carry out condition surveys, feasibility studies, report writing etc.<br/>3. Carry out site surveys for projects, to obtain all relevant information required for carrying out scheme design.<br/>4. Carry out detailed scheme designs enabling competitive tenders to be obtained for the works.<br/>5. Write specifications for the works.<br/>6. Correspond with other design team members and the Client on technical issues.<br/>7. Carry out calculations, both manual and by using computer based systems.<br/>8. Provide budget costings as and when required.<br/>9. Comment upon tenders received for projects.<br/>10. Comment upon Contractors installation/working drawings.<br/>11. Answer Contractors queries during construction/installation period.<br/>12. Attend site progress meetings as and when required, together with monitoring Contractors standards of workmanship and materials, together with progress against overall construction programme.<br/>13. Prepare list of snagging/outstanding works at appropriate time(s)
7
Contributors
13
Replies
14
Views
7 Years
Discussion Span
Last Post by theighost
0

>> Line 20/27 - You can not use reserved words as a variable name - this includes "name". Change it into "name1" or something

If it still doesn't work, try debugging it by placing various alerts in it, so you can see where it goes wrong.

~G

0

I've done some debugging and i found that it is not taking the switch. I did some alerts for the vars and just printing "hello" and ift did not go through the switch.

I've changed the vars such as name and valuet o name1 and value1.

The line i think the problem occurs is here but i wouldn't swear to that

if(curRow.style.display == "none") continue;

I put an else and an alert after the continue and it printed the alert.

I don't know if this is the correct way to do it but i put

alert(curRow.style.display.value)

and it printed out "undefined"

Does that mean it has no value? If that is the case then the switch won't be taken.

0

Are you sure that your Firefox isn't disabling JS scripts ? Also make sure you put an error dealer in your code like all scripts does to deal with different types of browsers.

Online People Magazine

Javascript isn't disabled in Firefox as I have to use JS for google maps on a site i'm developing

What is this about an error dealer? I don't know enough about javscript to know what that is and how i do it

0

It's not an exact dealer for errors, it just make conditions, mean If the user is using Firefox, he execute a different code that the one executed to IE and Chrome !

0

That makes sense and i should be able to do that but what about the problem with this code. Is there something i need to change so it workins in firefox?

0

in ff document id-s usually have to be correctly formed searchForm.locationSelect.value = value; usually should be document.searchForm.locationSelect.value = notreservedword;

Edited by almostbob: n/a

0

I tried that document. thing the other day and it made no difference.

I have made some changes all as suggested but it still doesn't work

updated code with suggested changes

function query() {
    var vacancyRows = document.vacanciesTable.tBodies[0].rows;
    var count = vacancyRows.length - 1;           
      
    var query = document.location.search;
        
    //-- If there isn't a query --//
    if(query == "" || query == "?category=&location=&skills=") {
        
        //-- Do nothing! --//
    }   
    //-- Else --//
    else {	
        query = query.substr(1);
        var queryParts = query.split("&");
          
        for(var i = 0; i < queryParts.length; i++) {			
            var nameAndValue = queryParts[i].split("=");
            var name1 = nameAndValue[0];
            var value = nameAndValue[1].replace("/\+/g", " ");
			
            for(var rowIndex = 1; rowIndex < vacancyRows.length; rowIndex++) {           
				var curRow = vacancyRows[rowIndex];
				if(curRow.style.display == "none") continue;
				switch(name1) {				
					case "category" :{
						//-- Put value in category select --//
						document.searchForm.categorySelect.value = value;
						//-- Hide rows that don't match this category --//
						if(curRow.cells[1].innerText.indexOf(value) == -1) {
							curRow.style.display = "none";
							count--;
						}
						break; 
					}
					case "location" :{
						//-- Put value in location Select --//
						document.searchForm.locationSelect.value = value;
					
						//-- Hide rows that don't match this location --//
						if(curRow.cells[6].innerText.indexOf(value) == -1) {
							curRow.style.display = "none";
							count--;
						}
						break;
					}
					case "skills" :{
						//-- Put value in skills input --//
						document.searchForm.skillsInput.value = value;	
						//-- Hide rows that don't match these skills --//
						if(curRow.innerText.toLowerCase().indexOf(value.toLowerCase()) == -1) {
							curRow.style.display = "none";
							count--;
						}
						break;
					}
				}	
			}
        }
          
		document.vacanciesTable.style.display = "block";
		
		document.messageDiv.style.display = "block";
		if(count == 0) document.nomatchesElem.style.display = "block";
		else document.matchesElem.style.display = "block";
    }
}
0

One thing immediately jumps out at me. Case clauses don't need to be { bracketed }.

Normal structure of a switch-case block statement is as follows:

switch(x) {
	case 1:
		.....
		.....
		break;
	case 2:
		.....
		.....
		break;
	case 3:
		.....
		.....
		break;
	default:
		.....
		.....
}

It's possible that IE doesn't object to curly braces, while FF does.

Airshow

0

Another thing in the same switch-case block.

"skills" is different from the other two cases - In the line if(curRow.innerText.toLowerCase().indexOf(value.toLowerCase()) == -1) { , curRow.innerText... doesn't look right to me. The other two cases use curRow.cells[[I]n[/I]].innerText... .

This doesn't help explain differences between FF and IE, but may also be worthy of examination.

Airshow

Edited by Airshow: n/a

0

The easiest way to check whether your js is coded the way FF can interpreted is to use Firebug. From what I tested, document.vacanciesTable may be your problem. I am not sure you can directly access a HTML element that way in FF. You should use an ID or pass in a HTML element to the function in order to be sure that both IE and FF will understand HTML element. Some malfunction could occur in cross browser if you try to access a HTML element directly in your function.

0

I did notice that and thought it looked odd but not being used to JS i thought it must be there for a reason.

Took those out but it made no difference.

0

well my advice always is, use Alert from the top to the bottom, JS can be a real pain in the butt, and the error might be something really small,and it could take you days to find out.

try putting alerts from the start of the function until the end.

use commenting also to see which lines are making problems //

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.