Skip to content

Posts from the ‘Ajax/Prototype’ Category


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 »


Note on changing Ajax.PeriodicalUpdater parameters

Sometimes you may have a Ajax.PeriodicalUpdater object running in the background and you need to change the parameter of the page.

To do that, simply change the Ajax.PeriodicalUpdater.options.parameters field, not AjaxPeriodicalUpdater.parameters.

var pu = new Ajax.PeriodicalUpdater(element, 'page.php',
                      { method: 'get',
                        parameters: { arg: val, arg1: val1 }
pu.options.parameters = { arg2: val2, arg3: val3 };

Don’t assign options.parameters directly with query string. Do the following instead:

var qstr = "arg2=val2&arg3=val3";
pu.options.parameters = qstr.toQueryParams();

Ajax/Prototype/Prototype-UI: Creating a modal busy screen

Prototype-UIWhile I was developing a web based application, one of the operations took rather long to accomplish. So I was looking for ways to create a modal busy screen with spinning image at the center. Most of them involves quite a bit of code. Then I decided to see whether I can make use of Prototype-UI to create a modal busy page and it works!! Amazingly, it doesn’t involve a lot of CSS and Javascript code either. Here are the steps:

Read more »


Ajax/Prototype/Prototype-UI: How to setup Ajax.PeriodicalUpdater with UI.Window

Prototype-UIThis 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.

Read more »


Ajax/Prototype: Use onComplete to separate Javascript client code from HTML page

PrototypeSuppose that you use Ajax.Updater to update the HTML content inside a DOM element. Usually, the HTML forms or table entries require a bit of embedded Javascript code for the event handlers. However, using the onComplete property can give a nice separation between the HTML page and Javascript code. Read more »


Prototype-UI: A quick start guide on Ajax Windows

Prototype-UIHere 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 »


PHP/JSON: A working example – log update on a background process (Part 2/2)

phpPHP side (Server side)

On the server side, here is the code for the start_proc.php which starts a background process Read more »


Ajax/Prototype/JSON PeriodicalUpdater: A working example – log update on a background process (Part 1/2)

PrototypeThis blog shows a real working Ajax.PeriodicalUpdater example (not just a hello world or non stop show timer). The example uses the PeriodicalUpdater to display a constantly updated log file from a background process running on the webserver. When the process finishes, the PeriodicalUpdater stops itself. Also a simple short PHP script is shown how to launch and check the status of a background process.  Read more »


How to use CSS SyntaxHighlighter 2.0 with Ajax/Prototype

CSS SyntaxHighlighterThe default method to use SyntaxHighlighter 2.0 is via SyntaxHighlighter.all() declared in the Javascript section of the main page. What this method does is to register the SyntaxHighlighter.highlight() to call when the main page is loaded. The highlight method then searches for all the <PRE> tags (default configured tag name) and checks any class names containing the ‘brush:’ keyword. If so, then proceeds with syntax highlighting. Read more »


Prototype/Ajax: workaround to serialize forms with multiple submit buttons

PrototypeI have started learning to use Prototype (Javascript client framework) for a few days. So far I found it very good and saved me a lot of my work in developing webpages. Then I hit an existing bug when Prototype serializes a form with multiple submit buttons. Prototype always serializes the first submit button, even if you click the second button. Read more »