Carl Bembridge
Carl Bembridge

Reputation: 397

jQuery AJAX request not working in Internet Explorer

I'm attempting to dynamically load in a shopping cart on page load, which works great in everything other than Internet explorer (tested in version 8 and version 11). The code is:

<script type="text/javascript">
    $(document).ready(function($){
        $(".view_cart, .cart_close_button").click(function () {
            $("#cart_content").toggle();
            $(".view_cart").toggleClass('toggled');
            $(".cart_button").toggleClass('cart_pressed');
            $(".cart_header").toggleClass('show');           
            $(".cart_close_button").toggleClass('show');  
            $(".cart_total_icon").toggleClass('hide');              
            return false;                               
        });        

        $.get("/products/show_cart", function(cart){ // Get the contents of the url cart/show_cart
        $("#cart_content").html(cart); // Replace the information in the div #cart_content with the retrieved data
        });             

    });   

    $(window).load(function(){
      setTimeout(function(){ $('.page_message').fadeOut() }, 4000);
    });

</script>

HTML for the cart page (this is very basic at the moment)

<div class="content">
    <div class="grid grid-pad">
        <div class="col-1-1">
            <span class="page_message green_alert"><strong>Cart cleared.</strong> Your shopping cart has been emptied.</span>
        </div>
    </div>  

    <div class="cart_button">

        <a href="#" class="view_cart" title="View your cart"><i class="fa fa-shopping-cart fa-3x"></i> <span class="cart_header">Your Shopping Cart</span></a>
        <a href="#" title="Hide your cart" class="cart_close_button">X</a>

        <div id="cart_content">
            <p>CART STUFF GOES HERE</p>
        </div>  
    </div>
</div>

Anybody know why IE doesn't want to play ball here? It works if I add the .get code into the click function, but that causes a small delay when opening the cart box, which I want to avoid really.

Edited to add page HTML and IE versions.

Upvotes: 0

Views: 10937

Answers (1)

After all the comments i think is a jquery version problem. Just check wich version of jquery you need for IE <=8 and IE >=9. You can use this code:

<!--[if lt IE 9]>  
    <script src="jquery-1.9.0.js"></script>  
<![endif]-->  
<!--[if (gte IE 9) | (!IE)]><!-->  
    <script src="jquery-2.0.0.js"></script>  
<!--<![endif]-->

You can check this jsFiddle with diferents versions of IE: http://jsfiddle.net/6GVBz/19/show/

Check this link http://www.impressivewebs.com/loading-different-jquery-version-ie6-8/

Upvotes: 4

Related Questions