Mootools event causes infinite loop in IE7/IE8

StackOverflow https://stackoverflow.com/questions/10182381

Question

I have difficulties getting this to work in IE7 (and IE8). Its a VERY reduced part of a much more complex script. So bear in mind that the methods and the structure cannot change too much.

In IE7 I get a infinite Loop when selecting one of the Types. In FF, Chrome and IE9 it works fine. It worked with mootools 1.1 Library in IE7/IE8 great too, but since I converted it to Mootools 1.4 i got that loop problem.

Maybe some kind of event delegation change in the framework. I really don't know. Any help is greatly appreciated!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>eventz</title>
    <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script>  

    <script type="text/javascript">
        var eventz = new Class({
            options: {      

            },  
            initialize: function(options) {
                this.setOptions(options);               
                this.setup();
                this.jx = 0;    

            },
            setup: function() {
                this.makeEvents();
                // ...
            },

            makeEvents : function() {
                alert("init");

                var finputs =   $$('.trig');

                finputs.removeEvents('change');
                finputs.removeEvents('click');

                finputs.each(function(r) {                  

                    $(r).addEvents({
                        'change': function(e) {                 
                            //e.preventDefault();
                            alert(r.name);                                          

                            new Event(e).stop();                                    
                            this.refresh(r);  // this needs to stay as refresh calls some ajax stuff            
                        }.bind(this)
                    });     
                }.bind(this)); 

                // ...
            },

            // refresh is called from various methods
            refresh : function(el) {    

                if(el) {
                    // count types checkboxes
                    var ob_checked = 0;
                    $$('.otypes').each(function(r) {
                        // uncheck all if clicked on "All"
                        if(el.id == 'typ-0') {
                            r.checked = false;
                        }
                        r.checked == true ? ob_checked++ : 0 ;
                    })

                    // check "All" if non selected
                    if(ob_checked == 0) {
                        $('typ-0').checked = true;
                    }
                    // uncheck "All" if some selected
                    if(el.id != 'typ-0' && ob_checked != 0) {
                        $('typ-0').checked = false;
                    }

                    // ajax call ...
                }
            }
        });
        eventz.implement(new Options);  

        window.addEvent('domready', function(){
            c = new eventz();
        });

    </script>

  </head>
  <body>
    <fieldset class="types">        
        <input type="checkbox" class="trig" name="otypes[]" value="0" id="typ-0" checked="checked">All
        <input id="typ-14" value="14" name="otypes[]" type="checkbox" class="otypes trig">Type A
        <input id="typ-17" value="17" name="otypes[]" type="checkbox" class="otypes trig">Type B
    </fieldset> 
  </body>
</html>
Was it helpful?

Solution

Basically in MooTools 1.4.4+, change events have been 'normalized' in IE:

which traces initial commits and the fixes.

With regards to your code, some changes need to take place:

  1. new Event(e).stop(); must be rewritten to: e.stop();
  2. implements method is now a mutator key: Implements

The whole thing can be simplified a lot. Here's a sample refactor, optimized for performance somewhat and with clearer logic.

http://jsfiddle.net/M2dFy/5/

something like:

var eventz = new Class({
    options: {

    },

    Implements: [Options],

    initialize: function(options) {
        this.setOptions(options);
        this.setup();
        this.jx = 0;

    },
    setup: function() {
        this.makeEvents();
        // ...
    },

    makeEvents: function() {
        var finputs = $$('.trig');

        finputs.removeEvents('change');
        finputs.removeEvents('click');

        var self = this;
        this.type0 = $('typ-0');
        this.otypes = $$('.otypes');
        this.pause = false; // stop flag because of IE

        finputs.each(function(r) {

            r.addEvents({
                click: function(e) {
                    this.pause || self.refresh(r); // this needs to stay as refresh calls some ajax stuff            
                }
            });
        });

        // ...
    },

    // refresh is called from various methods
    refresh: function(el) {
        this.pause = true;
        if (el !== this.type0) {
            // count types checkboxes
            this.type0.set('checked', !this.otypes.some(function(other) {
                return !!other.get("checked");
            }));



            // ajax call ...
        }
        else {
            this.otypes.set('checked', false);
        }
        this.pause = false;
    }
});

now, in view of the code you had, when you change .checked, it will trigger propertychange which will try to make the event bubble.

I would recommend changing all access to checked via the .set and .get methods, eg. el.set('checked', true); / el.get('checked') - similar use for id or any other property too.

Hopefully this is enough to set you on the right path, if you were to build an example of this in jsfiddle with a minimum DOM that works, I will be happy to look it over once more.

I have no IE here (mac) but I suspect it may break on clicking on a non-all checkbox as this will fire.

I would recommend moving to click events, though this will invalidate labels: http://jsfiddle.net/M2dFy/4/

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