Click here to Skip to main content
15,895,799 members
Articles / Web Development / HTML

Refreshing only part of your Web Page

Rate me:
Please Sign up or sign in to vote.
4.43/5 (4 votes)
8 May 20013 min read 222.4K   1.6K   51  
An article on refreshing objects on your Web Page without having to refresh the entire page
<HTML>
<TITLE>Top Ten - Scriptlet</TITLE>

<SCRIPT language="VBscript" for="window" event="onload">InitPage</SCRIPT>

<SCRIPT language="JScript">

function Refresh() {

	var rsTopTen
	var strInner
	var strCntInner
	var ConnectionString

	// Create the Recordset Object
	rsTopTen = new ActiveXObject("ADODB.Recordset");

	// Build the connection string
	//
	// ConnectionString Format below:
	//ConnectionString = "DRIVER=SQL Server;SERVER=MySQLServer;CATALOG=MyDatabase;UID=USERID;PWD=Password";
	//
	// for SQL 7.0:
	//ConnectionString = "DRIVER=SQL Server;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=\\\\demwwwdev01\\develop\\im\\security\\TopTen.mdb";
	//
	// for Access Database (on local drive):
	ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Persist Security Info=False;Data Source=C:\\TopTen\\TopTen.mdb";

	// Build a SQL statement
	strSQL = "SELECT TopTenName, TopTenCount FROM TopTen ORDER BY TopTenCount DESC";

	// Open the recordset
	rsTopTen.Open(strSQL, ConnectionString, 3,1,1);

	// Set variable
	var nCounter
	nCounter = 0;

	// Loop through the Recordset
	while(!rsTopTen.EOF)
	{

		var nCount, strCount, strFormated

		// Iterate the counter
		nCounter++;
			
		// Load variables from the Recordset
		strName = rsTopTen.Fields.Item(0).Value;
		nCount = rsTopTen.Fields.Item(1).Value;

		// Set default value
		if (nCount == null) {
			nCount = 0;
		}
		else {

			strCount = "";
			strCount = new String(rsTopTen.Fields.Item(1).Value);
		
			if ((strCount.length > 0) && (strCount.length < 4)) {
				strFormated = strCount;
			}
			else if ((strCount.length > 3) && (strCount.length < 7)) {
				strFormated = strCount.substring(0, strCount.length - 3) + "," + strCount.substring(strCount.length - 3, strCount.length);
			}
			else if ((strCount.length > 6) && (strCount.length < 10)) {
				strFormated = strCount.substring(0, strCount.length - 6) + "," + strCount.substring(strCount.length - 6, strCount.length - 3) + "," + strCount.substring(strCount.length - 3, strCount.length);
			}
			else if ((strCount.length > 9) && (strCount.length < 13)) {
				strFormated = strCount.substring(0, strCount.length - 9) + "," + strCount.substring(strCount.length - 9, strCount.length - 6) + "," + strCount.substring(strCount.length - 6, strCount.length - 3) + "," + strCount.substring(strCount.length - 3, strCount.length);
			}
		}
			
		// Cleans it up a bit...
		// puts the 1.  2.  3. etc...
		if (nCounter < 10) {
			strCntInner = "<font style='fontFamily: Verdana; fontSize: 8pt; margin: 2px' color=Black><b>&nbsp;&nbsp;" + nCounter + ". &nbsp;&nbsp;" + strName + "</b></font>";
		}
		else {
			strCntInner = "<font style='fontFamily: Verdana; fontSize: 8pt; margin: 2px' color=Black><b>" + nCounter + ". &nbsp;&nbsp;" + strName + "</b></font>";
		}
		strInner = "<b><font style='fontFamily: Verdana; fontSize: 8pt; margin: 2px' color=Red><center>" + strFormated + "</center></font></b></font>";

		// Sets the HTML in the Table Columns
		if (nCounter == 1) {
			One.innerHTML = strCntInner;
			OneCount.innerHTML = strInner;
		}
		else if (nCounter == 2) {
			Two.innerHTML = strCntInner;
			TwoCount.innerHTML = strInner;
		}
		else if (nCounter == 3) {
			Three.innerHTML = strCntInner;
			ThreeCount.innerHTML = strInner;
		}
		else if (nCounter == 4) {
			Four.innerHTML = strCntInner;
			FourCount.innerHTML = strInner;
		}
		else if (nCounter == 5) {
			Five.innerHTML = strCntInner;
			FiveCount.innerHTML = strInner;
		}
		else if (nCounter == 6) {
			Six.innerHTML = strCntInner;
			SixCount.innerHTML = strInner;
		}
		else if (nCounter == 7) {
			Seven.innerHTML = strCntInner;
			SevenCount.innerHTML = strInner;
		}
		else if (nCounter == 8) {
			Eight.innerHTML = strCntInner;
			EightCount.innerHTML = strInner;
		}
		else if (nCounter == 9) {
			Nine.innerHTML = strCntInner;
			NineCount.innerHTML = strInner;
		}
		else if (nCounter == 10) {
			Ten.innerHTML = strCntInner;
			TenCount.innerHTML = strInner;
		}
		else if (nCounter > 10) {
			break;
		}
			
		// Go to the next Record
		rsTopTen.MoveNext();

	};
		
	// Close the Recordset
	rsTopTen.Close();

}
</SCRIPT>

<SCRIPT language="VBscript">

Sub InitPage

	' Show data at beginning
	DoUpdatePage
	
	' Are we in the scriptlet or is the user
	' trying to access the page directly?
	if InScriptlet then
		window.external.selectableContent = True
	end if

	if mEnabled then
		' Set the timer to run every second (1000 ms)!
		mTimer = window.setInterval( "DoUpdatePage()", 1000, "VBScript" )
	end if

End Sub


Sub DoUpdatePage
	' Execute the script which fills the Table
	window.execScript "Refresh();"
End Sub

</SCRIPT>


<SCRIPT language="JavaScript">

// declare the object interface
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;
}

function Enable (b) {

	mEnabled = b; 

	if ( b ) {
		// Are we in the scriptlet or is the user
		// trying to access the page directly?
		if (InScriptlet) {
			// raise some events
			window.external.raiseEvent ("OnStart", window.document);
		}
	}
	else {
		// Stop the timer
		window.clearInterval(mTimer);
		// Are we in the scriptlet or is the user
		// trying to access the page directly?
		if (InScriptlet) {
			// raise some events
			window.external.raiseEvent ("OnStart", window.document);
		}
	}

	return 1;
}

</SCRIPT>

<BODY>

<TABLE border=0 cellpadding=0 cellspacing=0 width="100%">
	<TR><TD ID=One></TD><TD ID=OneCount></TD></TR>
	<TR><TD ID=Two></TD><TD ID=TwoCount></TD></TR>
	<TR><TD ID=Three></TD><TD ID=ThreeCount></TD></TR>
	<TR><TD ID=Four></TD><TD ID=FourCount></TD></TR>
	<TR><TD ID=Five></TD><TD ID=FiveCount></TD></TR>
	<TR><TD ID=Six></TD><TD ID=SixCount></TD></TR>
	<TR><TD ID=Seven></TD><TD ID=SevenCount></TD></TR>
	<TR><TD ID=Eight></TD><TD ID=EightCount></TD></TR>
	<TR><TD ID=Nine></TD><TD ID=NineCount></TD></TR>
	<TR><TD ID=Ten></TD><TD ID=TenCount></TD></TR>
</TABLE>

</BODY>
</HTML>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Product Manager
Germany Germany
I have been programming (as a hobby) for 20+ years (Unix C, Scripting, VB, C/C++, C#). I am getting too old to talk about it and been in the Security line of work (both Military/Civilian) for 25+ years.

Comments and Discussions