MooTools event not triggering in IE9 (only after refresh)

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'});
            });
            }

MooTools is not the problem here i feel. Can you be more precise and post the code you have? Btw, try this: __http://jsfiddle.net/D9nen/show__ — Sergio, Mar 26 '14 at 14:14
Nice that you added more specific info. Have 2 more questions: Which IE is broken (is it just IE11?) question2: which Mootools version are you using? — Sergio, Mar 26 '14 at 15:18
MooTools Version : mootools-core-1.4.5-full-compat.js and it's just not working in IE8, probably in any other IE Version < 9, haven't tried it yet. — AME, Mar 26 '14 at 15:22
these declarations and syntax in ajax_cart are bad (var statements after , is a typo, i take it?). also, why browser sniff at all? you are not running under `domready` but `load` anyway. since you don't re-use the instance, why bother saving a ref, your constructor fn does all the work anyway. the code you have posted does not show your script tags and which bit/where in the code it runs the instantiation. it also does not show what affects the dom or if something may be prevening it from being released for manipulation. also, do you get any exceptions? — Dimitar Christoff, Mar 26 '14 at 17:38
also. Implements normally expects an array. And you don't need Options class as you don't actually use `this.setOptions(options);` - i did some refactors and it works fine. http://jsfiddle.net/dimitar/X5Q6j/ — Dimitar Christoff, Mar 26 '14 at 18:00

score 1 · Answer 1 · answered Mar 26 '14 at 13:28

1

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

answered Mar 26 '14 at 13:28

Bud Damyanov

30,171
6
44
52

Does this effect IE9? – AME Mar 26 '14 at 13:49

score 0 · Accepted Answer · answered Mar 26 '14 at 16:32

0

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.

answered Mar 26 '14 at 16:32

AME

2,262
6
19
39

giving me -1 for the only answer which worked out to meet the deadline ... well done sir – AME Apr 01 '14 at 12:19

MooTools event not triggering in IE9 (only after refresh)

2 Answers2