AJAX event don't seems to be fired

Hi,

got my earlier problem solved but now it seems that the ajax event don't seems to be fired when a selection has been done in the first dropdown box.

When I'm calling the ajax event like url... &event=ajaxevent then the output is clearly there.

Have checked the FAQ again but didn't find anything wrong.

Do i need some additional setting that i forgot or missed?

Hi rodiusd,

There's no way for me to tell if you missed something :-(

You can debug Ajax using your web browser developer tools (click F12 in most browsers) then look at the Net settings when you make an Ajax call. Usually you can see the Parameters sent and the Response back. The image below is an example from Chrome where the Response is a set of JSON encoded data.

Bob

Hi Bob,

as this is a following of my earlier problem, you mentioned to not include anything in the "Extra Options Extensions box".

Now i played around after reading some more topics here and found that the JS code, to execute the change event, is not created in the webpage when there is nothing put in this box. So i put something in it and got the extra change event:

Emty "Extra Options"

//<![CDATA[
			window.addEvent('domready', function() {
				document.id('chronoform_AJAX_dropdown').addClass('hasValidation');
				formCheck_AJAX_dropdown = new FormCheckMax('chronoform_AJAX_dropdown', {
					onValidateSuccess: function(){},
					display : {
						showErrors : 1,
						errorsLocation: 1					}
				});										
			});
			
//]]>
  </script>

Something in the box

//<![CDATA[
			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',
							onRequest: function(){
								document.id('event').empty();
								new Element('option', {'value': '', 'text': 'Loading...'}).inject(document.id('event'));
							},
							onSuccess: function(responseText){
								document.id('event').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('event'));
								});
								document.id('event').fireEvent('change');
							},
							onFailure: function(){
								document.id('event').empty();
								new Element('option', {'value': '', 'text': 'Loading failed.'}).inject(document.id('event'));
							}
						});
						load_req.send(document.id('team').get('name')+'='+document.id('team').get('value'));
									});
			});
		
//]]>
//<![CDATA[
			window.addEvent('domready', function() {
				document.id('chronoform_AJAX_dropdown').addClass('hasValidation');
				formCheck_AJAX_dropdown = new FormCheckMax('chronoform_AJAX_dropdown', {
					onValidateSuccess: function(){},
					display : {
						showErrors : 1,
						errorsLocation: 1					}
				});										
			});
			
//]]>
  </script>

But then i encounter the problem you solved yesterday.

Also the second dropdown get filled but with undefined stuf

What is wrong here?