Dynamic Data dropdown list on CF v5

Hello,

I'm trying to generate a dropdown list populated with data from a table. I found this http://www.chronoengine.com/faqs/2647-how-do-i-build-a-%3Cspan%20class=, but it's for v4 and some options have changed name and I'm a little bit confused on how the data path works.

My table is called jos_brands and the fields are ID and NAME.

1. I created a form and named it NewRepair.
2. In Setup Tab, I created a DB Read with Multi read enabled, Enable Model ID=yes, Model ID=brand, and Fields = ID,NAME.
3. In Designer Tab, I created a DropDown element having Field Name=brand, Field ID=brand. In Dynamic Data tab, Data path=$newrepair->brand, Value key = id, Id key = name

The dropdown does not show any content and I don't understand how the "data path" works.

I'm sure I'm doing something terribly wrong, you can be harsh on your reply 😉

I forgot to mention I'm using ChronoForms V5 Component

Thanks for your answer Max, I changed Data Path and now it works🙂 I will wait for the new release anyway.
I have two more questions: Are the variables case sensitive? As far as I know javascript is but SQL is not.
I would also like to populate a second select box based on what is selected on the first one. The explanations of the post are still valid for v5? I mean this one http://www.chronoengine.com/faqs/2647-how-do-i-build-a-%3Cspan%20class=

Thanks very much,

guiz

Hi Guiz,

V5 has a new way to handle dynamic dropdowns, the setting is now under the dropdown's "Events" tab, no action is needed.

Regards,
Max

In the "Events" tab, should I leave the "Value selected" blank so the event is triggered for any of the selected values?
I guess in "Action" I should choose "function" and then, what else should I do? I can write php, sql, javascript and ajax but I'm confused with the framework.
Let's say my second table is called jos_models and contains the fields id, name and brand_id. When I select a brand in the first drop down I would like to populate the second drop down with all the models of that brand.
I couldn't find documentation such as tutorials, wikis or other material on CFv5, only this forum.

Thank you,

guiz

Well, there is no way to do AJAX yet, if you can write that stuff then the easiest way is to write it using JQuery and paste the code inside a "JS" action and place it before the "HTML" action.

Your AJAX can call a new form event (created by you), and you can add "&tvout=ajax" to the AJAX url to return plain results.

Please post any questions you may have, hopefully we will be able to post more tutorials for v5 soon!

Regards,
Max

Hi Max,

I'm used to work with jQuery, but there are some conflicts with mootools library. A simple jQuery selector $("#brand") is not working, mootools is overwriting the $ function. I'm not familiar with mootools, never used it before and I would like to avoid it if possible. Does CFv5 use mootools? If the answer is no, how do you avoid conflicts between jQuery and mootools?

Hi guiz,

Which version of Joomla! are you using? If it is Joomla! 3 then you should have no problems using JQuery, provided that you do not try to add a new version of the library, the one loaded by Joomla! will normally co-exist with MooTools (which is now deprecated in Joomla! 3).

If it is an earlier version of Joomla! then you can use JQuery provided that you put it into noConflict mode. Please see this FAQ

Bob

Hello,

thank you for your reply. My Joomla! is 3.2.1. It's a fresh installation from last week. In the form there is a select element with id="brand". $("#brand") returns nothing. Instead, the mootools notation, $('brand') returns the select object. In the debugger I can see that the files media/system/js/core.js and media/system/js/mootools-core.js are loaded.
I can also see the following files loaded:
libraries/cegcore/assets/jquery/jquery.js
libraries/cegcore/assets/jquery/jquery.inputmask.js
media/jui/js/jquery-migrate-min.js
media/jui/js/jquery-noconflict.js
media/jui/js/jquery-min.js

Forgot to mention that jQuery("#brand") works. It seems that mootools stole the $ function.

Hi guiz,

As far as I know CFv5 on Joomla! 3.2 doesn't use MooTools

Bob

Hello GreyHead,

something is loading mootools, I'm still confused about that. But anyway there is a workaround, using jQuery("#id") instead of $("#id") will work.
In the Setup tab, when adding a "Load JavaScript" inside the onload event, having as content

jQuery("#brand").change(function(){alert("Changing brand...")});

,
the code is placed right before the

jQuery(document).ready(function($){

So the event listener onchange is not working.

Where could I place it so I can trigger the ajax functions when the select option is changed? Thank you.

guiz

Hi guiz,

This seems to be a Joomla! 'feature' it loads script snippets before it loads script files. I get round this by calling the JQuery library first in the Load JS action:

<?php
JHtml::_('jquery.framework');
?>
jQuery("#brand").change(function(){alert("Changing brand...")});

Please see this FAQ for a bit more on loading libraries.

Bob

Hi GreyHead,

thanks for the link. I had already read it and installed the Enable/Disable Mootools plugin. It does disable the mootools, but in the CFv5 page cointaining the form, it is still loaded. By the way, the link is about CFv4, isn't it? CFv5 does not use mootools anymore, right?

I inserted the php code in the Load Javascript but still is loaded before

jQuery(document).ready(function($){

and so the onchange event is not registered. Thank you very much for your help.

guiz

Hi GreyHead,

I asked the guys from Joomla! about this mootools being loaded and it seems it's a known problem and will be fixed on next release. More details here: http://forum.joomla.org/viewtopic.php?f=706&t=834433&p=3134868#p3134868

I don't know if this also causes the onchange event not be registered.

Hi Guiz,

I think that you need to place the change event inside a document ready event, or you will have to load it in the page AFTER the element's html code has been loaded.

Regards,
Max

Thank you very much Max,

placing it inside the document ready event works. There is an extra advantage, the document ready function can have the $ function as parameter, so the code inside is safe to use the $ symbol for jQuery. No conflict with mootools anymore🙂

I guess that's how CFv5 uses jQuery without conflicts.

Just in case is clearer for anybody reading this post: I placed a Load JS before the HTML render having as content:
jQuery(document).ready(function($){
$("#brand").change(function() {
alert("Changing the brand");
});
});


Regards,

guiz

Thank you GrayHead and Max. Finally I got my secondary populated box which depends on the value selected in the first one.

Below I'm posting the full code inside the Load Javascript. In the form I have a select element called "brand", and another select element called "model". When a brand is selected, the file models.php is called, returning a JSON list of models. The "model" select element will be populated with those values.

The first select element can be populated using the Dynamic Data options from CFv5.

I'm sure the following code is not the best one, but it works.

JS:

jQuery(document).ready(function($){
	$("#brand").change(
		function() {
			brand=$("#brand option:selected").val(); //brand id
			
			$.getJSON(
				"models.php",
				{"brand":brand}, //GET parameter
				
				function(data){
				
					$.each(data,function(id,model){
						$("#model").append("<option value="+id+">"+model.COMMERCIAL_NAME+"</>\n");
					}
					
				);}
				
			); //end getJSON
		} //end ajax
	); //end change event
}); //end ready function

models.php (placed in root directory in my case):

function getModels($brand){

	$sql= "select * from jos_models where brand_id=$brand";
	
	$res=executeQuery($sql); //function which actually executes de sql statement

	$models = array();
	while($row=$res->fetch_assoc()) {
		$models[$row['ID']]=$row;
	}
		
	return $models;

}

echo json_encode(getModels($_GET['brand']));

great, thanks for sharing the code, you may also replace the connection to "models.php" by this:

index.php?option=com_chronoforms5&chronoform=FORM_NAME&event=NEW_EVENT&tvout=ajax

Then create a new event and name it "NEW_EVENT" and place your code inside a "custom code" action there

Regards,
Max