0

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.

Improve this question
7
  • 1
    wich version of IE are you using? Also post your HTML Code. Commented Apr 25, 2014 at 8:35
  • Internet explorer 8 and 11 i've tried it in (so assuming in between versions as well) I've updated the original question. Thanks :-) Commented Apr 25, 2014 at 8:52
  • Anyway i think you should refresh the cart each time View Cart is clicked. AS you can see here jsfiddle.net/6GVBz/17 it works on Internet Explorer 10. Can you check the fiddle on your IE? Commented Apr 25, 2014 at 9:13
  • can you post too the HTML Response of /products/show_cart? Commented Apr 25, 2014 at 9:46
  • @Phx - thanks for the suggestion. Yeah it works fine if i add it to the click event, i'd already tried that but the small delay each time you open the cart put me off a bit... Not sure how to get the HTML response from Internet explorer (F12 options not very clear) but this is it from firebug - <p class="cart_empty">You don't have any items yet.</p> - It's just a basic HTML page. Commented Apr 25, 2014 at 10:01

1 Answer 1

Reset to default
4

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Sorry Phx, didn't see the alert that you had replied again! Thinks has nailed it, thanks very much :-)
This is a working solution, but it should be enough to load the jQuery migrate plugin in <=IE9, which is created for exactly this purpose.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.