Page 1 of 1

Elements created via ajax. [Solved]

Posted: Wed Oct 17, 2012 2:45 am
by social_experiment
I create a select element using ajax - this second element is based on the results from the first select element. The new element i create however doesn't trigger a second ajax request. Below an example:

Select element 1 -> select option - generated using php. click on option and element 2 is generated.
Select element 2 -> generated using ajax. click on option and element 3 should be generated but isn't.
Select element 3 -> Not generated.

My question - An element created via ajax, can it be used to generate another element via ajax? I've checked the console, firebug and the error console but there is no reported problems with the javascript i use.

Below is the jQuery i use

Code: Select all

 jQuery(document).ready(function(){
	jQuery('select#producerGroups option').click(function(){
		alert('ha');
	/*	
	jQuery('div#innerBox').fadeOut();
	
	var pgTerm = jQuery('select#producerGroups option:selected').val();
	
	jQuery.post('production_ajax1.php', {'pgTerm': jQuery('select#producerGroups option:selected').val()},
	
		function(data) {
			if (pgTerm != '') {
				jQuery('div#innerBox').html(data).fadeIn('slow');
			}
		});
		*/
	});
 });
The commented section is the script to generate the dropdown menu (via production_ajax1.php) but even the alert() doesn't happen when i select an option from select element number 2.

Any advice will be appreciated :)

Edit
Found a solution; apparently because the elements are not created when the ajax is called the element is not bound (or something to that effect). Here is a better explanation http://docs.jquery.com/Frequently_Asked ... do_..._.3F

The solution code is rather simple, unbind the click and add the code into the innitial ajax code.

Code: Select all

 jQuery(document).ready(function(){
	jQuery('select#projects option').click(function(){
	jQuery('div#box').fadeOut();
	
	var term = jQuery('select#projects option:selected').val();
	
	jQuery.post('production_ajax.php', {'term': jQuery('select#projects option:selected').val()},
	
		function(data) {
			if (term != '') {
				jQuery('div#box').html(data).fadeIn('slow');
				jQuery('select#projects option').unbind('click');  // <-- important.
				//
				jQuery('select#producerGroups option').click(function(){
				//
				jQuery('div#innerBox').fadeOut();	
				
				var pgTerm = jQuery('select#producerGroups option:selected').val();
				
				jQuery.post('production_ajax1.php', {'pgTerm': jQuery('select#producerGroups option:selected').val()},
				
					function(data) {
						if (pgTerm != '') {
							jQuery('div#innerBox').html(data).fadeIn('slow');
						}
					});
				
				});
			}
		});
	});
 });

Re: Elements created via ajax. [Solved]

Posted: Wed Oct 17, 2012 4:53 am
by requinix
.click() will only apply to the elements that exist at that moment. If you create any more that match the selector they won't automatically "inherit" the event handler.

Use .live() or .on() - depending on your jQuery version - to get the automaticness.

Re: Elements created via ajax. [Solved]

Posted: Wed Oct 17, 2012 5:33 am
by social_experiment
Thanks for the reply, if i use the functions you mentioned would it alter the structure of my current example (last code snippet in the original post)?;

the line where i unbind the click from the initial select element is actually more problematic because it stops the action from firing again. Once i removed it the script functions as i want it to.

Re: Elements created via ajax. [Solved]

Posted: Wed Oct 17, 2012 12:52 pm
by requinix
social_experiment wrote:if i use the functions you mentioned would it alter the structure of my current example (last code snippet in the original post)?
No, it's essentially just a different function name with slightly different arguments. The net behavior is the same.