Double DropDown using AJAX ChronoForms v4

Hi,

I got the ChronoForms v4 using AJAX how to doc and followed instructions modifying column names as needed. Instead of state I have a source and the counties are casestudies.

I placed the following code on a custom form element

<?php
if ( !$mainframe->isSite() ) { return; }
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `cf_id`, `source`
FROM `#_case_studies`
GROUP BY `source`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
?>

<select class="" id="source" size="1" title="" name="source">
<option value="">==??==</option>
<?php
foreach($data as $d) {
echo "<option value='".$d->cf_id."'>".$d->source."</option>";
}
?>
</select>


On the events I have a Load JS on the On Load event and I have the following code:

var cf_formname = "Test";
window.addEvent('domready', function() {
$('state').addEvent('change', function() {
var a=$('source').value;
if(a!=null && a!='') {
getCaseStudy(a);
} else {
$('ajax_getcasestudy').setHTML("<span id='ajax_getcasestudy'>Please select source</span>")
}
});
});
function getCaseStudy(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_getcasestudy').setStyle('visibility','visible');
},
onComplete: function(){
$('progress_getcasestudy').setStyle('visibility','hidden');
},
update: $('ajax_getcasestudy'),
data: {'sid' : a}
}).send();
};

And lastly I have an Ajax Event on the form with the following code

<?php
$source_id= & JRequest::getString('sid','','get');
if ($source_id){
$db=& JFactory::getDBO();
$query="
SELECT `CaseStudyName` AS `id`, `CaseStudyName`
FROM `#_case_studies`
WHERE `source` =`$source_id`
ORDER BY `CaseStudyName`;
";
$db_>setQuery($query);
$data=$db->loadObjectList();
if(count($data)){
$m=new stdClass();
$m->id=0;
$m->CaseStudyName= '==?==';
$data = array_merge(array($m), $data);
$return = JHTML::_('select.genericlist', $data, 'CaseStudyName','class="input required select" size="1", 'id', 'CaseStudyName', 0);
}else{
$return = "Sorry, we couldn't find that source";
}
} else{
$return = "Sorry, we couldn't find a source id";
}
echo $return;
$mainframe->close();
?>


When I run the form, the first dropdown gets populated with the source but that's about it, when I select any source the second drop down doesn't get populated with the case studies. HELP please any tips are welcome as I've been staring at this for far too long and I just can't figure out what is missing.

I have looked at a similar thread at http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=2&t=21871 and compared my code but still no luck:(

Thanks

I have also tried changing the method in the ajax code from 'get' to 'post' but no luck

<?php
$source_id =& JRequest::getString('sid','','post');
if ( $source_id ) {
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `CaseStudyName` AS `id`, `CaseStudyName`
FROM `#_case_studies`
WHERE `source` = `$source_id`
ORDER BY `CaseStudyName`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
if ( count($data) ) {
$m = new stdClass();
$m->id = 0;
$m->CaseStudyName= '==?==';
$data = array_merge(array($m), $data);
$return = JHTML::_('select.genericlist', $data, 'CaseStudyName','class="input required select" size="1"', 'id', 'CaseStudyName', 0);
} else {
$return = "Sorry, we couldn't find that source";
}
} else {
$return = "Sorry, we couldn't find a source id";
}
echo $return;
$mainframe->close();
?>

below is JS code corrected (missing hyphen)

var cf_formname = 'Test';
window.addEvent('domready', function() {
$('state').addEvent('change', function () {
var a = $('source').value;
if(a!=null && a!='') {
getCaseStudy(a);
} else {
$('ajax_getcasestudy').setHTML("<span id='ajax_getcasestudy'>Please select a source</span>")
}
});
});
function getCaseStudy(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_getcasestudy').setStyle('visibility','visible');
},
onComplete: function(){
$('progress_getcasestudy').setStyle('visibility','hidden');
},
update: $('ajax_getcasestudy'),
data: { 'sid' : a}
}).send();
};

This is all working fine the JS script has an error on line 3 instead of $('state') this should be $('source'). Also added added 'window.console &&' before console.log.

Hi moshiani,

Thank you, I'll make a note to update the document. Apologies for the bugs.

Bob

You're welcome Bob. I've also posted another query on the double dropdown on another thread: http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=2&t=68072

Wondered if you have any ideas, sorry I'm a novice with AJAX, JS (Mootools). I basically want the second dropdown to reload another page on change.

I have a simple JS event code that should pop up an alert message. On webdeveloper console I get the error that $('CaseStudyName.selectbox') is null. Do you know why this is happening? And is this preventing the onchange event from completing?

window.addEvent('domready', function(){
$('CaseStudyName.selectbox').addEvent('change', function () {
myFunction();
});
});

function myFunction() {
alert("Hello World.");

Hi moshiani,

What's "CaseStudyName.selectbox" exactly ? is this a field id in the form ? if its not then it should be fixed, and it should exist when the page loads because this is when you use it.

Regards,
Max