Question

I changed the entire question because I didn't provide enough info's at the first run: thanks goes to @Sergio.

There are alot of things not working in IE.

When I do addEvent('domReady').... It's even more bad(it doesn't gets executed but if I refresh the page... it works).

Is there a proper way to handle that IE stuff in MooTools?

note: working on every browser on the whole planet except IE*

edit: added the complete source code of ajax cart. This code it correct, it's just for understanding purpose only: ajax_cart.js

var AjaxCart = new Class({
    Implements: Options,
    cartDiv: null,
    options: {
        elem_id: 'shopping-cart-icon',
        event: 'mouseenter',
        url: 'changed_url_but_it's_correct='+(new Date().getTime())
    },
var AjaxCart = new Class({
    Implements: Options,
    cartDiv: null,
    options: {
        elem_id: 'shopping-cart-icon',
        event: 'mouseenter',
        url: '/changed_url_but_it's_correct='+(new Date().getTime())
    },
var AjaxCart = new Class({ 
    Implements: Options,
    cartDiv: null,
    options: {
        elem_id: 'shopping-cart-icon',
        event: 'mouseenter',
        url: '/changed_url_but_it's_correct'+(new Date().getTime())
    },
    initialize: function() {
        var cart = this;
        this.elem = $(this.options.elem_id);
        if (this.elem) {
            this.elem.addEvent(this.options.event, function() {
                cart.viewCart();
            });
        }
    },
    getCart: function() {
        var cart = this;
        var myHTMLRequest = new Request.HTML({
            url: cart.options.url,
            onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
                //console.log(responseHTML);
                if (!cart.cartDiv) {
                    cart.cartDiv = new Element('div', {'class':'ajax-cart'});
                    cart.cartDiv.fade('hide');
                    cart.cartDiv.inject(cart.elem);
                    cart.cartDiv.addEvent('mouseleave',function() {
                        this.fade('out');
                    });
                }
                cart.cartDiv.innerHTML= responseHTML;
                cart.cartDiv.fade('in');
            },
            onFailure: function(xhr) {
                console.log(xhr.responseText);
            }
        }).get();
    },
    viewCart: function() {
        if (this.cartDiv) {
            this.cartDiv.fade('in');
        } else {
            this.getCart();
        }
    }
});

This code works on every browser except IE, only after refreshing the page, it works. in index.html

   if(Browser.ie) {

                var ajaxCart;
                window.addEvent('load', function() {
                  ajaxCart = new AjaxCart({'elem_id':'shopping-cart-icon'});
                });
            } else  {
            var ajaxCart;
                window.addEvent('load', function() {
                ajaxCart = new AjaxCart({'elem_id':'shopping-cart-icon'});
            });
            }
Was it helpful?

Solution 2

I guess there is no solution so I had to find a workaround for this. What I did:

Since my problems were solved by refreshing the page, I did this in meta tag.

<meta http-equiv="Expires" content="-1" />

It might help someone else, when it comes up to fixing IE refreshing bugs.

OTHER TIPS

In some versions of Internet Explorer (ie. IE6) a script tag might be executed twice if the content-type meta-tag declaration is put after a script tag.

The content-type should always be declared before any script tags.

See here http://mootools.net/docs/core/Utilities/DOMReady

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top