Hi,
I've followed the AJAX double dropdown tutorial(http://greyhead.net/how-to-docs/chronoforms-v4-using-ajax) and got this to work for my data but now I want to attach an event to the second drop down, on selecting the second drop down I want to redirect the user to another page. So I added a second JS event on the form with the following test code that just alerts for now, but happens so far. I have used the web developer toold on the browser to get the name for the second drop down which I have used below:
window.addEvent('domready', function(){
$('CaseStudyName.selectbox').addEvent('change', function () {
myFunction();
});
});
function myFunction() {
alert("Hello World.");
The rest of the code is from the tutorial and is as follows:
JS Code
var cf_formname = 'Casestudy';
window.addEvent('domready', function() {
$('source').addEvent('change', function () {
var a = $('source').value;
if ( a != null && a != '' ) {
getStudy(a);
} else {
$('ajax_getstudy').setHTML("<span id='ajax_getstudy' >Please select a source</span>")
}
});
});
function getStudy(a){
var url = 'index.php?option=com_chronoforms&chronoform='+cf_formname+'&event=ajax&format=raw';
new Request.HTML({
method: 'get',
url : url,
onRequest: function(){
window.console && console.log(url);
$('progress_getstudy').setStyle('visibility', 'visible');
},
onComplete: function(){
$('progress_getstudy').setStyle('visibility', 'hidden');
},
update: $('ajax_getstudy'),
data: { 'sid' : a }
}).send();
};
}
AJAX code
<?php
$source_id =& JRequest::getString('sid', '', 'get');
if ( $source_id ) {
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `CaseStudyName` AS `id`, `CaseStudyName`
FROM `#_case_studies`
WHERE `cf_id` = '$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="selectbox" 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;
?>
I've followed the AJAX double dropdown tutorial(http://greyhead.net/how-to-docs/chronoforms-v4-using-ajax) and got this to work for my data but now I want to attach an event to the second drop down, on selecting the second drop down I want to redirect the user to another page. So I added a second JS event on the form with the following test code that just alerts for now, but happens so far. I have used the web developer toold on the browser to get the name for the second drop down which I have used below:
window.addEvent('domready', function(){
$('CaseStudyName.selectbox').addEvent('change', function () {
myFunction();
});
});
function myFunction() {
alert("Hello World.");
The rest of the code is from the tutorial and is as follows:
JS Code
var cf_formname = 'Casestudy';
window.addEvent('domready', function() {
$('source').addEvent('change', function () {
var a = $('source').value;
if ( a != null && a != '' ) {
getStudy(a);
} else {
$('ajax_getstudy').setHTML("<span id='ajax_getstudy' >Please select a source</span>")
}
});
});
function getStudy(a){
var url = 'index.php?option=com_chronoforms&chronoform='+cf_formname+'&event=ajax&format=raw';
new Request.HTML({
method: 'get',
url : url,
onRequest: function(){
window.console && console.log(url);
$('progress_getstudy').setStyle('visibility', 'visible');
},
onComplete: function(){
$('progress_getstudy').setStyle('visibility', 'hidden');
},
update: $('ajax_getstudy'),
data: { 'sid' : a }
}).send();
};
}
AJAX code
<?php
$source_id =& JRequest::getString('sid', '', 'get');
if ( $source_id ) {
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `CaseStudyName` AS `id`, `CaseStudyName`
FROM `#_case_studies`
WHERE `cf_id` = '$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="selectbox" 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;
?>