I have started to build a timetable page for current students which should give them the option of viewing today’s timetable or this week’s timetable on a stand alone page.

To facilitate this I’ve added an HTML facility to the timetable web service I use to get the data. Up ’til now it’s just returned XML which has to be parsed and displayed in whatever host code calls it but I want ready made HTML.

Because the timetable data source sometimes takes a few moments to serve the web service I wanted to show a ‘spinning wheel’ while the timetable loads.

AjaxRequest get seemed a good way to load the web service data like this:

 

function showTimetable() {
       
        rl = document.getElementById('timetable'); 
        var checkurl = 'webserviceaddress';

        rl.innerHTML = 'GIF animation';

        AjaxRequest.get( {
            'url':checkurl
            ,'onSuccess':function(req){ rl.innerHTML=req.responseText }
            ,'onError':function(req){ alert('Error!);}
        } );

    }

In the BODY tag there is an onload which triggers the showTimetable() function. The DIV is called timetable, obviously enough and all being well the webservice will return some HTML which will populate the DIV. While that happens I show a spinning wheel animation because users can be a bit more confident that something is happening.

Eventually the timetable will be loaded into the DIV replacing the animation:

However if you don’t have Javascript enabled the onLoad and AjaxRequest won’t fire. My answer to this is to create a special link to the timetable page in the menu surrounded by NOSCRIPT tags which sends a parameter into the URL informing the page that this user does not have javascript and we should just try to load the timetable at server side. This uses the php Interface I wrote about before to get the information back from the web service.

if((isset($_GET['js'])==true)&&($_GET['js']=='false')) { 
  $timetablehtml = $learnnetobject->get_timetable_content 
  ($cookieusername, 
   $guid, 
   $course, 
   $mode, 
   $dayno, 
   $academicweek, 
   $format);                   
}

So if ?js=false is sent through the URL the timetable content is loaded server side and shown later in it’s own code block.

The result is the same but the Javascript version is a bit slicker if there’s a problem with getting the timetable back from the web service server.