search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

"operation aborted" in IE

Asked by David Collis
12 years ago.
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
Comment posted by Dan Letecky
12 years ago.
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
12 years ago.
A small fix: The first line should read:
 //        Ext.onReady(function(){
Comment posted by David Collis
12 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 Dan Letecky
12 years ago.
Good! I'm glad that DayPilot helps you.
Comment posted by David Collis
12 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 Dan Letecky
11 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.
This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.