Forums

Hi,

got a dynamic dropdown working. Added two more fieldthat i want to populate when I select something in the second DD box. So i added a little JS who should react on a change in the second box:

window.addEvent('load', function() {
  document.id('game').addEvent('change', function(){
	  Request({
		  url: 'index.php?option=com_chronoforms&chronoform=AJAX_dropdown&event=getTeamGameInfo',
			method: 'get',
			onRequest: function(){
			  document.id('hteam').set('text':'Loading...');
			  document.id('oteam').set('text':'Loading...');
			},
			onSuccess: function(responseText){
        alert('text onSucces');
      },
			onFailure: function(){
			  document.id('hteam').set('text':'Loading failed.');
			  document.id('oteam').set('text':'Loading failed.');
			}
		}).send();
	});
});

Had an action added to the onLoad event.

When showing the page source on initial load the JS is loaded after the dynamic dropdown JS.

However when I now select something in the first dropdown box nothing is happening.

What could be here the problem?

Hi rodius,

The code looks OK. Do you see any errors in your browser JavaScript Console when you run it?

Bob

Hi Bob,

no the only thing i remark is that the url request, from the dynamic dropdown box, is no longer executed.
Include this code, maybe you see a discrepance between the two

			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=getTeamGames',
							method: 'get',
							onRequest: function(){
								document.id('game').empty();
								new Element('option', {'value': '', 'text': 'Loading...'}).inject(document.id('game'));
							},
							onSuccess: function(responseText){
								document.id('game').empty();
								var response_data = responseText.trim().split("\n");
								response_data.each(function(line){
									var line_data = line.split("=");
									new Element('option', {'value': line_data[0], 'text': line_data[1]}).inject(document.id('game'));
								});
								document.id('game').fireEvent('change');
							},
							onFailure: function(){
								document.id('game').empty();
								new Element('option', {'value': '', 'text': 'Loading failed.'}).inject(document.id('game'));
							}
						});
						load_req.send(document.id('team').get('name')+'='+document.id('team').get('value'));
									});
			});

Hi Bob,

found that the JS code generated by CF for the dynamic dropdown contain the following line of code:

document.id('game').fireEvent('change');

Could this influence the working of my event?

Hi rodius,

The JavaScript looks OK to me. I don't see any obvious errors. And I don't see why the .fire() method would be a problem.

As I've said before, the way to debug this is with your browser web develop tools to see exactly what is being sent to, and returned by, the Ajax event in your form.

Bob