For some reason, the
Produced no results whatsoever. Granted there was no error generated, but I might as well have put a blank line. Anyway, thanks to a bit of snooping in the scheduler_debug.js, I was able to learn how you made the loading bar appear and replicate more or less the same thing. However, I figure I’d share some of the pain I had to endure thanks to IE and Chrome’s stupid behavior.
First of all, I put the code in the onEventIdChange() event since, in my case, that’s exactly where the loading bar should appear. So I copied your CSS rule and added it to my main page:
In retrospect, that probably wasn’t necessary since your CSS page is already included in my main page, but for clarity purposes, I figured it was a bit easier for me to have it there than to go in the scheduler’s CSS and find again. After that, it was really simple, I created a function that added the necessary elements to the document’s body and called it within the onEventIdChange() and, once the treatment was done, I simply removed the elements as so:
var overlay = document.createElement("DIV");
var progressImage = document.createElement("img");
//overlay.className = "my_overlay";
overlay.className = "my_overlay";
overlay.id = "overlay";
progressImage.id = "progress";
//progressImage.src = "img/progress.gif";
progressImage.src = "img/loadingtest.gif";
progressImage.style.position = "absolute";
progressImage.style.left = (screen.width / 2 - 192) + "px";
progressImage.style.top = (screen.height / 2) + "px";
progressImage.style.zIndex = "10001";
//overlay.id = "overlay";
if (firstRec || (!firstRec && eventCopy.RecId == "NULL"))
putOverlay(); //adding the overlay and the loading bar to the document's body
//Removing the elements now that the treatment's done
So, all nice and dandy, right? WRONG! Firefox had absolutely no problems with this approach, but both Chrome and IE completely and absolutely refused to display the elements I added… unless I added something like an “alert” box to sort of freeze the code temporarily. I did not figure out why exactly these browsers behaved that way, but I did find a decent workaround.
I simply put the call to the “putOverlay()” function in the “dp.onBeforeUpdate()” event and things started to work relatively correctly.
var ev = scheduler.getEvent(id);
if (status == "inserted" && (firstRec || (!firstRec && ev['RecId'] == "NULL")))
So, now the elements do appear in IE and Chrome, but for some reason the animated gif freezes on its second frame of animation. Again Firefox has absolutely no problems with that code so go figure. It’s not exactly perfect, but that’s good enough for me.
So there you have it. I hope my experience can benefit someone out there… and if you know why on earth the animated gif freezes up, you’re welcome to tell, but it’s really not critical at this point, it’s just me being curious.
Thanks again for your answer Stanislav ,
P.S. In case you’re wondering, the condition I put in the onBeforeUpdate is simply to make sure I don’t add multiple overlays when I insert recurring events. I’ve tested it and it works, just in case you might be thinking the problem comes from there.