Using Ajax.PeriodicalUpdater to update Flotr graph in both Ajax Window (pop-in) and child browser window (pop-out) simultaneously on IE8
This article describes how to use Ajax.PeriodicalUpdater and Flotr to plot a graph inside Ajax Windows and browser windows (IE8). The same continuous graph that can do ‘pop in’ as an Ajax Window and ‘pop out’ as inside a browser window. Throughout the article, I am using Prototype-UI for creating Ajax Windows, ie all the tools used in here are based on Prototype.
Plotting graphs within Ajax windows is easy. However, drawing graphs between Ajax windows and standalone browser windows requires a bit more understanding on both Flotr and IE8. I will show you and explain what went wrong in the first approach that has only worked on Safari and Firefox but failed on IE8 and came up with a second approach which worked in all browsers. Read more
This tutorial shows you how to create a Prototype-UI window with Ajax.PeriodicalUpdater. Suppose you need to create an Ajax window and the content is constantly updating. My preferable approach is to wrap both the UI.Window and Ajax.PeriodicalUpdater into one object. To combine PeriodicalUpdater with UI.Window together, the PeriodicalUpdater must be stopped when the window is closed. In order to do that, the UI.Window close event handler must be overridden and the PeriodicalUpdater object is visible to the handler.
Here is a short tutorial showing you how to use Prototype-UI to create Ajax windows and control the properties between windows.
There are many window based Ajax frameworks out there in the market, ZK, Backbase, Ext-JS, YUI, GWT, etc. It depends on whether your web application requires to be client or server centric or a bit of both and the complexity of it. They all need a bit of learning curve. Recently, I came across another window based Ajax product, Prototype-UI, which is based on the well known Prototype and Scriptaculous libraries. Prototype-UI is a client centric and it is an extension work on previously known as PCW window library. Read more