Database Front End: Updating the display | WebReference

Database Front End: Updating the display

Logo

Database Front End:
updating the display

It's JavaScript time, once again!

In addition to our usual browser variables, we will initialize three others: curRecord to keep track of the current (i.e. displayed) record, maxRecords which stores the number of records in our database. Taking the length of arRecord (6, i.e. 0-5) and subtracting 1 for unused arRecord[0], it stores 5 which corresponds to the record total. Likewise, maxFields stores the number of fields in our record.

     NS4 = (document.layers) ? 1 : 0;
     IE4 = (document.all) ? 1 : 0;
    ver4 = (NS4 || IE4) ? 1 : 0;
    var curRecord = 1;
    var maxRecords = arRecord.length-1;
    var maxFields = arRecord[1].length-1;

Next, we create our primary function, upDate(), which will display the current record when called.

    function upDate() {
        if (document.images) { document.images["imPic"].src="Cynic00" + curRecord + ".jpg" };
        if (!ver4) { return };
        for (i=1; i

upDate()first does an image swap, replacing the image with one that corresponds to the current data. Notice that all our images have the same filename, ending with a final incrementing digit. In the case of our example, they are named Cynic001.jpg, Cynic002.jpg, etc. Images can be preloaded, but advisable only if the database is small.

If the visiting browser is not dynamic, the function returns. If it is, the function continues. It sets up a loop to address each field in the current record, then it updates the appropriate CSS element containing that field. For Navigator, it identifies the CSS element to be updated and then writes to its document object.
For Explorer, it gets the CSS element from the all collection and then changes the HTML it contains. The details of these two methods are covered in detail in column3.

We need two more short functions to increment and decrement the current record number, causing either the next or previous record to be displayed:

    function showNext() {
        curRecord = (curRecord  1) ? --curRecord : maxRecords;
        upDate();
    }

showNext() compares the current record number to the total records. If it is smaller, curRecord is incremented, otherwise it is looped back to 1

showPrev() checks to see if the current record is the first one. If it isn't, curRecord is decremented. If it is, the last record is displayed.

Now, all we need is to display the initial record when the page loads. We can do this by calling upDate()through the onLoad event handler of the BODY tag:

    <BODY ...HTML attributes....ending with... onLoad="upDate()">

Put it all Together

With all the coding, done, let's see the example we've created again:

Sampling Code Number: CYNIC-001
Catalog Number: F67-94-4/17
Provenance: Filia
Chronology: Neolithic II / 5000-3750
Style-Typology: Dark on Light
Shape: open-shape
Previous Sampling Next Sampling

And now, let's see all of the code discussed, in its proper order...


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 09/09/97
Revised: 09/28/97

URL: http://www.webreference.com/dhtml/column4/dispRecs.html