Why does javascript/jquery execute in all browsers but IE?

Question

I'm hoping some fresh eyes can see what I'm missing. I have a page (in WordPress site) that works just fine in Firefox, Chrome, Opera & Safari but not in IE. To see if it's even executing anything, I've placed an alert in the first line of the document.ready function and it displays on all the browsers except in IE (tried it on IE7 and IE9).

Here's the document.ready function. Can anyone see any reason why this would not execute in IE?

<!-- language: lang-js -->
$(document).ready(function () {
    alert('in .ready function');
    //$("input:text:visible:first").focus();
    $(window).scrollTop();
    // $(this).scrollTop(0);
    $("#u_phone").mask("(999) 999-9999");
    $('#fab_result').hide();
    $('#fab_header').hide();
    $('#optIn').hide();
    $('div.message').show();
    $('#mymap').show();
    $("#my_form").validate();
    if ($("#u_firstname").length > 0) {
        $("#u_firstname").rules("add", {
            required: true,
            minlength: 5,
            messages: {
                required: " This field is required "
            }
        });
    }
    if ($("#u_email").length > 0) {
        $("#u_email").rules("add", {
            required: true,
            email: true,
            messages: {
                required: " This field is required "
            }
        });
    }
    if ($("#u_phone").length > 0) {
        $("#u_phone").rules("add", {
            required: true,
            messages: {
                required: " This field is required "
            }
        });
    }
    if ($("#u_custom_20").length > 0) {
        $("#u_custom_20").rules("add", {
            required: true,
            minlength: 3,
            messages: {
                required: " This field is required "
            }
        });
    }
    var mapsterOpts = {
        fillOpacity: 0.5,
        render_highlight: {
            fillColor: '2aff00',
            stroke: true,
            strokeWidth: 2
        },
        render_select: {
            fillColor: 'ff000c',
            stroke: false
        },
        fadeInterval: 5000,
        isSelectable: false
    },
        mainOpts = $.extend({}, mapsterOpts, {
            mapKey: 'province',
            onClick: clickMain
        }),
        detailOpts = $.extend({}, mapsterOpts, {
            onClick: clickDetail
        });
    $('#canada-map').mapster(mainOpts);
});

What do you mean does not execute? Does the alert at the top fire? Can you paste some information from IE's error console? — Fresheyeball, Mar 27 '12 at 04:15
Enable script debugging. Look for syntax errors on a page refresh. — , Mar 27 '12 at 04:17
Does your script create a canvas tag that does not work in your IE browsers? If so wrap it in a conditional tag to check browser — mikevoermans, Mar 27 '12 at 04:26
The `$(document).ready()` gets executed just fine here in IE: http://jsfiddle.net/jfriend00/5Htgp/. If it's not executing for you, then you probably have a javascript syntax error somewhere else in this file that stops the interpreter from even parsing the JS. You will need to see what is says on your whole app in the console of the IE dev tools (press F12, look at console). — jfriend00, Mar 27 '12 at 04:36
http://stackoverflow.com/questions/2599020/what-are-the-typical-reasons-javascript-developed-on-firefox-fails-on-ie -- Are there any trailing commas in object/arrays? `{willBlowUpInIE:true,}` - There are other reasons listed there — gnarf, Mar 27 '12 at 05:22
I should have elaborated. It was late and I was tearing my hair out. To answer some of the questions...
No-the alert doesn't fire in IE. — IMZvonko, Mar 27 '12 at 14:15
Thanks everyone for the responses. The issue DID end up being trailing commas in the following code. Although I had changed it and uploaded to the server, it wasn't recognizing my change because I hadn't updated the WordPress page. — IMZvonko, Mar 28 '12 at 18:08
Grr. Everytime I want to start typing on a new line I hit Enter and it just adds the comment instead of inserting a new line. I don't have a clue how to add a new line in a comment. — IMZvonko, Mar 28 '12 at 18:09
The code was originally like this but once I got rid of the trailing comma and updated the Wordpress page it worked. messages: {required: " This field is required ", } — IMZvonko, Mar 28 '12 at 18:10

score -1 · Answer 1 · answered Mar 27 '12 at 04:44

problem is here:

use var to declare variables and do not use comma(,) instead (;)

change this:

var mapsterOpts = {
    fillOpacity: 0.5,
    render_highlight: {
        fillColor: '2aff00',
        stroke: true,
        strokeWidth: 2
    },
    render_select: {
        fillColor: 'ff000c',
        stroke: false
    },
    fadeInterval: 5000,
    isSelectable: false
},
    mainOpts = $.extend({}, mapsterOpts, {
        mapKey: 'province',
        onClick: clickMain
    }),
    detailOpts = $.extend({}, mapsterOpts, {
        onClick: clickDetail
    });
$('#canada-map').mapster(mainOpts);

to

    var mapsterOpts = {
        fillOpacity: 0.5,
        render_highlight: {
            fillColor: '2aff00',
            stroke: true,
            strokeWidth: 2
        },
        render_select: {
            fillColor: 'ff000c',
            stroke: false
        },
        fadeInterval: 5000,
        isSelectable: false
    };
    var mainOpts = $.extend({}, mapsterOpts, {
        mapKey: 'province',
        onClick: clickMain
    });
    var detailOpts = $.extend({}, mapsterOpts, {
        onClick: clickDetail
    });
    $('#canada-map').mapster(mainOpts);

`var a,b,c,d;` is totally legal - not sure why you'd suggest using multiple vars when the best practice is to only have one `var` per `function` — gnarf, Mar 27 '12 at 05:18

Why does javascript/jquery execute in all browsers but IE?

1 Answers1