It’s a bit messy, but I basically just commented out the categories in the CP, then used AJAX in the SAEF to handle it instead.
My kind of ghetto javascript for the Ajax (each “level” is a sub-category level…I know there is a more efficient way to do this, I just had to make it quick):
var xmlhttp;
function getlevel1(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="http://www.vacationmouse.com/vm.php/ajax/level1/";
url=url+str;
url=url+"&sid;="+Math.random();
xmlhttp.onreadystatechange=stateChanged1;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged1()
{
if (xmlhttp.readyState==4)
{
document.getElementById("level1")[removed]=xmlhttp.responseText;
}
}
function getlevel2(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="http://www.vacationmouse.com/vm.php/ajax/level2/";
url=url+str;
url=url+"&sid;="+Math.random();
xmlhttp.onreadystatechange=stateChanged2;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged2()
{
if (xmlhttp.readyState==4)
{
document.getElementById("level2")[removed]=xmlhttp.responseText;
}
}
function getlevel3(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="http://www.vacationmouse.com/vm.php/ajax/level3/";
url=url+str;
url=url+"&sid;="+Math.random();
xmlhttp.onreadystatechange=stateChanged3;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged3()
{
if (xmlhttp.readyState==4)
{
document.getElementById("level3")[removed]=xmlhttp.responseText;
}
}
function getlevel4(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="http://www.vacationmouse.com/vm.php/ajax/level4/";
url=url+str;
url=url+"&sid;="+Math.random();
xmlhttp.onreadystatechange=stateChanged4;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged4()
{
if (xmlhttp.readyState==4)
{
document.getElementById("level4")[removed]=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
An example of the template (3rd level sub-category in this case) called by AJAX:
{exp:query sql="SELECT * FROM exp_categories WHERE parent_id = '{segment_3}' ORDER BY cat_name ASC"}
{if count == 1}
<select name="level3">
<option value="">--</option>
{/if}
<option value="{cat_id}">{cat_name}</option>
{if count == total_results}
</select>
{/if}
{/exp:query}
And the actual code in the template that is displayed to the user:
<select name="level0">
<option value="">--</option>
{exp:query sql="SELECT * FROM exp_category_groups"}
<option value="{group_id}">{group_name}</option>
{/exp:query}
</select>
<div id="level1">
</div>
<div id="level2">
</div>
<div id="level3">
</div>
<div id="level4">
</div>