Refreshing Individual Objects on your Web Page (not the entire page)

Top Ten Picture

Environment: VID6 SP4, Explorer 5.x, MS-Access 2000, SQL 7.x/2000

Background

I needed to make a portion of Web Page to refresh without refreshing the entire page. Everytime I tried, it would always refresh the entire page. I got very frustrated, then I read an article from the CodeProject discussion board and thought I would talk to Uwe Kein (the Author) about this. His suggestion was to use Remote Scripting. The articles I read agreed that this was the way to go. Unfortunately, my company didn't have that installed on their development or production systems. I couldn't wait for them, so I tried scriptlets. After a lot of trial and error, I got it to work. I am writing this article to try and help anyone else in this situation.

What will this do for you?

This will show you how to refresh a scriptlet every second using a timer inside the scriptlet. The example uses a DNS-Connection-Less (meaning you don't have to create a System DNS entry through ODBC) way to access the MS-Access database, but you can adapt it to any other by changing the "ConnectionString" (see below formats):
//Build the connection string
//
//ConnectionStringFormat(seebelow):
//ConnectionString="DRIVER=SQLServer;SERVER=MySQLServer;
//          CATALOG=MyDatabase;UID=USERID;PWD=Password";
//
//forSQL7.0:
//ConnectionString="DRIVER=SQLServer;SERVER=TopTen;
//             CATALOG=TopTen;UID=TopTen;PWD=TopTen";
//
//for Access Database (on Server):
//ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Persist Security 
//       Info=False;Data Source=\\\\SERVER\\Share\\directory\\TopTen.mdb";
//
//for Access Database (on local drive):
//ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;
//       Persist Security Info=False;Data Source=C:\\Database\\TopTen.mdb";

I have included an Access 2000 Database called/Located at "C:\TopTen\TopTen.mdb" to use for the example, or you can use the text file "TopTen.txt" which will create a Table, User Login, User Role, Primary Key, and Insert ten rows for an SQL 7.x database.

NOTE: if you want to use ASP (server calls) code, write it as a "JavaScript" function and use "RUNAT=server" in the <SCRIPT> Tag.

What are scriptlets

Scriptlets are HTML pages that heavily exploit the DHTML object model. Here is how simple it is to write a normal HTML file. Create an function for the scriptlet called "CreatePage". Now, create a "new" object called public_description and assign it the result of the function. This function works as a the constructor of the scriptlet object. In one sense, the public_description variable is like a header file for a C++ class. It defines all the properties and methods that the scriptlet exposes. See the example below:

// declare the object interface (constructor)
public_description = new CreatePage();
var InScriptlet = (typeof(window.external.version) == "string");

// set some variables
mEnabled = 1;
mTimer = 0

function CreatePage() {
	this.Refresh = Refresh;
	this.Enable = Enable;
}

Since a scriptlet is an HTML or ASP page (and can also be displayed as a stand-alone document), you might occasionally incur a system error due to a property or a method that IE 4 (or higher) doesn't find. This only happens if your scriptlet attempts to access its parent environment. To work around this you need a way to detect wether a given page is viewed as a scriptlet or not. Since the external object gets initialized if, and only if, an HTML page is running as a scriptlet, provide a boolean variable as a safeguard and access the external object only when it is absolutely safe to do so.

var InScriptlet = (typeof(window.external.version) == "string");

The variable above InScriptlet will contain True or False, according to the type of the property external.version (current version of the scriptlet engine). You can now use InScriptlet in your code to determine how the page is being viewed.

The way to get it to refresh is either by calling the "Refresh" method or by setting a timer in the window.onLoad event:

mTimer = window.setInterval( "DoUpdatePage()", 1000, "VBScript" )

Since both ActiveX controls and scriptlets are inserted through the same tag <OBJECT>, you need to make the browser distiguish between them (see below).

ActiveX Control:

<OBJECT>
  id="Button1"
  classid="..."
  width="..."
  height="..."
  <param name="...">
</OBJECT>

Scriptlet:

<OBJECT>
  id="TopTen"
  data="TopTen.htm"
  width="..."
  height="..."
  type="text/x-scriptlet"
</OBJECT>

That's it! Let me know what you think!

Acknowledgements

For a good book/examples check out Scriptlets and for the examples in the book, go to Examples

Downloads

Download TopTen source - 9.91 Kb


Comments

  • converting text file to access table

    Posted by Legacy on 02/19/2003 12:00am

    Originally posted by: kali charan

    I have data in a text file. This data has to be placed into the tables of database. I am using MSAccess as database and VC++ as frontend.

    Reply
  • IE Alternative

    Posted by Legacy on 01/24/2002 12:00am

    Originally posted by: use IFRAME control

    To refresh a part of a web page, put in a separate document, loaded in a IFRAME control. When you want to refresh just reload the iframe.

    Reply
  • window.external

    Posted by Legacy on 07/21/2001 12:00am

    Originally posted by: AH

    Good work. I loved it.
    You almost got me with that
    window.external.selectableContent
    window.external.raiseEvent
    it only seemed to work in scriplet and there was no documentation on that in July 2000 edition of MSDN thou I
    found something on msdn.microsoft.com

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: November 20, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Are you wanting to target two or more platforms such as iOS, Android, and/or Windows? You are not alone. 90% of enterprises today are targeting two or more platforms. Attend this eSeminar to discover how mobile app developers can rely on one IDE to create applications across platforms and approaches (web, native, and/or hybrid), saving time, money, and effort and introducing apps to market faster. You'll learn the trade-offs for gaining long …

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds