The following works in Firefox, but breaks in IE7 & 8:
$("#my-first-div, #my-second-div").hide();
so I have to do this:
$("#my-first-div").hide();
$("#my-second-div").hide();
Is this normal?
EDIT: ok, my actual real-life code is this:
$("#charges-gsm,#charges-gsm-faq,#charges-gsm-prices").html(html);
and my error is this
( IE8): Message: 'nodeName' is null or not an object
Line: 19 Char: 150 Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
Hmm, I can't seem to duplicate the problem in IE7 (both forms work fine for me). How does it break? Does it not hide either, or does it only hide the first one?
Have you tried it without a space after the comma? The examples given in the specification have no space.
Should work, according to the documentation. There's an outside chance you need to remove the trailing space character after the comma.
The location you specify states:
Message: 'nodeName' is null or not an object
Line: 19 Char: 150 Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
That particular piece of jquery is:
nodeName:function(elem,name){
return elem.nodeName&&elem.nodeName.toUpperCase()==name.toUpperCase();
}
which is itself a closure created for the call to jQuery.extend(). So I would like to ask, if you do a "View source" or its IE equivalent, are there any other occurrences of the string "nodeName" that could be interfering with the jQuery one.
Can you also test the following by creating an xx.html file and opeing it in IE7/8? It works fine under Firefox 3 in Ubuntu, with or without the spaces following the commas in the selector.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
$("#charges-gsm,#charges-gsm-faq,#charges-gsm-prices").html("xx")
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<hr>
<div id="charges-gsm">CHARGES-GSM</div>
<div id="charges-gsm-faq">CHARGES-GSM-FAQ</div>
<div id="charges-gsm-prices">CHARGES-GSM-PRICES</div>
</body>
</html>
By chance, is one of your elements nested inside the other?
ie:
<div id="foo">
<div id="bar">
<div id="baz">
</div>
</div>
If so, you may be experiencing a pointer problem, where IE may have freed bar prior to you trying to work out that its a div. The behaviour of
$("#foo,#bar,#baz").html("xx");
In this secenario is:
However, if at phases 2 & 3, #bar and #baz no longer exist, you are going to have a little fun. ( it doesn't matter if xx happens to contain a copy of #bar and #baz, they'll likely be different objects, and the initial objects that you're replacing have already been captured, just are no longer in the DOM :/ )
You can possibly suppress ( yes, gah, awful idea ) this error by encapsulating the procedure in a try/catch
try {
$("#foo,#bar,#baz").html("xx");
}
catch( e )
{
/* DO NOTHING D: */
}
But this is your last resort, right after getting some sort of JS debugger binding IE and tracing the error to its core.
If you really dont get the error, try to debug it with the help of this article: http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/