Forums

Hi,

got my dynamic dropdown working but can't figure out how to connect another action/event when we select something from the second dropdown box.

Is there a FAQ about this?

Hi rodiusd,

You can certainly link another drop-down to the first two, I'm not sure if you can do it with the Dynamic Drop-Down action though. Once the coding gets this complex it is probably easier to hand-code it.

Bob

Hi Bob,

there goes my idea of having a complex form created with no extensief manual coding.

So if i understand it correctly I should add a Load JS action in the onLoad event containing all change events ( load data or calculating results fields), that could be possible in the form.

Ex.

window.addEvent('load', function() {
  document.id('team').addEvent('change', function(){
	  var load_req = new Request({
		  url: 'index.php?option=com_chronoforms&chronoform=AJAX_dropdown&event=getTeamEvents',
			method: 'get',
....

I will also need to add events reflecting the names that I'm using to gather additional info from my db.

If i understand it correctly, the called url will then only execute the event with the same name and after execution redisplay the form?

Could you confirm this last one?

Additional question, as I'm not a JS guy, can I add different

document.id('team').addEvent('change', function(){....

to one

window.addEvent

or should these all seperate ones?

Hi rodiusd,

Yes I usually use an included file in a Load JS action once the code is more than a dozen lines. That way I can use a editor that will show up my coding errors :-(

Although there is a bit more work this way you do end up having fuller control over the results. The ChronoForms actions are good as far as they go, but they can't handle every combination without becoming enormously complex.

Note: Once you switch to hand coding the drop-downs you no longer need to use the ChronoForms option format of value=text, it is usually simpler and more effective to have your Ajax event return a JSON object.

Bob

Hi Bob,

this is like learning a new language (JS) for me.
Could help if you have some example of how a dropdown is filled in via a JSON request.
Maybe it could save me some time and help me underway to build my form from scratch that way.

In the mean time thanks for the time invested in trying to learn an old dog new tricks.

Hi rodiusd,

I have found a recent example of a triple-drop down that may help . The code looks long and complex but isn't too bad once you break it into chunks.

Here is the code from the Ajax event:

<?php
defined('_JEXEC') or die('Restricted access');
//echo'<div>$form->data: '.print_r($form->data, true).'</div>';

$db =& JFactory::getDBO();
switch ( $form->data['r'] ) {
  default:
    return false;
    break;
  case 'hose':
    $query = "
      SELECT h.`hose_id` AS value,
          CONCAT(h.`hose_id`, ' - ', t.`hose_type_name`, ' (', IF( h.`has_5_16` = '1', '5/16', '1/4'), ')') as text,
          h.part_no AS  data_part_no,
          p.`img_name` AS data_image
        FROM `#__hc_hose` AS h
        INNER JOIN  `#__hc_hose_type` AS t ON t.`hose_type` = h.`type`
        INNER JOIN `#__hc_part` AS p ON h.`part_no` = p.`part_no`
        WHERE `gas_id` = '{$form->data['gas']}';
    ";
    $db->setQuery($query);
    $data = $db->loadAssocList();
    echo json_encode($data);
    break;
  case 'inlet':
    $swivel = "`swivel` = ''";
    if ( $form->data['swivel'] == 1 ) {
      $swivel = "`swivel` != ''";
    }
    $query = "
      SELECT f.`inlet_code` AS value,
          CONCAT(f.`inlet_code`, ' - ', p.`part_desc`) AS text,
          f.`part_no` AS data_part_no,
          p.`img_name` AS data_image
        FROM `#__hc_fitting` AS f
        INNER JOIN  `#__hc_part` AS p ON f.`part_no` = p.`part_no`
        WHERE `hose_id` = '{$form->data['hose']}'
          AND f.`inlet_code` != ''
          AND {$swivel} ;
    ";
    $db->setQuery($query);
    $data = $db->loadAssocList();
    echo json_encode($data);
    break;
}

$app =& JFactory::getApplication();
$app->close();

?>

Note here that I am using $form->data['r'] to identify which query to run and $form->data['hose'] or $form->data['gas'] to pass the data for that query.

The queries are compound - they are getting data from more than one table; and I am passing back some data items as well as the value and text.

Here is part of the code from the Load JS action which handled one of these calls:

    hose_req = new Request.JSON({
      url: 'index.php?option=com_chronoforms&chronoform=hose_configurator_a&event=ajax_a&r=hose',
      method: 'get',
      onRequest: function() {
        hose.empty();
        new Element('option', {
          'value': '',
          'text': 'Loading . . .'
        }).inject(hose);
      },
      onSuccess: function(resp) {
        //console.log(resp);
        hose.empty();
        new Element('option', {
          'value': '',
          'text': '(please select)'
        }).inject(hose);
        resp.each(function(r) {
          new Element('option', {
            'value': r['value'],
            'text': r['text'],
            'data-part': r['data_part_no'],
            'data-image': r['data_image']
          }).inject(hose);
        });
        hose.disabled = false;
        hose.fireEvent('change');
      },
      onFailure: function() {
        hose.empty();
        new Element('option', {
          'value': '',
          'text': 'Loading failed.'
        }).inject(hose);
      }
    }).post({'gas': gas.value});
  });

This uses new request.JSON() to make the call with some methods; the main one is onSuccess() which empties the 'hose' select list then builds and adds a new set of options for it.

Bob

Hi Bob,

thanks, for this example.

Got two other questions about it:
1. how do you add the execution of this request, via a button or by a event listner? In the second case how do you add it?
2. can we specify a sort of include file in the load JS action instead, to point to a personalized scriptfile and adding all of our stuff in it?

Hi rodiusd,

2) Please see this FAQ

1) The code I posted was extracted from a much longer file. The code I used to call the Ajax is pretty standard and will be something like this

window.addEvent('domready', function() {
  $('select_id').addEvent('change', function(){
    // code to execute on change goes here
  });
  // other JavaScript continues here
});

Bob

Thanks, Bob.

Form is getting form and functionality now.

Give you a sign when final form is ready but suspect there still will some hurdles to take.