Page 1 of 1

JQuery and Internet Explorer

Posted: Wed Feb 07, 2007 6:55 pm
by Luke
It comes as no surprise to be that I am running into issues getting JQuery to work properly in IE because IE is the debal! Anyway, it just seems strange that there are absolutely no javascript errors in firefox, yet in internet explorer, not only does my javascript not work, it produces errors! Does anybody know if there are known issues between jquery and internet explorer? Why is this happening?? Why is IE such a biiiootch??? :evil:

Code: Select all

  $(function(){
      $('a.tab')
      .removeAttr('href')
      .addClass('hand')
      .click(function(){
          var class = $(this).parent().attr('class');
          $('a.tab').removeClass('active');
          $(this).addClass('active');
          $('.tab_content').hide();
          $('#tab_content_' + class).show('slow');
      })
  });

Code: Select all

                    <ul class="tabs">

                        <li class="description"><a href="/pc/mvt:global:Category_Code;/mvt:global:Product_Code;/description/" id="tab_description" class='tab <mvt:if expr="g.display_tab EQ 'description'"> active </mvt:if> '>Description</a></li>

                        <li class="specs"><a href="/pc/mvt:global:Category_Code;/vt:global:Product_Code;/specs/" id="tab_specs" class='tab <mvt:if expr="g.display_tab EQ 'specs'"> active </mvt:if> '>Specs</a></li>

                        <li class="reviews"><a href="/pc/mvt:global:Category_Code;/mvt:global:Product_Code;/reviews/" id="tab_reviews" class='tab <mvt:if expr="g.display_tab EQ 'reviews'"> active </mvt:if> '>Reviews</a></li>

                    </ul>

                <div id="tab_content_container">

                    <div id="tab_content_description" <mvt:if expr="g.display_tab EQ 'description'"> class="tab_content active" <mvt:else> class="tab_content inactive" </mvt:if> >

                     <div>mvt:product:descrip;</div>

                    </div> <!-- end description content //-->

                    <div id="tab_content_specs" <mvt:if expr="g.display_tab EQ 'specs'"> class="tab_content active" <mvt:else> class="tab_content inactive" </mvt:if> >
                     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum facilisis lectus eu ante. Praesent tincidunt arcu et nisl. Donec eget leo ut lacus rutrum tristique. Integer eget odio in felis posuere fringilla. Integer porta, nibh quis fringilla elementum, felis dolor mattis tortor, ut commodo nibh risus a urna. Phasellus volutpat nibh vitae massa. Fusce at purus. Nullam porta, nisi vitae suscipit faucibus, massa augue elementum pede, eu dictum elit magna at neque. Sed quis sapien. Vivamus consectetuer, tortor quis vehicula sagittis, orci velit consequat mi, ac dignissim augue magna et dolor. Ut cursus tortor et nulla. Aliquam erat volutpat. Vivamus porta, nisi vitae aliquam mattis, neque odio porta sem, quis malesuada risus felis a lacus. Fusce volutpat rutrum purus. Proin mi velit, sagittis iaculis, lacinia ut, elementum quis, arcu. Donec feugiat.</p>
                    </div> <!-- end specs content //-->

                    <div id="tab_content_reviews" <mvt:if expr="g.display_tab EQ 'reviews'"> class="tab_content active" <mvt:else> class="tab_content inactive" </mvt:if> >

                    <mvt:if expr="NOT ISNULL l.settings:productreviews">

                        <div class="medium_high color_two">Customer Reviews</div>

                        <mvt:foreach iterator="reviews" array="productreviews">
                            <div class="product_review">
                                <div class="stars">mvt:reviews:stars; <b>mvt:reviews:title;</b>, mvt:reviews:month;.mvt:reviews:day;.mvt:reviews:year;</div>
                                <div class="reviewer small color_three">Reviewer: mvt:reviews:name; (mvt:reviews:city;, mvt:reviews:state;)</div>
                                <div class="review">mvt:reviews:review;</div>
                            </div>
                        </mvt:foreach>

                    </mvt:if>

                    </div> <!-- end reviews content //-->

                </div>
IE tells me "Expected Identifier" on line 33

PS, sorry about the HTML... it has template code in it from miva

Posted: Wed Feb 07, 2007 7:00 pm
by superdezign
Expected Identifier? Sounds like an element id handle issue. That's one of the major differences between FF and IE. DOM-compatible browsers use document.getElementById(), IE uses document.all[], and (old) NS uses document.layers[]. I'm not too keen on the inner workings of JQuery, as I always prefer to code things from scratch, but be sure you account for the difference if JQuery does not.

Posted: Wed Feb 07, 2007 10:26 pm
by JohnResig
Yep, this error has nothing to do with jQuery. What's happening is that you're using the variable name 'class', which is a reserved word in Internet Explorer. Any attempts to use that as a variable name will cause an exception to occur. It's a really lame problem, and near-impossible to debug. Hope this helps.

Posted: Wed Feb 07, 2007 10:30 pm
by Kieran Huggins
"class" is a reserved word in javascript - change your variable name and it should work ;-)

Does your editor not do syntax highlighting?
Douglas Crockford wrote:JavaScript is very heavy handed in its restrictions on reserved words. The reserved words are

abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with

Most of those words are not even used in the language. A reserved word cannot be used

1. As a name in literal object notation
2. As a member name in dot notation
3. As a function argument
4. As a var
5. As an unqualified global variable
6. As a statement label
edit: you beat me to it John ;-)

http://javascript.crockford.com/survey.html

Posted: Wed Feb 07, 2007 11:07 pm
by Luke
/me hugs kieran and john :D

Posted: Wed Feb 07, 2007 11:32 pm
by Kieran Huggins
You might recognize John as the author of our beloved jQuery - I think I speak for all of us here when I say "well done, and welcome" John!

Posted: Wed Feb 07, 2007 11:46 pm
by Luke
really? 8O

John! You're the man! I hated javascript until JQuery. I just started using it less than a week ago. It's insanely awesome. Don't take this the wrong way, but I love you. :D

Posted: Thu Feb 08, 2007 8:55 am
by JohnResig
Haha, no problem guys. This thread just popped up on Technorati (no idea why) so I just decided to swing on by.

Also: We're planning on setting up a forum for jQuery very very soon, it'll probably replace the jQuery mailing list (I'm sure you guys will appreciate this). Be sure to let me know if you have any more questions!

Posted: Thu Feb 08, 2007 9:34 am
by Kieran Huggins
@NSG: I think between my sig (just noticed that...) and your professions of undying love we've managed to completely freak out our newest member...

@John: if you're still here, we're generally harmless. And NSG is all the way on the left coast, if that's comforting in any way.... (I know it comforts me ;-))

Posted: Thu Feb 08, 2007 10:27 am
by Luke
yea I'm thinking of buying your book too, John... looks great. Thanks again.