IE7 - issue with javascript

Question

I have an issue only on old IE explorers with this js code:

var elements = [
        {'name':'manuscript_file', 'filetype':/(\.|\/)(doc|docx|txt|odt|zip|rar|rtf|gz|tar|bz2|bz|7z|tex)$/i},
        {'name':'presentation_file', 'filetype':/(\.|\/)(pdf)$/i},
        {'name':'figures_file', 'filetype':/(\.|\/)(pdf|png|jpg|gif|zip|rtf|eps)$/i},
        {'name':'graphical_file', 'filetype':/(\.|\/)(pdf|png|jpg|gif)$/i},
        {'name':'supplementary_file', 'filetype':/(\.|\/)(zip)$/i},
        {'name':'non_published_material', 'filetype':/(\.|\/)(doc|docx|zip|pdf)$/i},
    ]
    , url = $('form').attr('action');



$.each(elements, function(i, element) {
    $('#form_' + element.name).val('');
    $('#form_' + element.name).prev('button').removeAttr('disabled')
    ...

On the line with

 $('#form_' + element.name).val('');

IE7 is telling me

Message: 'name' is null or not an object

Any idea? Thx.

Answer 1

The problem here is with your trailing comma in the array of elements. Internet Explorer 7 is incorrectly interpreting a value to the right of the last comma. This makes the length n+1, thus causing jQuery to evaluate a null value on its last cycle:

var elements = [
    { 'name': 'manuscript_file' },
    { 'name': 'non_published_material' }, <--
]

You can see this confirmed by looping over two arrays; one with a trailing comma, and one without. Open http://jsfiddle.net/jonathansampson/mqntjbky/show/ in IE 7 for confirmation.

(function () {

    var elements = [
        { name: "Foo" }, 
        { name: "Bar" }
    ];

    var alternatives = [
        { name: "Fizz" }, 
        { name: "Buzz" },
    ];

    // This $.each will not throw an exception
    $.each( elements, function create ( i, element ) {
        try {
            $( "<div></div>" ).text( element.name ).appendTo( "body" );
        } catch ( e ) { alert( "Top fail: " + e.message ) }
    });

    // This $.each WILL throw an exception
    $.each( alternatives, function create ( i, element ) {
        try {
            $( "<div></div>" ).text( element.name ).appendTo( "body" );
        } catch ( e ) { alert( "Bottom fail: " + e.message ) }
    });

}());

Note below that the "Top fail" message is never raised, as it is in the block looping the collection that lacks a trailing comma. The "bottom fail" message, however, is in the affected block, and thus is raised during iteration.