Question

Once this line of code finishes executing in IE8 $(this.frame).unbind(‘load’).load(function() -> the status bar in IE8 shows loading for some reason and it goes on for a very long time and trying to debug with IE web developer has not benefitted in anyway. Is there any know issues with jquery + iframe and IE8 that I need to be aware of and is causing this problem?

 buildForm: function(fList, fOpts) {
                    if (!(this.getLocalURL())) return false;
                    var iDoc = (this.frame.contentWindow) ? this.frame.contentWindow.document : (this.frame.contentDocument.document) ? this.frame.contentDocument.document : this.frame.contentDocument;
                    var newForm = iDoc.createElement('form');
                    var method = 'POST';
                     var postUrl = fOpts.serviceURL+'&callbackUrl='+this.startURL;
                    newForm.setAttribute('action',postUrl);
                    newForm.setAttribute('method', method);

                    $(newForm).append("<input name='userDetail' type='hidden' value='"+JSON.stringify(fList)+"' />");
                    $(newForm).append('<input name="callbackUrl" type="hidden" value="'+this.startURL+'" />');
                    newForm = iDoc.body.appendChild(newForm);
                    this.isWaiting = true;

                        $(this.frame).unbind('load').load(function(){
                            Port.formControl.call(Port, this, fOpts);
                        });

                    newForm.submit();
                },
                formControl: function(formEl, fOpts) {
                    var url;
                    if (!(url = this.getLocalURL())) return false;
                    if (this.isWaiting === true) {
                        var resJSON = {};
                        var message = url.search.substring(1);
                        message = window.decodeURIComponent(message).split('&');
                        var i = message.length;
                        while (i-- > 0) {
                            var v = message[i].split('=');
                            if (v[1].charAt(0) == "{") v[1] = $.parseJSON(v[1]);
                            resJSON[v[0]] = v[1];
                        }
                        if (fOpts && fOpts.finishCallback instanceof Function) {
                            fOpts.finishCallback(resJSON);
                        }

                    }
                }

Answer 1

Added setTimeout logic around the function call for buildForm. I think this allows creation of iframe, doing a cross domain access before making the updates to the UI with a successful profile update message.

$.fn[pluginName].post = function(argObj) { 
        Port.init(function(){ 
setTimeout(function() { 
            Port.buildForm(argObj.JSON, { 
                serviceURL: argObj.service, 
                finishCallback: argObj.callback 
            }); 
}, 10); 
        }); 
    };