Question

I have a form that submits with xhrPost, and comes back with the form result, and the form again to let users enter more details. The code works in Chrome but with IE the destroy and destroyRecursive doesn’t seem to work and the ajax return will results in a widget already registered error.

The form is loaded into a dojo dialog box, using declarative formatting, this function is called when the dialog box has opened and is ready:

var loadFunc = function() {
    dojo.parser.parse('quickaddcontainer');
    dojo.query('#quickAddBooking').onsubmit(function(e) {
        e.preventDefault();
        var xhrArgs = {
            form: dojo.byId("quickAddBooking"),
            url: '/booking/admin/quickadd?popup=1',
            handleAs: "text",
            load: function(data) {
                dojo.place(data, 'quickaddcontainer', 'replace');
                loadFunc();
            },
            error: function(error) {
                dojo.byId("quickaddcontainer").innerHTML = "Form error: "+error;
            }
        }
        dojo.byId('quickaddcontainer').innerHTML = 'Loading...';
        dojo.xhrPost(xhrArgs);
        dijit.byId('quickAddBooking').destroyRecursive();
    });
}

Any ideas why this doesn’t work in IE? I’ve tried putting a destroy/destroyRecursive in the load functions, before the xhrPost call and even findWidgets – destroyRecursive on the form but none seem to do anything.

Moan: It seems so hard to do such simple things with dojo sometimes – re-rendering in other frameworks never causes a problem.

Answer 1

Seems I have answered my own question… moving the innerHTML call to the bottom worked.

        dojo.xhrPost(xhrArgs);
        dijit.byId('quickAddBooking').destroyRecursive();
        dojo.byId('quickaddcontainer').innerHTML = 'Loading...';