Sr. Web Developer
mediabistro.com
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume

Remote Scripting with Javascript, IFrames and PHP
The Project
Specifically, what needed to get working was a project at my work that involved porting a desktop application created in Microsoft Access to a web-based PHP/MySql intranet application. Among the directives from management was to make the web application look and behave as much like the existing Access application as possible. And one of the many small features of this application which didn't map precisely to the web platform was a self-populating drop down search field. You've certainly seen these in various applications: the user begins to type in a text box, and as they do, the drop down box is populated with a list (usually alphabetically ordered), starting with the string that is being typed. As each letter is typed, the list changes and (usually) becomes more narrowly focused.

To recreate this in a web page I had several options. First, I could build the Select element server side with PHP, populating the Option elements from the database, and send the page with the pre-populated list. I could then tie into that option list with some Javascript that searched the list and selected the appropriate option based on the string typed into the text box. Fairly straightforward, except that the option list I needed to create had more than 60,000 records and was growing by a couple thousand every month. In fact, a previous developer had prototyped this method in ASP. The resulting page sent to the browser, with it's 60,000 option-long Select list, was nearly 4 MB. And the Javascript that searched the list with each "onkeyup" in the textbox was extremely slow, about 5-10 seconds between each keypress, or 30-seconds to type "Smi" and point to the "Smith" records.

Perhaps the Javascript could have been optimized somewhat, but to have a 4 MB page being requested concurrently, and often, by 10-plus users obviously wouldn't work. So a second option I had was to omit the Select list and just make the textbox a standard search field. Type in "Smi", hit enter, and get back a list of all the "Smi*" records. A reasonable approach, but I felt it didn't meet the "emulate Access" directive closely enough.

So finally, to the subject of the article. I thought, if I could talk to the server from the client, somehow without reloading the current page, I could "fake" the dynamic drop down list. Searching the net, I found several Remote Scripting options: several Java applets, a very nice and well-used Javascript library from Brent Ashley http://www.ashleyit.com/rs/main.htm, and other methods. But I settled on the Iframe approach referenced at the beginning of this article for it's simplicity and lightweight implementation.
[ Next Page ]

[Page 1]  [Page 2]  


Comments:
RE: I-frameVijeta Shenoy06/01/07 05:53
RE: I-framezubin09/26/05 05:57
RE: I-frameHadi09/10/05 00:34
Remotly run applicationsShoaib09/09/05 17:43
queryvinod04/29/05 02:13
You still make a lot of HTTP requestsAaron01/04/05 04:29
I-frameDonald Duemey12/11/04 09:27
GreatDid08/19/04 09:55
Superbjules08/01/04 15:56
Great Article!!Sam Powell07/23/04 18:40
RE: Use a hidden frame insteadDavid Vance07/09/04 02:37
RE: Excellent, but iframe works with IE onlyumm07/07/04 09:12
Use a hidden frame insteadCory Rauch06/22/04 10:21
RE: Excellent, but iframe works with IE onlyBob Neider05/26/04 12:22
If you're going IE only, why not use XMLhttp Neil Smith05/24/04 05:44
Excellent, but iframe works with IE onlyRay Chung05/20/04 14:36
Excellent tutJacob05/17/04 01:54
 

If you are looking for help, please post on the appropriate forum here. Your questions will be answered much more quickly.

Add A Comment:

Name:

Email:

Subject:

Message:

To reduce spam posts, messages are now manually approved

You are not [logged in]. That means your account will not get credit for this post.