jQuery not working in Fire Fox

**Kage Kazumi** · 10-15-2012, 10:31 AM

My code:

HTML Code:

$(window).load(function() {
    $('#filterBox1').change(function() { // when value of filterBox1 changes
		var selection = $(this).val(); // get it's value
		if (selection == 'Windows') { // if windows is selected from OS
             $(".tb-container:not(:has(img.windows))").hide(); // Hide all DIVs that do not contain img.windows
        }
		if (selection == 'Mac') { // if mac is selected from OS
             $(".tb-container:not(:has(img.mac))").hide(); // Hide all DIVs that do not contain img.mac
        }
    });
});

And yes JavaScript is enabled in Fire Fox. http://www.zanime.net/test

**keyboard** · 10-15-2012, 10:48 AM

Try -

Code:

$(window).load(function() {
    $('#filterBox1').change(function() { // when value of filterBox1 changes
		var selection = $('#filterBox1 option:selected').val(); // get it's value
		if (selection == 'Windows') { // if windows is selected from OS
             $(".tb-container:not(:has(img.windows))").hide(); // Hide all DIVs that do not contain img.windows
        }
		if (selection == 'Mac') { // if mac is selected from OS
             $(".tb-container:not(:has(img.mac))").hide(); // Hide all DIVs that do not contain img.mac
        }
    });
});

If it still doesn't work, try replacing -

Code:

$(".tb-container:not(:has(img.windows))").hide(); // Hide all DIVs that do not contain img.windows

and

Code:

$(".tb-container:not(:has(img.mac))").hide(); // Hide all DIVs that do not contain img.windows

with an alert to see if the if() statement is firing.

**Kage Kazumi** · 10-15-2012, 11:03 AM

Thank you keyboard1333. However, the replacement code did not work in Fire Fox. I added the following alert:

Code:

alert("Hello world!");

But it did not run or do any thing. I also added it after:

Code:

$ (function () {

And it did nothing in Fire Fox.

**Kage Kazumi** · 10-15-2012, 11:23 AM

I just checked Fire Foxes Error console and it had the following:

[04:16:53.821] Error in parsing value for 'background-repeat'. Declaration dropped. @ http://zanime.net/test/css/style.css:8
[04:16:53.821] Error in parsing value for 'filter'. Declaration dropped. @ http://zanime.net/test/css/style.css:34
[04:16:53.897] ReferenceError: $ is not defined @ http://zanime.net/test/js/filter.js:3

**keyboard** · 10-15-2012, 11:51 AM

Wierd... works fine in IE...
One thing I just thought of -
I'm assuming that after you select windows, you then want to be able to select mac and for those options to show up?
If so, you need to add -

Code:

$(".tb-container').show();

at the beginning of your onchange code to make them reset each time you select an option.

It's late now, so I'll have a look at it in firefox tommorow (unless someone else does it tonight).

**jscheuer1** · 10-15-2012, 04:50 PM

I'm not sure, but it appears to be an encoding issue. However, even if it is, I would expect a different sort of error. Oh, and the order of elements in the head is all wrong. In any case, the jQuery 1.8.2 script isn't being loaded or isn't being read properly, because neither $ nor jQuery are defined. Try changing:

Code:

<head>
<script type="text/jscript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/filter.js"></script>
<script type="text/javascript" src="js/reset.js"></script>
<meta charset="UTF-8">
<title>GDU:Software List</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

to:

Code:

<head>
<title>GDU:Software List</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/jscript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/filter.js"></script>
<script type="text/javascript" src="js/reset.js"></script>
</head>

The browser cache may need to be cleared and/or the page refreshed to see changes.

If that still doesn't get it, then try using the Google hosted version of the script:

Code:

<head>
<title>GDU:Software List</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="js/filter.js"></script>
<script type="text/javascript" src="js/reset.js"></script>
</head>

Again, the browser cache may need to be cleared and/or the page refreshed to see changes.

**Kage Kazumi** · 10-15-2012, 06:05 PM

Thank you jscheuer1, but I originally had my SCRIPT tags in the proper place and it did not work either. I moved them higher up after reading a suggestion on FireFox message board. I placed them back where they go and even tried using Google host/Link and it is still doing it.

It is the same error for reset.js & filter.js:

Code:

Timestamp: 10/15/12 10:59:33 AM
Error: ReferenceError: $ is not defined
Source File: http://zanime.net/test/js/reset.js
Line: 2

Timestamp: 10/15/12 11:00:35 AM
Error: ReferenceError: $ is not defined
Source File: http://zanime.net/test/js/filter.js
Line: 3

**jscheuer1** · 10-15-2012, 06:33 PM

OK, I see the problem now. In reset.js there's a syntax problem. Apparently this isn't an error in other browsers, and not really one in Firefox either. It's not how the $(window).load() method should be used though. I fixed it in a mock up and that took care of the problem. Get rid of the red $:

Code:

// JavaScript Document
$(window).load(function($) {
    $('#reset').click(function() {
        $('#filterBox1').val('');
		$(".tb-container").show();
    });
});

It's setting $ to undefined.

The browser cache may need to be cleared and/or the page refreshed to see changes.

But there may still be a problem. It also appears as though Firefox is loading those smaller scripts before jQuery. I have no idea why that might be. If something occurs to me I will let you know. For now, try it without that extra $. That (script load order) might be an artifact of my mock up.

**Kage Kazumi** · 10-15-2012, 07:02 PM

Originally Posted by jscheuer1

OK, I see the problem now. In reset.js there's a syntax problem. Apparently this isn't an error in other browsers, and not really one in Firefox either. It's not how the $(window).load() method should be used though. I fixed it in a mock up and that took care of the problem. Get rid of the red $:

Code:

// JavaScript Document
$(window).load(function($) {
    $('#reset').click(function() {
        $('#filterBox1').val('');
		$(".tb-container").show();
    });
});

It's setting $ to undefined.

The browser cache may need to be cleared and/or the page refreshed to see changes.

But there may still be a problem. It also appears as though Firefox is loading those smaller scripts before jQuery. I have no idea why that might be. If something occurs to me I will let you know. For now, try it without that extra $. That (script load order) might be an artifact of my mock up.

I removed it a little while ago. I was testing another suggestion, but then reset.js just stopped working. So I deleted the $, but it's still not working (same errors as before).

**jscheuer1** · 10-15-2012, 07:16 PM

I see. It's really weird though, because it's working on my server:

http://home.comcast.net/~jscheuer1/s...q/mockup-1.htm

Almost has to be something with your server.