Home Unanswered Active Tags New Question

"operation aborted" in IE

My company is thinking of buying the pro version of daypilot (site license) but before my boss will allow the sale, this problem for us must be resolved.
We have been evaluating the demo version for the last couple of days and have found it perfect for out needs, with one exception in that it doesn't seem to place nicely with the javascript framework we are using for page layout - ExtJS. (http://www.extjs.com)

Basically we get the problem (only in IE) that when the page is loading we are given a popup alert box informing us that
"Internet Explorer cannot open the Internet site http://localhost:80/Calendar.aspx."
"Operation aborted"
This only happens when using the daypilot control with the project. All other .net controls we use appear to work fine.

The problem seems to manifest itself when we perform various function in the Ext.onReady handler - all code placed here is activated "when the document is ready (before onload and before images are loaded)."

I have put together a simplified example of the problem occuring:
http://david.ex-ic.net/ext/daypilottest.zip

Any help you could give with this would be most appreciated.

Thanks,

David
Asked by David Collis 4 years ago.
asp.net bug
Replies
David,

I've investigated the error a little bit. It seems to be an IE bug that appears when you modify the body element before the document is fully loaded (see http://support.microsoft.com/default.aspx/kb/927917 and others...).

The functions you are calling using Exts.onReady do touch the body element before onload event. It seems that it somehow interferes with DayPilot (which also includes quite a complex JavaScript initialization code that is executed before onload - it doesn't modify document.body but it still builds its inner DOM structure using JavaScript).

The error is caused even by the first part:

var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();

When I replaced it with

var myMask = new Ext.LoadMask(Ext.get('calendar-main'), {msg:"Please wait..."});
myMask.show();
return;

the error disappeared. But there is no chance to eliminate the document.body access in the remaining code.

I'm afraid looking for the interference cause would be unproductive (I can't remove the DOM operations from DayPilot anyway) but moving the Ext init code to onload event seems to work:

//        Ext.onLoad(function(){ 
        window.onload = function(){ 

            var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
            myMask.show(); 

            // define the center panel - this pulls the calendar from the div with id "calendar-main"
            var panelCenter = new Ext.Panel({
                region: 'center',
                layout: 'fit',
                autoScroll: true,
                title: 'Calendar View',
                contentEl:'calendar-main'
            });    

            // define the navigation panel
               var navigationPanel = new Ext.Panel({
                    region: 'west',
                    border: false,
                    bodyStyle: 'background-color: #d6e8ff',
                    split: true,
                    width: 175,
                    title: 'Navigation',
                    minSize: 175,
                    maxSize: 175,
                    collapsible: true
                });    


            // define the header panel
            var headerPanel = new Ext.Panel({
                region: 'north',
                title: 'header',
                height:80
            });

            // define the page structure - this does the actual setting up of the page
            var viewport = new Ext.FormViewport({
                layout: 'border', 
                items: [panelCenter,headerPanel, navigationPanel]
            });

            setTimeout(function(){
                myMask.hide();
            }, 250); 

        //});
        };
Let me know if this could work for you.
Comment posted by Dan Letecky 4 years ago.
A small fix: The first line should read: 
 //        Ext.onReady(function(){
Comment posted by Dan Letecky 4 years ago.
Damn, why didn't i think of doing that!? So simple.
Thank you very much for your help with that. I will ask for the purchase order to go through today - so hopefully you should get paid for the license within the next week or so.
Cheers,
David
Comment posted by David Collis 4 years ago.
Good! I'm glad that DayPilot helps you.
Comment posted by Dan Letecky 4 years ago.
It has been a great help so far. It covers just about everything we need to do with scheduling in our current project. The only other calendar we could find that even vaguely compared (and we went through a lot) was the Telerik RadScheduler one - which was immediately discounted as it is in beta. So many thanks!

Just by the way, for others using Ext with this, they might like this handy little helper code:
Ext.onLoadFunctions = new Array();
Ext.onLoad = function(fn){
Ext.onLoadFunctions.push(fn);
}
window.onload = function(){
Ext.each(Ext.onLoadFunctions, function(fn){
fn();
});
}

I then replaced all instances of Ext.onReady with Ext.onLoad in my code.
So far everything seems to work ok and it doesn't seem to have caused any problems to any Ext functions or UI features. (which does make me wonder why Ext.onReady is the method always suggested in the Ext docs - perhaps because restructing the page is more intensive after images have loaded?)
Comment posted by David Collis 4 years ago.
The solution for DayPilotCalendar is now available in DayPilot Pro 4.9 SP3. Please let me know if the problems appears in this or any following release.
Comment posted by Dan Letecky 3 years ago.
New Reply
This reply is
Your name (optional):

DayPilot for ASP.NET WebForms, DayPilot for ASP.NET MVC, DayPilot for Java