Question

I’m loading a page that contains many elements and, once loaded, need to be able to grab one single DIV with the id of “panel_1”. This is how I’m currently doing it:

var Req = {
    main: new Request.HTML({
        onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
            var panel_1 = responseElements.filter('#panel_1');
            Blinds.updatePanel('panel_1', panel_1);
        }
    })
};
Req.main.send({
    method:'get',
    url: 'default.php'
});

Blinds.updatePanel() is just a function that takes that content and inserts it into the proper DIV.

This is all working fine except for Internet Explorer. For some reason it just chokes on responseElements.filter('#panel_1'). Any ideas why?

UPDATE:

For some reason when I try this in IE8:

var Req = {
    main: new Request.HTML({
        onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
            alert(responseElements.filter('#panel_1').get('id'));
        }
    })
};

I receive this error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Mon, 6 Dec 2010 00:07:58 UTC

    Message: Object doesn't support this property or method
    Line: 228
    Char: 74
    Code: 0
    URI: http://ideacity.smallparade.com/js/mootools/mootools-core-1.3-full-nocompat-yc.js

Other browsers alert with “panel_1”.

Answer 1

er. array.filter is–to the best of my knowledge–a progressive enhancement for Array type in mootools that acts exactly as this one: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/filter (adds this callback method to browsers that don’t support it). Typical use is via a function that iterates elements and keeps those that return truly ( http://mootools.net/docs/core/Types/Array#Array:filter ) :

new Request.HTML({
    url: '/echo/html/',
    method: 'post',
    onComplete: function() {
        var panel, elTemp = $$(this.response.elements).filter(function(el) {
            return $(el) && el.get && el.get("id") == 'panel_1';
        });
        if (elTemp.length)
            panel = elTemp[0];

        alert(panel.id);
    }
}).send();

see it work with your html: http://jsfiddle.net/PCTsz/3/