Hi each,
It took a while but here's the re-worked version for ChronoForms v4 (seems to be OK on Joomla! 1.5 or 1.6).
Form HTMLThis is similar to your form HTML but modified to use the CFv4 layout
<?php
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `ISO2`, `Region1`
FROM `#__geopc_us`
ORDER BY `Region1`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
?>
<div class="ccms_form_element cfdiv_select" id="label_text_container_div">
<label>Region</label>
<select class="" id="state" size="1" title="" name="state">
<option value="">==??==</option>
<?php
foreach($data as $d) {
echo "<option value='".$d->ISO2."'>".$d->Region1."</option>";
}
?>
</select>
<div class="clear"></div>
<div id="error-message-input_select_0"></div>
</div>
<div class="ccms_form_element cfdiv_select" id="label_text_container_div">
<label>County</label>
<span id='ajax_getcounty' style='color:#444;'>Please choose a state</span>
<span id='progress_getcounty' style='visibility:hidden;' > Searching . . .</span>
<div class="clear"></div>
<div id="error-message-input_select_0"></div>
</div>
<div class="ccms_form_element cfdiv_submit" id="input_submit_1_container_div">
<input name="input_submit_1" class="" value="Submit" type="submit" />
<div class="clear"></div>
<div id="error-message-input_submit_1"></div>
</div>
Form Javascript This goes into a Load JS action. There are a lot of small changes in here to use the new MooTools 1/2/1.3 syntax. Edit the first line to use the name of your form.
var cf_formname = 'my_form_name';
window.addEvent('domready', function() {
$('state').addEvent('change', function () {
var a = $('state').value;
if ( a != null && a != '' ) {
getCounty(a);
} else {
$('ajax_getcounty').setHTML("<span id='ajax_getcounty' >Please select a state</span>")
}
});
});
function getCounty(a){
var url = 'index.php?option=com_chronoforms&chronoform='+cf_formname+'&event=ajax&format=raw';
new Request.HTML({
method: 'get',
url : url,
onRequest: function(){
console.log(url);
$('progress_getcounty').setStyle('visibility', 'visible');
},
onComplete: function(){
$('progress_getcounty').setStyle('visibility', 'hidden');
},
update: $('ajax_getcounty'),
data: { 'sid' : a }
}).send();
};
Ajax event codeThis goes in a Custom Code action in a new On ajax event. I think that this is the same as the previous version.
<?php
$state_id =& JRequest::getString('sid', '', 'get');
if ( $state_id ) {
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `Region2` AS `id`, `Region2`
FROM `#__geopc_us`
WHERE `ISO2` = '$state_id'
ORDER BY `Region2`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
if ( count($data) ) {
$m = new stdClass();
$m->id = 0;
$m->Region2 = '==?==';
$data = array_merge(array($m), $data);
$return = JHTML::_('select.genericlist', $data, 'Region2',
'class="inputbox required select" size="1" ', 'id', 'Region2', 0);
} else {
$return = "Sorry, we couldn't find that state";
}
} else {
$return = "Sorry, we couldn't find a state id";
}
echo $return;
?>
Max wrote: Please check
Max's post here for a very important step in AJAX implementation.
After that I hope the drop down will work OK :-)
Bob
Later: following Max's edit. It looks as though just adding $mainframe->close(); to the end of the Ajax code should do the trick. Still to be tested.