Dynamic dropdown help

I have been building forms with Chronoforms for a couple of days now and have accomplished great things.

One thing I cannot seem to understand is how to set up dynamic dropdowns. I am trying to set up two drop down boxes. One contains a list of countries, retrieved from one table in my database. The other should dynamically show the cities of the country selected in the first. These cities are retrieved from a second table in the database. Both are linked via the ISO-code of those countries.

Could someone explain to me what I should do to make this work? What elements do I add and what actions? And in which order?

Hi,

Please set the source and target drop downs IDs, enable the AJAX and set the AJAX event name (ex: city), create a new event in the form and call it "city", use a "DB Multi record loader" to load your cities list based on the passed value from the source dropdown, the returned result (event output) should be a string in this format:

value1=Title 1
value2=Title 2
value3=Title 3

Regards,
Max

And don't forget the last tip under the Help tab in the action, you must add this code in a custom code action at the end of the new event:

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

Max,

I believe I have set things up correctly for the bigger part. However, still the second dropdown is not filled after the selection of the first changes. Please see the attachments (4 more will follow in next posts), which I am also including for future reference for others having difficulties setting this up. The one thing I do not understand is the event output principle. I do not know where to enter the information. And I believe that to be the exact cause of the problem.

[attachment=2]1_dropdown_country.png[/attachment]
[attachment=1]2_dropdown_city.png[/attachment]
[attachment=0]3_events_actions.png[/attachment]

[attachment=2]4_db_multirecord_countries.png[/attachment][attachment=1]5_dynamic_dropdown.png[/attachment]
[attachment=0]6_db_multirecord_cities.png[/attachment]

[attachment=0]7_custom_code.png[/attachment]

Hi Michiel,

What's the country dropdown "field name" ?

Whats the City table structure ?

A quick note, your cities drop down should be empty when the form loads, why do you enable the "Dynamic Data" for this one ?

Regards,
Max

Hi Max,

The field name of the country dropdown is country, and so is the field ID. Using the same word in all those fields is confusing, but I cannot easily assign more descriptive names until I fully understand which field represents/references what...

The city table consists of three field: ID (autonumber), isocode (e.g. NL or GB) and cityname.
The country table only has three fields as well: ID, isocode and country.

Concerning your dynamic data question: Thought that would still be necessary to retrieve the data after the selection of the first dropdown changes.

Hi MichielStr,

Please see this FAQ which I've just added. It includes a little tutorial at the end about using the Dynamic Dropdown action.

Bob

Hi Bob,

Nope... This is getting extremely frustrating. I have set all settings exactly the way Max and you explained to set them. Still nothing.

Looks like it simply isn't calling the AJAX event. Have I missed something else?

Michiel

Hi Michiel,

Hard to tell from here. Please post a link to the form so I can take a quick look.

You can debug the Ajax using your browser web developer tools. I use FireBug in FireFox; the Net tab will let you see the data sent to and from the server in the Ajax transaction.

Bob

Bob,

As you might have seen, I have pm'ed you the link.

Do you know how I can output (echo) the query run or created for the 2nd dropdown?

Michiel

Bob, I have the same question.
How do you do this?

@Michiel,

I'm not sure if you have managed to get this working or not yet, but if your country drop down name is "country" and based on teh city table structure, you will need this inside the AJAX event:

#1- DBMRL action, parameter field = "country", DB field = "isocode", table => cities table, Model id = "Country".

#2- Custom code action with the code to output the list in in multi line format:

<?php
foreach($form->data['Country'] as $country){
echo $country['cityname']."=".$country['cityname']."\n";
}
$mainframe =& JFactory::getApplication();
$mainframe->close();
?>

You can check the returned response using Firebug as Bob ha shown.

Regards,
Max

Max,

No, still not working. Firebug is of no use, since the AJAX-event is not being triggered somehow.

Following scenarios and results:

- If I put the following in the 'Extra options extension'-box: 'NL:1=Zwolle,2=Apeldoorn' etc and leave 'Use JAVA' switched off, the city-dropdown correctly shows the results.
- If I leave that same string in the box and change 'Use AJAX' to Yes, the result in the city-drop down becomes 'undefined'.
- If I then empty the 'Extra options extension' (leaving 'Use AJAX' on 'On'), nothing happens when I change the country. The city-drop down keeps showing the fields from the Options-box of the drop down's settings.

Michiel

BTW, I believe that where you say 'Country' in Model ID, you actually mean 'City'? And that, of course, the same then goes for the php-script?

How weird is this? I have just put some meaningless characters in the 'Extra options extension'-box and now the second dropdown is working correctly!

For some reason that box needs to have something entered for the JAVA-event to be called.

Hi MichielStr,

Sorry, I noticed this bug but forgot to record it in the FAQ :-(

I've updated the FAQ and added it to the Bugs list with the fix.

Bob

Hi GreyHead,

I am using ajax and somehow the default value for selection box after the ajax event get's "undefined" in the box.

http://parapoupar.com/index.php?option=com_chronoforms&tmpl=component&chronoform=form_livros_usados

I have read the bug and have tried the text in the extra box and the correction in cfaction_dynamic_dropdown.php.

😟

Tks

Hi renas,

It looks OK here in FireFox, which browser are you using and where exactly do you see the error?

Bob

Hi GreyHead,

Please select the first dropdown. 2nd dropdown get's undefined. Cannot understand why.

Regards

Hi renas,

I did, it shows a new option set in the second drop-down on each selection. Looks as though it works perfectly.

Bob

Hi GreyHead,

In Mozzila the text defined in custom code disappears and do an empty space.
"Seleccione por Favor..."

In IE and Chrome show as "Undefined".

Regards

Hi renas,

Here's what I see in FireFox now:

Bob

Hi GreyHead,

Could you please test in IE or Chrome?
I am defining the first empty value in custom code.

$results[] = 'Seleccione Por Favor...';

Tks for your help

Hi renas,

There is no form with this name or may be the form is unpublished, Please check the form and the url and the form management.

Bob

Hi,

Sorry i have changed the form name.
Please test here.

http://parapoupar.com/index.php?option=com_chronoforms&tmpl=component&chronoform=form_livros_usados_edit

Regards

Hi renas,

I can now see the 'undefined'. I think that is is because the data you are passing back looks like this

Seleccione Por Favor...
7=7º Ano
8=8º Ano
9=9º Ano
10=10º Ano
11=11º Ano
12=12º Ano

and the first line needs to be

=Seleccione Por Favor...

so that the value is '' and the text is 'Seleccione Por Favor...'. At present the value is 'Seleccione Por Favor...' and the text is . . . undefined.

Bob

Hi GreyHead,

I will run out of money if i pay 1 beer for each great support from you.
Problem resolved.

Many Tks,🙂

Hi,

Sorry i have changed the form name.
Please test here.

http://parapoupar.com/index.php?option=com_chronoforms&tmpl=component&chronoform=form_livros_usados_edit

Regards

Hello renas, could you send to me a step by step only of dropdowns in your form, i getting confused
my goal is to do state/city dropdowns

You can email me in portuguese clovis@hdibrasil.com.br