Ajax Archive Drop Downs

By Arvind Satyanarayan on | Filed under Design & Templates | Comments (1)

In this thread, Gary highlighted how to have drop downs of archives that basically redirected to the appropriate page once an archive was chosen. With this tutorial, I'll take that one step further and use AJAX such that when you select an archive, rather than redirecting to the corresponding archive page, the appropriate posts will just replace those currently shown. You can see a pretty basic example here

mp;

First of all, here's the AJAX code that you'll need to put within your <head></head> tags

<script type="text/javascript">
<!--
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
        xmlhttp = false;
    }
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    xmlhttp = new XMLHttpRequest();
}
function touched(timestamp,category,divID) {
    if (xmlhttp) {
        d=document
        var oInputArray = new Array();
        var requestFile = "<MTBlogURL>ajax-archives.php?timestamp=" + timestamp + "&category=" + category;
        xmlhttp.open("GET", requestFile ,true);
        xmlhttp.onreadystatechange= function () {
            if (xmlhttp.readyState==4) {
                document.getElementById(divID).innerHTML=xmlhttp.responseText
            }
        }
        xmlhttp.send(null)
    }
}
//-->
</script>

Quite simply, this code calls a PHP file that does the heavy lifting and spits some output. Ajax then kicks in and replaces the content of a given div with what the output of the PHP file.

The following is the code for the various archiving types, I am assuming you're using the 3.x default templates. If you are not using the default templates, you will need to replace 'center' (in the onchange attribute of the various select drop downs) with the ID of the div your posts live in

Category Archives

<script type="text/javascript">
<!--
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
        xmlhttp = false;
    }
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    xmlhttp = new XMLHttpRequest();
}
function touched(timestamp,category,divID) {
    if (xmlhttp) {
        d=document
        var oInputArray = new Array();
        var requestFile = "<MTBlogURL>ajax-archives.php?timestamp=" + timestamp + "&category=" + category;
        xmlhttp.open("GET", requestFile ,true);
        xmlhttp.onreadystatechange= function () {
            if (xmlhttp.readyState==4) {
                document.getElementById(divID).innerHTML=xmlhttp.responseText
            }
        }
        xmlhttp.send(null)
    }
}
//-->
</script> 
<select onchange="touched('',this.value,'center');">
<MTArchiveList archive_type="Category">
<option value="<MTArchiveTitle>"><MTArchiveTitle></option>
</MTArchiveList>
</select>

Daily Archives

<script type="text/javascript">
<!--
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
        xmlhttp = false;
    }
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    xmlhttp = new XMLHttpRequest();
}
function touched(timestamp,category,divID) {
    if (xmlhttp) {
        d=document
        var oInputArray = new Array();
        var requestFile = "<MTBlogURL>ajax-archives.php?timestamp=" + timestamp + "&category=" + category;
        xmlhttp.open("GET", requestFile ,true);
        xmlhttp.onreadystatechange= function () {
            if (xmlhttp.readyState==4) {
                document.getElementById(divID).innerHTML=xmlhttp.responseText
            }
        }
        xmlhttp.send(null)
    }
}
//-->
</script> 
<select onchange="touched('',this.value,'center');">
<MTArchiveList archive_type="Category">
<option value="<MTArchiveTitle>"><MTArchiveTitle></option>
</MTArchiveList>
</select>
<select onchange="touched(this.value,'','center');">
<MTArchiveList archive_type="Daily">
<option value="<$MTArchiveDate format="%Y%m%d%H%M%S"$>-<$MTArchiveDateEnd format="%Y%m%d%H%M%S"$>"><MTArchiveTitle></option>
</MTArchiveList>
</select>

Weekly Archives

<script type="text/javascript">
<!--
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
        xmlhttp = false;
    }
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    xmlhttp = new XMLHttpRequest();
}
function touched(timestamp,category,divID) {
    if (xmlhttp) {
        d=document
        var oInputArray = new Array();
        var requestFile = "<MTBlogURL>ajax-archives.php?timestamp=" + timestamp + "&category=" + category;
        xmlhttp.open("GET", requestFile ,true);
        xmlhttp.onreadystatechange= function () {
            if (xmlhttp.readyState==4) {
                document.getElementById(divID).innerHTML=xmlhttp.responseText
            }
        }
        xmlhttp.send(null)
    }
}
//-->
</script> 
<select onchange="touched('',this.value,'center');">
<MTArchiveList archive_type="Category">
<option value="<MTArchiveTitle>"><MTArchiveTitle></option>
</MTArchiveList>
</select>
<select onchange="touched(this.value,'','center');">
<MTArchiveList archive_type="Daily">
<option value="<$MTArchiveDate format="%Y%m%d%H%M%S"$>-<$MTArchiveDateEnd format="%Y%m%d%H%M%S"$>"><MTArchiveTitle></option>
</MTArchiveList>
</select>
<select onchange="touched(this.value,'','center');">
<MTArchiveList archive_type="Weekly">
<option value="<$MTArchiveDate format="%Y%m%d%H%M%S"$>-<$MTArchiveDateEnd format="%Y%m%d%H%M%S"$>"><MTArchiveTitle></option>
</MTArchiveList>
</select>

Monthly Archives

<script type="text/javascript">
<!--
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
        xmlhttp = false;
    }
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    xmlhttp = new XMLHttpRequest();
}
function touched(timestamp,category,divID) {
    if (xmlhttp) {
        d=document
        var oInputArray = new Array();
        var requestFile = "<MTBlogURL>ajax-archives.php?timestamp=" + timestamp + "&category=" + category;
        xmlhttp.open("GET", requestFile ,true);
        xmlhttp.onreadystatechange= function () {
            if (xmlhttp.readyState==4) {
                document.getElementById(divID).innerHTML=xmlhttp.responseText
            }
        }
        xmlhttp.send(null)
    }
}
//-->
</script> 
<select onchange="touched('',this.value,'center');">
<MTArchiveList archive_type="Category">
<option value="<MTArchiveTitle>"><MTArchiveTitle></option>
</MTArchiveList>
</select>
<select onchange="touched(this.value,'','center');">
<MTArchiveList archive_type="Daily">
<option value="<$MTArchiveDate format="%Y%m%d%H%M%S"$>-<$MTArchiveDateEnd format="%Y%m%d%H%M%S"$>"><MTArchiveTitle></option>
</MTArchiveList>
</select>
<select onchange="touched(this.value,'','center');">
<MTArchiveList archive_type="Weekly">
<option value="<$MTArchiveDate format="%Y%m%d%H%M%S"$>-<$MTArchiveDateEnd format="%Y%m%d%H%M%S"$>"><MTArchiveTitle></option>
</MTArchiveList>
</select>
<select onchange="touched(this.value,'','center');">
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveDate format="%Y%m%d%H%M%S"$>-<$MTArchiveDateEnd format="%Y%m%d%H%M%S"$>"><MTArchiveTitle></option>
</MTArchiveList>
</select>

Finally, you'll need to create the ajax-archives.php file. This file must only contain the content you wish to appear in your main content column (i.e. you don't need tags such as <html>) and this template must be dynamically published.

<script type="text/javascript">
<!--
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
        xmlhttp = false;
    }
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    xmlhttp = new XMLHttpRequest();
}
function touched(timestamp,category,divID) {
    if (xmlhttp) {
        d=document
        var oInputArray = new Array();
        var requestFile = "<MTBlogURL>ajax-archives.php?timestamp=" + timestamp + "&category=" + category;
        xmlhttp.open("GET", requestFile ,true);
        xmlhttp.onreadystatechange= function () {
            if (xmlhttp.readyState==4) {
                document.getElementById(divID).innerHTML=xmlhttp.responseText
            }
        }
        xmlhttp.send(null)
    }
}
//-->
</script> 
<select onchange="touched('',this.value,'center');">
<MTArchiveList archive_type="Category">
<option value="<MTArchiveTitle>"><MTArchiveTitle></option>
</MTArchiveList>
</select>
<select onchange="touched(this.value,'','center');">
<MTArchiveList archive_type="Daily">
<option value="<$MTArchiveDate format="%Y%m%d%H%M%S"$>-<$MTArchiveDateEnd format="%Y%m%d%H%M%S"$>"><MTArchiveTitle></option>
</MTArchiveList>
</select>
<select onchange="touched(this.value,'','center');">
<MTArchiveList archive_type="Weekly">
<option value="<$MTArchiveDate format="%Y%m%d%H%M%S"$>-<$MTArchiveDateEnd format="%Y%m%d%H%M%S"$>"><MTArchiveTitle></option>
</MTArchiveList>
</select>
<select onchange="touched(this.value,'','center');">
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveDate format="%Y%m%d%H%M%S"$>-<$MTArchiveDateEnd format="%Y%m%d%H%M%S"$>"><MTArchiveTitle></option>
</MTArchiveList>
</select>
<?php $timestamp = preg_split('/-/', $_REQUEST['timestamp']); $this->stash('start', $timestamp[0]); $this->stash('end', $timestamp[1]); ?>

<MTEntries category="`$smarty.request.category`" current_timestamp="`$start`" current_timestamp_end="`$end`">
....
</MTEntries>

Basically what this does is, MTEntries gets all entries from a specificed category (as per the category drop down) or gets entries between two timestamps (sent by the date-based drop downs)

1 Comments

Lola Lee said:
on Jul 3, 2005 4:48 PM | Reply

I'll definitely have to try that! Checked in on the thread . . . unfortunately, looks like nobody answered my question, even to sa if this possible or not.