Use a MODX page to act as the ajax handler - all you need to do is use the blank template and put your code into a snippet on the page.
I don’t understand how you make a MODX page act as an ajax handler.
Lets see if I’ve got this right.
1. Create a snippet with my php code in?
<?php
// [[exampleSnippet]] also known as combo.php
$array = array();
if ($_GET['_name'] == 'country')
{
if ( $_GET['_value'] == 3 )//usa
{
$array[] = array('1' => 'Montana');
$array[] = array('2' => 'New York');
$array[] = array('3' => 'Texas');
} else
{
$array[] = array('0' => 'No state');
}
} elseif ($_GET['_name'] == 'state')
{
if ( $_GET['_value'] == 2 )//New York
{
$array[] = array('1' => 'New York');
$array[] = array('2' => 'Another city');
} else
{
$array[] = array('0' => 'No city');
}
} else
{
$array[] = array('1' => 'Data 1');
$array[] = array('2' => 'Data 2');
$array[] = array('3' => 'Data 3');
}
echo json_encode( $array );
?>
2. Create a page with my Javascript call, using the (blank) template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>jQuery ajax demo populating select dropdown menu</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="jquery.chainedSelects.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(function()
{
$('#country').chainSelect('#state','[b]combo.php[/b]',
{
before:function (target) //before request hide the target combobox and display the loading message
{
$("#loading").css("display","block");
$(target).css("display","none");
},
after:function (target) //after request show the target combobox and hide the loading message
{
$("#loading").css("display","none");
$(target).css("display","inline");
}
});
$('#state').chainSelect('#city','[b]combo.php[/b]',
{
before:function (target)
{
$("#loading").css("display","block");
$(target).css("display","none");
},
after:function (target)
{
$("#loading").css("display","none");
$(target).css("display","inline");
}
});
});
</script>
</head>
<style type="text/css">
#loading
{
display:none;
color:#CC3300;
border:2px solid #CC3300;
background:#FFCCCC;
font-weight:bold;
margin-bottom:1em;
/*
background:url("ajax-loader.gif");
background-repeat:no-repeat;
margin-bottom:1em;
height:16px;
*/
}
</style>
<body>
<div id="loading">Loading</div>
<form name="formname" method="post" action="">
<!-- country combobox -->
<select id="country" name="country">
<option value="1">France</option>
<option value="2">Romania</option>
<option value="3">Usa</option>
<option value="4">Brazil</option>
</select>
<!-- state combobox is chained by country combobox-->
<select name="state" id="state" style="display:none"></select>
<!-- city combobox is chained by state combobox-->
<select name="city" id="city" style="display:none"></select>
</form>
</body>
</html>
What goes in the part where it says combo.php?
I’ve tried putting [[sampleSnippet]] in this part and it does not work.
Perhaps I’m making a mistake somewhere, if you can clarify this, that’d be great.
MODX Staff
