Just for fun, the Recurring Event "Join Now" buttons on IADN’s Webinar page automatically toggle between:

 and

You’d have to wait for a session to be about to start to see the toggle, but it toggles 5 minutes before the session starts. This avoids some confusion where folks think since there is a Join Now button, that the session will automatically start when they click the button. This way, the button is not active unless the webinar is in session, or about to be in session.

Here is the page: http://alphadevnet.com/webinars.a5w#eventlink

It loads a page named test.a5w every 1 minute and updates just the named DIV, not the whole page. Test.a5w contains whatever content you want to have appear:

(Click here to see where I grabbed the jquery code)

Javascript goes in the Head area:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#loaddiv").load("test.a5w");
var refreshId = setInterval(function() {
$("#loaddiv").load('test.a5w?randval='+ Math.random());
}, 60000);
$.ajaxSetup({ cache: false });
});
</script>

And then this where you want the content to appear:

<div id="loaddiv">
</div>

And here is the test.a5w page (DBF):

dim tbl as p
tbl = table.open("[PathAlias.ADB_Path]\event_item")
query.filter = "status = 'rec'"
query.order = "sortlevel"
indx = tbl.query_create()

join_yes = "<a target='_meeting' href="+tbl.url+"><img border=0 width=\"60px\" src=\"images/join_now.gif\" title=\"Join Now\"></a>"
join_no  = "<img border=0 width=\"60px\" src=\"images/join_not_now.gif\" title=\"Not in Session, check back\">"

lst = ""
tbl.fetch_first()

while .not. tbl.fetch_eof()
lst = lst + "<div class=\"adbox\" style=\"text-align:left;margin-left:5px;display: inline-table;\">"
lst = lst + "<div style=\"float:left;width:710px\"><h3 style=\"margin-top:0;margin-bottom:2px\">"+tbl.title+"</h3>"+tbl.short_desc+"<br></div>"
if dow(date()) = val(tbl.Recurring_Dow) .and. between(toseconds(time()),toseconds(tbl.recurring_starttime)-300,toseconds(tbl.recurring_endtime))
    lst = lst + join_yes
    else
    lst = lst + join_no
end if
lst = lst + "</div>"
tbl.fetch_next()
end while

tbl.close()
?lst

Cascading dropdowns and Primary Key field name

Best practice in Alpha Five is to name all primary keys with the table name plus "_id". E.g., the PK for the Product table would be product_id. This may be obvious to those of you who always followed that practice. But there are many developers who name their primary key "ID" for all tables (I mean I was one up to just a few days ago).

Case 1 - when creating relationships between tables in, for instance, a Linked Content Area, Alpha Five anticipates that the PK in the parent is named the same as the FK in the child. It automatically make that link for you if you have named them the same.

Case 2 - I just learned it is mandatory to follow this practice if you expect cascading dropdown features to work properly (cascade is built in to Alpha Five dropdown controls as a simple checkbox option).

If the PK and the FK are named different, the cascade will not work. Here is a graphic showing my tables names for a simple State-City cascading dropdown. Notice my field name of State_Id is the sae for both the parent and child tables.

Note that it is only important in this case that the State_Id field name is the same. I purpously did not name the PK for the City table as City_Id just to show it is not mandatory for this cascading dropdown to work. But of course, I would name it City_Id following my new rule of always naming the primary key as table_id.

Toggle Child Grid based on value in Parent Grid

Linked Content Area Switch Model

Given

Parent table w/Grid

ChildA table w/Grid

ChildB table w/Grid

Parent has Linked Content Area with EACH Child Grid as a separate Linked Content Section

Freeform area, Linked Content placement

{LinkedContentSection:CHILDA}

{LinkedContentSection:CHILDB}

onRowSelect System Event

var rowNum = {Grid.Object}._selectedRow;

var cat = {grid.Object}.getValue('G','CATEGORY',rowNum);

'
'note:if your parent component is a Detail Section, the above line would be:
'var cat = {grid.Object}.getValue('D','CATEGORY');

'
switch (cat) {

case 'A':

                document.getElementById('childa').style.display = "block";

                document.getElementById('childb').style.display = "none";

                break;

case 'B':

                document.getElementById('childa').style.display = "none";

                document.getElementById('childb').style.display = "block";

                break;

default:

                document.getElementById('childa').style.display = "none";

                document.getElementById('childb').style.display = "none";

                break;

}

Notes

In my example I have only one Grid in each LinkedContent Area, but you could have any number of Grids defined per Area.

You can also use this syntax:
var rowNum = {Grid.Object}._selectedRow;

var cat = {grid.Object}.getValue('G','CATEGORY',rowNum);
if (cat=='A')
{
document.getElementById('childa').style.display = "block";
document.getElementById('childb').style.display = "none";
}
else if (cat=='B')
{
document.getElementById('childa').style.display = "none";
document.getElementById('childb').style.display = "block";
}
else
{
document.getElementById('childa').style.display = "none";
document.getElementById('childb').style.display = "none";
}