Question

I have a script that works great in FF and Safari, but does not display properly in IE. There’s gotta be some sort of error somewhere but I can’t seem to be able to find it…

Here’s the URL: http://www.k8r.me/AYXybP

Try dragging boxes from the left pane into the right area in FF or Safari. Compare with IE…

Is there a good tool to help me debug these sort of issues? Did I miss something?

I’d really appreciate another set of eyes taking a look at the source.

Answer 1

Internet Explorer’s Developer Tools (press F12) are a decent debugging tool for these issues. IE9 debugger shows two errors:

Line: 89 Character: 3 Code: 0 Error Message: Expected identifier,
string or number URL: http://www.c8r.us/jq/dragdrop-client.js

Line: 314 Character: 3 Code: 0 Error Message: Expected identifier,
string or number URL: http://www.c8r.us/ux4RJSC

One error is here:

function stackClose(stackId)
{
    var s = $("#" + stackId);

    if( s.hasClass("empty") )
        deleteEmptyStack(s);
    else {
        $("#cantDelStack").dialog({
            modal:      true,
            draggable:  false,
            resizable:  false,
            width:      300,
            buttons: {
                "OK":   function() {
                        $(this).dialog("close");
                    }
            },
        });
    }
}

fix:

function stackClose(stackId)
{
    var s = $("#" + stackId);

    if( s.hasClass("empty") ){
        deleteEmptyStack(s);
    } else {
        $("#cantDelStack").dialog({
            modal:      true,
            draggable:  false,
            resizable:  false,
            width:      300,
            buttons: {
                "OK":   function() {
                        $(this).dialog("close");
                    }
            }
        });
    }
}

I think the issue may have been the comma after the buttons object. IE is finicky like that.