Develop Reference

Code works fine in JSFiddle but not in my browser

I'm working on multiple dropdown menus to be used for ranking. I found this excellent code from stackoverflow:
How to prevent duplicate values in multiple dropdowns using jQuery
It works nicely on JSFiddle, but I can't seem to get the code to work offline in my Chrome or IE browser. Can someone help?
<script type="text/javascript">
$(document).ready(function() {
$(".go").change(function() {
var selVal = [];
$(".go").each(function() {
selVal.push(this.value);
});
$(this).siblings(".go").find("option").removeAttr("disabled").filter(function() {
var a = $(this).parent("select").val();
return (($.inArray(this.value, selVal) > -1) && (this.value != a))
}).attr("disabled", "disabled");
});
$(".go").eq(0).trigger('change');
});
</script>

It depends on what "doesn't work" means for you. :) Can you see any errors on your console? Can you see all the 5 selects? Did you copy correctly the codes? The JSFiddle code works perfectly for me with 2.1.4 jQuery.

jQuery load file function triggers only in one situation

My jQuery script below works perfectly on all devices and PC except Windows Phone. I think it's a pretty standard coding but it gives me a problem. The #feed with the engine.php in it, does not update when I press refresh. ( only on Windows Phone)
A workaround I found is that if I cap +=1; on the #refresh click function then it works.
I am using the latest jQuery.
How can I fix this? Is there anything special about Windows Phone to make use of it ? It seems that there is something like cache, because when I refresh the page it does not chaneg. When I close the tab and open it again it takes me to the updated page.
<script type="text/javascript">
var cap = 18;
$(function() {
function loadfeed() {
$('#feed').load('engine.php?cap=' + cap, function() {
$("#loadmore").val('Show More');
});
}
loadfeed();
$("#refresh").click(function() {
loadfeed();
});
});
</script>
<div id="nav_bar">
refresh
</div>

jQuery .click(function() not working in IE7

Ok, I've looked through all the questions regarding this and I've tried several of the suggestions to no avail, so I'm hoping someone can shed more light on my problem.
OUTLINE OF THE ISSUE:
I'm running two Nivo sliders in a tabbed box. The code I have works in all the normal browsers, but some reason IE7 doesn't like the code I have and won't register the .click(function(e) when the tab is selected.
HERE IS THE CODE:
Part 1 - this loads the slider gallery on page load on the first tab:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Part 2 - this is one IE7 has an issue with. This is for the other tabs so the gallery won't load until the tab is clicked. For some reason IE7 doesn't like this:
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
$('#gallery1').nivoSlider();
return false;
});
});
</script>
THIS IS WHAT I'VE TRIED SO FAR:
I've tried using the $("#ClickMe").live('click', function() which didn't work as well as the $("body").delegate("p", "click", function() which were the two main solutions I saw people using to get this to work in IE7. When I was debugging I also set an alert to make sure IE was registering the click function:
$('#target').click(function() {
alert('Handler for .click() called.');
});
This had no effect. When you clicked on the tab, it didn't alert which confirmed the click function wasn't working. I've spent quite a while digging around for a solution to this and am plum out of resources. I thought it might something with the code, or some other work around - most of the sites I referenced were from circa 2006 or 2007. Not that JS has changed that much, but I was hoping maybe someone found a simplier solution in the last 4 years.
any help would greatly be appreciated.
D

Without seeing what you're actually working with, possibly you could try preventDefault() instead of return false;
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
e.preventDefault();
$('#gallery1').nivoSlider();
});
});
</script>

I am guessing it is an error before that, that is causing the issue. Are there any errors on the page? Have you tried putting a simple alert('test') where the click function is set? If so, does it work?
EDIT:
From the other things you reference which I see when I did a search is the person was using IETester and it worked fine in regular IE7 and IE8. Are you using a real version of IE7?

The best solution I found was to simply load all the galleries on page load using the:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
It does add some time to the page load time - just about a 1/2 second more, but it solves the problem in IE7.
Thanks for everybody's help in this.
D

I just ran into this same bug, none of the other answers here were satisfactory. I solved this myself by using
$('body').click(function() { ... });

Any ideas as to why this jQuery does not work?

I have an HTML page where a click event is captured and hides #testContent. I put the HTML and Javascript in a jsFiddle here: http://jsfiddle.net/chromedude/VSXY7/1/ . For some reason in the actual page the .click() does not work, but in the jsFiddle works. Does anybody have a clue why this would be?
I have ensured that the jQuery and Javascript file were both correctly attached and show up in the Webkit Inspect and Firebug. I am not getting console errors either. It's quite confusing.
UPDATE:
You can check out the actual page here: http://blankit.co.cc/test/77/

It looks like your javascript is not loaded correctly.
<script type="text/javascript" src="../../includes/jquery.js"></script><script type="text/javascript" src="../../includes/navbar.js"></script><script type="text/javasript" src="../../includes/study.js"></script>
You can put some alert() function inside your javascript file to make sure it is loaded correctly.

Your script tag has a typo in the type change it to text/javascript you are missing a letter.
Change study.js from
$(function(){
console.log('hello');
alert('hello');
/*var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#studyTestLink').click(function() {
$('#testContent').hide();
alert('hello');
});*/
});
to
$(function(){
$('#studyTestLink').click(function() {
var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#testContent').hide();
alert('hello');
});
});

I added your code to a page (using jquery 1.5.2) and it works fine. Don't you have any other code that could be breaking it?

Calling two types of jquery - issue in IE

Firefox works fine, Opera is great and Chrome works well also. IE is the issue. It seems to be ANY version of IE.
The site is http://s91532.gridserver.com and no matter where you click, it brings down our javascript menu from the top.
When you hover over the images it shows you the correct path and everything but when you click it just drops down the Ministry Index dropdown
I have removed the offending jquery which was an older version and am now just calling the site.js which is the code below:
jQuery.noConflict();
jQuery(document).ready(function(){
$('p#minguide-link a').click(function(){
if ($('#index-wrapper').is(':hidden')) {
$('#index-wrapper').slideDown('medium');
$('p#minguide-link a').addClass('down');
return false;
} else {
$('#index-wrapper').slideUp('medium');
$('p#minguide-link a').removeClass('down');
return false;
}
});
var group_width = $('li#nav_groups ul').width();
var group_adj = ((group_width*-1)/2)+79;
var care_width = $('li#nav_care--serve ul').width();
var care_adj = ((care_width*-1)/2)+79;
var sermon_width = $('li#nav_sermons ul').width() + 2;
var sermon_adj = ((sermon_width*-1)/2)+79;
$('li#nav_groups.current ul').css({"left":"auto", "margin-left":group_adj});
$('li#nav_care--serve.current ul').css({"left":"auto", "margin-left":care_adj});
$('li#nav_sermons.current ul').css({"left":"auto", "margin-left":sermon_adj});
});
With that alone being called nothing happens. It seems that it is now fixed in IE from what I can tell.
Now how do I get site.js to be called correctly so the menu drops down correctly.

Matthew, replace the jquery 1.3 script tag for the jquery 1.4 script tag, make sure all other script tags are placed AFTER the jquery script tag ;)

I would echo the strong recommendation that you make everything work with the up-to-date version of the library, but you might try this: include the old jQuery, then right after that line add this:
<script>
jQuery.noConflict();
</script>
And then include a modified site.js file, changed as follows:
jQuery(function($) {
// existing code
});

Without any useful information (other than the link), all I can do is point you to this article:
http://codex.wordpress.org/Function_Reference/wp_enqueue_javascript/
You should be using 1.4.2. I've never ever had a single problem with it. You're calling conflicting versions of jQuery, so just use the better one.
Also, site.js isn't using jQuery in compatibility mode. You should change that first line to
jQuery(document).ready(function(){
not
$(document).ready(function(){
EDIT
Your site is running in no-conflict mode. You have to get rid of that $ at the beginning of site.js. It's throwing an error before anything happens. To fix that, all you need to do is change the very first $ to jQuery. All the other $s are fine, though.
Here's site.js in jQuery 1.4.2. Just replace the whole file's contents with this:
jQuery(document).ready(function() {
$('p#minguide-link a').click(function(){
$('#index-wrapper').slideToggle();
$('p#minguide-link a').toggleClass('down');
return false;
});
var group_width = $('li#nav_groups ul').width();
var group_adj = ((group_width*-1)/2)+79;
var care_width = $('li#nav_care--serve ul').width();
var care_adj = ((care_width*-1)/2)+79;
var sermon_width = $('li#nav_sermons ul').width() + 2;
var sermon_adj = ((sermon_width*-1)/2)+79;
$('li#nav_groups.current ul').css({"left":"auto", "margin-left":group_adj});
$('li#nav_care--serve.current ul').css({"left":"auto", "margin-left":care_adj});
$('li#nav_sermons.current ul').css({"left":"auto", "margin-left":sermon_adj});
});
Additionally, I really suggest you look up jQuery's API. It's super easy to learn and very intuitively organized/layed out. And searching is a breeze.