Bob, thank you very much for sharing this code!
I wish I had it when I posted my question :wink:
Meanwhile, I solved it my way, which is similar, but I didn't base it on the Dynamic Dropdown action, since I have a lot of other ajax and php stuff running in this form.
I'll detail here my solution, focusing just on the mission of rendering the second dropdown select input for editing:
I use a custom code (php), which is inserted
AFTER the
DB RECORD LOADER action (the order is important!).
Tip: instead of writing straight into the action box, I link it to an external php file. This way the coding and debugging is way faster and easier to maintain.
So this is the code of the CUSTOM CODE action (defined as a Controller):
<?php
$path = JPATH_SITE;
require $path.'/templates/my_template/lib/my_form.php';
?>
Then, this is the relevant code in my_form.php:
<?php
defined('_JEXEC') or die('Restricted access');
$document =& JFactory::getDocument();
if ( !$form->data['select_b'] ) {
$form->data['select_b'] = '';
}
$script = "
var selectBid = '{$form->data['select_b']}';//later we use it to set relevant OPTION as SELECTED
//in the next url, the 'my_form' should be replaced with the name of the form where the 'ajax2' is whithin.
var url = '".JURI::root()."index.php?option=com_chronoforms&chronoform=my_form&event=ajax2&format=raw';
window.addEvent('domready', function() {
var select_a = $('select_a').value;
var select_b = $('select_b');
//function to set the options of the second dropdown
function setSelectB (value, text){
var newoption = new Option(text, value);
if(value == selectBid){
newoption.setProperty('selected', 'selected');
}
try {select_b.add(newoption, null);}
catch (e){select_b.add(newoption);}
}
//function to get by AJAX the options for the second dropdown
function getSelectB(){
var jSonRequest = new Request.JSON({
url:url,
data:{'select_a':select_a,'action':'getoptions'},
onComplete: function(r) {
if(r.action_fb == 'ok'){
select_b.empty();
for(var i=0;i< r.options.length;i++){
setSelectB(r.options[i].value, r.options[i].text);
}
}else{
alert(r.action_fb);
setSelectB('','Options loading failed');
}
}
}).send();
/* >>>>>>>>>> JSON END ********* */
}
//The previous two functions can be inside the next IF, but I seprated them for my reasons.
if(select_a){//this is an edit mode and the query has what to work with
select_b.empty();//Empty the second dropedown
setSelectB('','Loading Options');//Set a temporary optoins with an empty value
getSelectB();//calling for the AJAX which loads the options and add them to the second dropdown
}
});/* END OF DOMREADY */
";
$document->addScriptDeclaration($script);
?>
I added an EVENT and set it's name to AJAX2 and linked to it another file (the same way I mentioned before) - my_form_ajax.php:
<?php
defined('_JEXEC') or die('Restricted access');
$action = JRequest::getString('action','','post');
$select_a = JRequest::getInt('select_a','','post');
$response = array();//this array will be sent back with the query results and a feedback message
//I use $select_a which was sent by JSON to query the database
//You have to build the query following the structure of your table
//The $action is not realy necessary, but I use it since I have other AJAX requests for other purpeses.
if ($action == 'getoptions'){
if ( $select_a ){
$db =& JFactory::getDBO();
$query =& $db->getQuery(true);
$query
->select(array('c.cf_id AS value','c.qcat_name AS category'))
->from('#__q_categories AS c')
->where('c.access_level='.$select_a)
->order('category ASC');
$db->setQuery($query);
$qcat = $db->loadObjectList();
if ($qcat){
$response['action_fb'] = 'ok';
foreach($qcat as $row){
$response['options'][] = array('value'=>$row->value,'text'=>$row->category);
}
}else{
$response['action_fb'] = 'The system could not find any relevant option for the second dropedown.';
}
}else{
$response['action_fb'] = 'The system is trying to find the options, but no value was detected in the first drowpdown';
}
}else{
$response['action_fb'] = 'The system does not recognize the requested action';
}
echo json_encode($response);
?>
Now I don't really need the Dynamic Dropdown Action since I can use the same AJAX request, but this is of course up to the developer.
It is not as compact as your's, Bob, but it works and once the logic is clear, it is possible to build a complex AJAX form, with data pulled and sent to many other tables and of course real time dynamic data presentation within the form.
Thanks again Bob, I got some ideas from your solution which help me with other stuff I'm struggling with.
