Elements created via ajax. [Solved]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Elements created via ajax. [Solved]

Post 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');
						}
					});
				
				});
			}
		});
	});
 });
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Elements created via ajax. [Solved]

Post 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.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Elements created via ajax. [Solved]

Post 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.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Elements created via ajax. [Solved]

Post 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.
Post Reply