Log in

View Full Version : Resolved jQuery not working in Fire Fox


Kage Kazumi
10-15-2012, 10:31 AM
My 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 -


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

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

$(".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:



alert("Hello world!");


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



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

$(".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:


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


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


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



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


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


// 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/side/selects_jq/mockup-1.htm

Almost has to be something with your server.
Kage Kazumi
10-15-2012, 07:20 PM
But why would it affect Fire Fox only if that is the case. Because it isn't even working in Fire Fox locally.
Kage Kazumi
10-15-2012, 07:44 PM
The people at the jQuery message board found it:

type="text/jscript" and it should have said type="text/javascript".
jscheuer1
10-15-2012, 07:54 PM
I should have seen that, makes perfect sense.
But when I told you to change to:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

That should have fixed it, I guess you just pasted in the URL to your old script tag.
Kage Kazumi
10-15-2012, 08:20 PM
I should have seen that, makes perfect sense.
But when I told you to change to:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

That should have fixed it, I guess you just pasted in the URL to your old script tag.

Yes, I just copied the URL.
Kage Kazumi
10-16-2012, 03:41 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 -

$(".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).

When I add that code it breaks the jQuery. Here is where I am putting it (in case I'm putting it in the wrong location):



var selection = $(this).val(); // get it's value
$(".tb-container').show();
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 (selection == 'Linux') { // if linux is selected from OS
$(".tb-container:not(:has(img.linux))").hide(); // Hide all DIVs that do not contain img.linux
}


It also errors if I put it before:



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

It says there is a syntax error.
jscheuer1
10-16-2012, 04:19 AM
I thought it was fixed. Is there some other problem in Firefox?
Kage Kazumi
10-16-2012, 04:34 AM
keyboard1333 suggested this (http://www.dynamicdrive.com/forums/showthread.php?p=284608#post284608) in this topic. However, it is giving me an error.

I believe he was telling me to set the choices up so when I picked one like WINDOWS and then select MAC it will reset the .tb-containers and then filter for MAC.
jscheuer1
10-16-2012, 07:02 AM
Oh, you mean like this:

http://home.comcast.net/~jscheuer1/side/selects_jq/mockup-2.htm

?
Kage Kazumi
10-16-2012, 08:37 AM
Oh, you mean like this:

http://home.comcast.net/~jscheuer1/side/selects_jq/mockup-2.htm

?

Yes, however, your code is completely different then what I am using. In fact I looked at it and I was like: O_o

*I hate being a beginner...
jscheuer1
10-16-2012, 03:50 PM
I just took another look at the code and it can be even more concise:


jQuery(function($){
var activefilters = {}, $tbContainers = $('.tb-container');
$('select[id^="filterBox"]').change(function(){
activefilters[this.id] = this.value? '.' + this.value.toLowerCase() : '';
$tbContainers.show();
$.each(activefilters, function(k, v){
if(v){$tbContainers.not($tbContainers.has(v)).hide();}
});
}).trigger('change');
});

I've updated my live demo with it. If there's anything about it you don't understand, let me know, I'll try to explain.
Kage Kazumi
10-16-2012, 06:48 PM
Your mock up works to some degree, but not 100%.

Example: I can choose LINUX and it only displays 1 container with Linux when their are more. The same with the FREE filter. IS their a way we can make it more specific? Like what I have, but it will reset the tb-container if you choose a new one.

I'll mess around as well because having the issue handed to me won't help me learn. I'll give it a shot and if I can't get it I'll show what I have (if anything).
jscheuer1
10-16-2012, 07:40 PM
I get three with linux. If you also have 3D though, there's only one. If you also have Commercial, there's none. But if you switch from 3D back to Type or to 2D, there's 2.

Some browsers when they're refreshed remember the previous selections, that might be part of it.

It's possible that a certain sequence of events could result in the filter box showing one set of filters and the display not following that. But I haven't found any. If you do, please tell me which browser and which exact sequence of events I have to follow to get the erroneous results.
Kage Kazumi
10-16-2012, 07:56 PM
I found the issue. keyboard1333 was correct, but he had a typo in his code:



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


Should be:



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


Thanks fir the help. It now works as suggested.
jscheuer1
10-16-2012, 08:25 PM
Oh, I thought you meant my demo. In it I also correct the invalid HTML and update the styles and HTML a bit too so that the items display correctly visa vis their background and evenly no matter how many are shown, and the logo bit is positioned correctly regardless of window width.