Why doesn't this Dojo 1.9/JS code work in Inte

问题:

We are having a problem with a web application that uses Dojo 1.9. The application works fine in Chrome, Firefox and IE 10/11 but we are getting reports of a problem in IE 7.

UNFORTUNATELY, I have no way to test this directly because by corporate directive, IE 7 was removed from all developer machines. So I am responsible for fixing a bug I have no way to duplicate.

Because of user feedback, all the buttons in the application were changed from type="submit" to type="button" and an onclick() handler was added to the buttons so that the form would be submitted only when the button was clicked but not when ENTER was pressed. Here is the dojo/domReady! code that wires the buttons:

    //  Make the buttons submit the form ONLY on click (avoid keypress)
    query("button[type='button']").on("click", function(e) {
        console.log("    in button onclick handler");
        //  This actually submits the form based on the button that was clicked
        myapp.core.buttonClick("applicationInfo",this);
        console.log("    leaving button onclick handler");
    })

Here is the routine that actually submits the form (myapp.core.buttonClick):

    myapp.core.buttonClick = function(formName, buttonObject) {
        // Have to do this to transmit the data - the button info
        // won't be transmitted otherwise
        var formObject = document.forms[formName];
        var newField = document.createElement('input');
        newField.type = 'hidden';
        newField.name = buttonObject.name;
        newField.value = buttonObject.value;
        formObject.appendChild(newField);
        formObject.submit();
    }

Can anybody familiar with IE7 spot the problem in this code? Thanks in advance...

回答1:

Short Answer: IE7 and Spring Web Flow are not compatible.

Long Answer:

Not only does Dojo 1.9 not support IE 7, but IE7 turns out to be very problematic with Spring Web Flow. Because IE7 submits all buttons to the server, regardless of what button is clicked, it is a hassle to pass Web Flow events back to the server using IE7 and required a very ugly hack:

var formObject = document.forms[formName];
//  Rip out the buttons because IE7 sucks
for (i=0;i<formObject.length;i++) {
    if (formObject[i].tagName === 'BUTTON') {
        formObject[i].parentNode.removeChild(formObject[i]);
        i--;
    }
}
var newField = document.createElement('input');
newField.type = 'hidden';
newField.id=buttonObject.id;
newField.name = buttonObject.name;
if (buttonObject.attributes['value'] != null) {
    newField.value = buttonObject.attributes['value'].value;
} else {
    newField.value = buttonObject.value;
}
formObject.appendChild(newField);
formObject.submit();

This hack basically rips out all the button objects from the form, then adds back the one button that was actually clicked as a hidden field, and then submits the form.