Why does this javascript work in IE and not Firefox

[AdRock]

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

[Graphix]

>> 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

[AdRock]

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.

[CoffeeCupBreak]

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

[AdRock]

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

[CoffeeCupBreak]

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 !

[AdRock]

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?

[almostbob]

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

[AdRock]

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";
    }
}

[Airshow]

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

[Airshow]

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

[Taywin]

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.

[AdRock]

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.

[theighost]

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 //