CODEWITHSUNDEEP
jquerycross-browser
Chris J Allen
Chris J Allen

Reputation: 19207

jQuery CSS selectors in IE

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

Upvotes: 2

Views: 7455

Answers (5)

Kent Fredric
Kent Fredric

Reputation: 57354

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:

  1. Replace #foo with xx
  2. Replace #bar with xx
  3. Replace #baz with xx

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.

Upvotes: 0

paxdiablo
paxdiablo

Reputation: 881403

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>

Upvotes: 2

Bobby Jack
Bobby Jack

Reputation: 16018

Should work, according to the documentation. There's an outside chance you need to remove the trailing space character after the comma.

Upvotes: 0

Garry Shutler
Garry Shutler

Reputation: 32698

Have you tried it without a space after the comma? The examples given in the specification have no space.

Upvotes: 0

Adam Bellaire
Adam Bellaire

Reputation: 110489

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?

Upvotes: 1

Related Questions